{% extends "base.html" %}
{% load has_group %}

{% block page_title %}{{ combination.short_label }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-6">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">{{ combination.short_label }}</h3>
                <h5 class="card-category mb-0">{{ combination.long_label }}</h4>
            </div>
            <div class="card-body">
                {% if skill_link_list %}
                <table class="table table-striped table-condensed col-6 offset-3" id="list_skill_table">
                    {% for link in skill_link_list %}
                        <tr>
                            <td></td>
                            <td><a href="{% url 'skill_details' link.skill.id %}">{{ link.skill.notation }}</a></td>
                            <td><a href="{% url 'skill_details' link.skill.id %}">{{ link.skill.short_label }}</a></td>
                            <td class="text-center">{% if link.skill.difficulty != 0.0 %}{{ link.skill.difficulty }}{% endif %}</td>
                        </tr>
                    {% endfor %}
                    <tr>
                        <td colspan="3" class="text-right"></td>
                        <td class="text-center"><b>{{ combination.difficulty }}</b></td>
                    </tr>
                </table>
                <div class="row">
                    <div class="col-3 text-center">Niveau : <a href="#">{{ combination.level }}</a></div>
                    <div class="col-3 text-center">Rank : <a href="#">{{ combination.rank }}</a></div>
                    <div class="col-3 text-center">Age Boy : <a href="#">{{ combination.age_boy_masterised }}</a></div>
                    <div class="col-3 text-center">Age Girl : <a href="#">{{ combination.age_girl_masterised }}</a></div>
                </div>

                <div class="row mt-2">
                    <div class="col-6 text-center">Routine : <a href="#">{% if combination.is_routine %}Yes{% else %}No{% endif %}</a></div>
                    <div class="col-6 text-center">Competition : <a href="#">{% if combination.is_competitive %}Yes{% else %}No{% endif %}</a></div>
                </div>

                {% else %}
                    <p>No skill defined for this combination.</p>
                {% endif %}

                {% if routine.informations %}
                <div class="col-md-12">
                    <hr class="m-t">
                    <h5><b>Informations</b></h5>
                    <!-- <p>{{ skill.educative }}</p> -->
                    <span id="comment">
                        {{ routine.to_markdown | safe }}
                    </span>
                </div>
                {% endif %}
            </div>

            {% if combination.informations %}
            <div class="col-md-12">
                <hr class="m-t">
                <h4>Informations</h4>
                <!-- <p>{{ skill.educative }}</p> -->
                <span id="comment">
                    {{ combination.to_markdown | safe }}
                </span>
            </div>
            {% endif %}

            <div class="card-footer row pt-0">
                <div class="col-6">
                    <a href="{% url 'combination_listing' %}">
                        <button type="submit" value="add" class="btn btn-icon btn-warning ">
                            <i class="tim-icons icon-double-left"></i>
                        </button>
                    </a>
                </div>
                <div class="col-6 text-right">
                    {% if request.user|has_group:"trainer" %}
                        <a href="{% url 'compose_combination' combination.id %}">
                            <button type="submit" value="add" class="btn btn-icon btn-warning ">
                                <i class="tim-icons icon-molecule-40"></i>
                            </button>
                        </a>
                        <a href="{% url 'combination_update' combination.id %}">
                            <button type="submit" value="add" class="btn btn-icon btn-warning ">
                                <i class="tim-icons icon-pencil"></i>
                            </button>
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}