{% extends "base.html" %}

{% block page_title %}{{ routine.shortLabel }}{% 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="card-title mb-0">{{ routine.shortLabel }}</h3>
                    <h5 class="card-category mb-0">{{ routine.longLabel }}</h4>
                </div>
                <div class="card-body">
                    <!-- <p>Description : </p> -->
                    {% if skill_link_list %}
                    <table class="table table-striped">
                        <!-- <thead>
                            <th></th>
                            <th class="text-left" colspan="2">Skill</th>
                            <th class="text-center">Diff.</th>
                        </thead> -->
                        {% 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.longLabel }}</a></td>
                                <td class="text-center">{{ link.skill.difficulty }}</td>
                            </tr>
                        {% endfor %}
                        <tr>
                            <td colspan="3" class="text-right">Total : </td>
                            <td class="text-center"><b>{{ routine.difficulty }}</b></td>
                        </tr>
                    </table>
                    {% else %}
                        <p>No description available for this routine.</p>
                    {% endif %}
                    <div class="row">
                        <div class="col-3 text-center">Niveau : {{ routine.level }}</div>
                        <div class="col-3 text-center">Rank : {{ routine.rank }}</div>
                        <div class="col-3 text-center">Age Boy : {{ routine.age_boy }}</div>
                        <div class="col-3 text-center">Age Girl : {{ routine.age_girl }}</div>
                    </div>
                    <br>
                </div>

                {% if routine.content %}
                <div class="col-md-12">
                    <hr class="m-t">
                    <h4>Commentaires</h4>
                    <!-- <p>{{ skill.educative }}</p> -->
                    <span id="comment">

                        {{ routine.to_markdown | safe }}
                    </span>
                </div>
                {% endif %}
                <div class="card-footer row pt-0">
                    <div class="col-6">
                        <a href="{% url 'routine_list' %}">
                            <button type="submit" value="add" class="btn btn-icon btn-warning ">
                                <i class="tim-icons icon-components"></i>
                            </button>
                        </a>
                    </div>
                    <div class="col-6 text-right">
                        <a href="{% url 'compose_routine' routine.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 'routine_update' routine.id %}">
                            <button type="submit" value="add" class="btn btn-icon btn-warning ">
                                <i class="tim-icons icon-pencil"></i>
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" >
    $(function(){

        $('.plusButton').click(function(){
            alert('Ajout !');
            $(this).closest('li').append('<li><button type="button" class="btn btn-success plusButton">+</button>&nbsp;<button type="button" class="btn btn-warning minusButton">-</button>&nbsp;<input type="text" class="form-control col-sm-5" placeholder="Skill search…" /></li>');
            // 
        });

        $('.minusButton').click(function(){
            alert('Suppression !');
            $(this).closest('li').remove();
            // appel à django pour supprimer l'élément et renuméroter les éléments restants.
            // rename();
        });
    });
</script>
{% endblock %}