{% extends "base.html" %}

{% block content %}
<div class="card mb-0">
    <div class="card-header">
        <h3 class="mb-0">{{ skill.short_label }}</h3>
        <h4 class="card-title"> {{ skill.notation }}</h4>
    </div>
    <div class="card-body pb-0 mb-0">
        <div class="row mr-1 ml-1 pb-0 mb-0">
            <div class="col-md-6">
                <!-- <h4 class="mb-1">Détails</h4> -->
                <div class="row">
                    <div class="col-3 text-center">
                        <p>Notation : <a href="#">{{ skill.notation }}</a></p>
                    </div>
                    <div class="col-3 text-center">
                        <p>Difficulty : <a href="/skill/difficulty/exact/{{ skill.difficulty }}">{{ skill.difficulty }}</a></p>
                    </div>
                    <div class="col-3 text-center">
                        <p>Level : <a href="{% url 'skill_listing_by_key' 'level' 'exact' skill.level %}">{{ skill.level }}</a></p>
                    </div>
                    <div class="col-3 text-center">
                        <p>Rank : <a href="{% url 'skill_listing_by_key' 'rank' 'exact' skill.rank %}">{{ skill.level }}</a></p>
                    </div>
                </div>
                <br />
                <div class="row">
                    <div class="col-12">
                        <table class="table table-striped table-condensed" data-sort="table" id="skill_age_table">
                            <thead>
                                <th></th>
                                <th>With help</th>
                                <th>Without help</th>
                                <th>Chained</th>
                                <th>Masterised</th>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Girl</td>
                                    <td><a href="#">{{ skill.get_age_girl_with_help_display }}</a></td>
                                    <td><a href="#">{{ skill.get_age_girl_without_help_display }}</a></td>
                                    <td><a href="#">{{ skill.get_age_girl_chained_display }}</a></td>
                                    <td><a href="#">{{ skill.get_age_girl_masterised_display }}</a></td>
                                </tr>
                                <tr>
                                    <td>Boy</td>
                                    <td><a href="#">{{ skill.get_age_boy_with_help_display }}</a></td>
                                    <td><a href="#">{{ skill.get_age_boy_without_help_display }}</a></td>
                                    <td><a href="#">{{ skill.get_age_boy_chained_display }}</a></td>
                                    <td><a href="#">{{ skill.get_age_boy_masterised_display }}</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <br />
                {% if skill.prerequisites.all or skill.educatives.all %}
                <div class="row">
                    <div class="col-6">
                        <h4>Prerequisites</h4>
                        <ul>
                            {% if skill.prerequisites.all %}
                                {% for prerequisites in skill.prerequisites.all %}
                                <li><a href="{% url 'skill_details' prerequisites.id %}">{{ prerequisites.short_label }}</a></li>
                                {% endfor %}
                            {% else %}
                                <p class="text-muted">No prerequisites defined.</p>
                            {% endif %}
                        </ul>
                    </div>
                    <div class="col-6">
                        <h4>Educatives</h4>
                        <ul>
                            {% if skill.educatives.all %}
                                {% for educatives in skill.educatives.all %}
                                <li><a href="{% url 'skill_details' educatives.id %}">{{ educatives.short_label }}</a></li>
                                {% endfor %}
                            {% else %}
                                <p class="text-muted">No educative defined.</p>
                            {% endif %}
                        </ul>
                    </div>
                </div>
                {% endif %}
                <br />
                <a href="{% url 'skill_tree' skill.id %}">Learning Line</a><br />
                <br />
            </div>
            <div class="col-md-6 alert {% if request.session.template == 0 %}skill-info{% else %}alert-secondary{% endif %} mr-0">
                <p>From <a href="#">{{ skill.departure }}</a>,
                    {% if skill.rotation %}
                        <a href="#">{{ skill.rotation }}</a> quart of <a href="#">{{ skill.get_rotation_type_display }}</a> rotation
                    {% else %}
                        straight jump
                    {% endif %}
                    {% if skill.twist %}
                        with <a href="#">{{ skill.twist }} half-twist</a>
                    {% endif %}
                    {% if skill.get_position_display %}
                        in a <a href="#">{{ skill.get_position_display }}</a> position
                    {% endif %}
                    , landing on <a href="#">{{ skill.landing }}</a>.
                </p>
                <br />
                {% if skill.informations %}
                    {{ skill.to_markdown | safe }}
                {% else %}
                    <p class="text-muted">No more informations provided for this skill.</p>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="card-footer pt-0 row">
        <div class="col-md-12 text-right">
            <a href="{% url 'skill_update' skill.id %}">
                <span class="tim-icons icon-pencil text-warning"></span>
            </a>
        </div>
    </div>
</div>

{% endblock %}

{% block footerscript %}

{% endblock %}