{% load has_group %}

<div class="row justify-content-center ml-1">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                {% if planned_skill or skill_whith_help or skill_without_help or skill_chained or skill_masterised or skill_by_rank or skill_by_level or skill_by_age or unknown_skill %}
                <ul class="nav nav-pills nav-pills-warning nav-pills-icons justify-content-center">
                    {% if planned_skill %}
                    <li class="nav-item">
                        <a class="nav-link {% if planned_skill %}active{% endif %}" data-toggle="tab" href="#planned_skill">
                            Objectives <!-- ({{ planned_skill|length }}) -->
                        </a>
                    </li>
                    {% endif %}

                    {% if confused_skill %}
                    <li class="nav-item">
                        <a class="nav-link {% if confused_skill and not planned_skill %}active{% endif %}" data-toggle="tab" href="#confused_skill">
                            Confused <!-- ({{ skill_whith_help|length }}) -->
                        </a>
                    </li>
                    {% endif %}

                    {% if skill_whith_help %}
                    <li class="nav-item">
                        <a class="nav-link {% if skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" data-toggle="tab" href="#skill_whith_help">
                            With help <!-- ({{ skill_whith_help|length }}) -->
                        </a>
                    </li>
                    {% endif %}

                    {% if skill_without_help %}
                    <li class="nav-item">
                        <a class="nav-link {% if skill_without_help and not skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" data-toggle="tab" href="#skill_without_help">
                            Without help <!-- ({{ skill_without_help|length }}) -->
                        </a>
                    </li>
                    {% endif %}

                    {% if skill_chained %}
                    <li class="nav-item">
                        <a class="nav-link {% if skill_chained and not skill_without_help and not skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" data-toggle="tab" href="#skill_chained">
                            Chained <!-- ({{ skill_without_help|length }}) -->
                        </a>
                    </li>
                    {% endif %}

                    {% if skill_masterised %}
                    <li class="nav-item">
                        <a class="nav-link {% if skill_masterised and not skill_chained and not skill_without_help and not skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" data-toggle="tab" href="#skill_masterised">
                            Masterised <!-- ({{ skill_without_help|length }}) -->
                        </a>
                    </li>
                    {% endif %}

                    {% if skill_by_rank %}
                    <li class="nav-item">
                        <a class="nav-link {% if skill_by_rank and not skill_masterised and not skill_chained and not skill_without_help and not skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" data-toggle="tab" href="#skill_by_rank">
                            By rank <!-- ({{ skill_by_rank|length }}) -->
                        </a>
                    </li>
                    {% endif %}

                    {% if skill_by_level %}
                    <li class="nav-item">
                        <a class="nav-link {% if skill_by_level and not skill_by_rank and not skill_masterised and not skill_chained and not skill_without_help and not skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" data-toggle="tab" href="#skill_by_level">
                            By level <!-- ({{ skill_by_level|length }}) -->
                        </a>
                    </li>
                    {% endif %}

                    {% if skill_by_age %}
                    <li class="nav-item">
                        <a class="nav-link {% if skill_by_age and not skill_by_level and not skill_by_rank and not skill_masterised and not skill_chained and not skill_without_help and not skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" data-toggle="tab" href="#skill_by_age">
                            By Age <!-- ({{ skill_by_age|length }}) -->
                        </a>
                    </li>
                    {% endif %}

                    {% if unknown_skill %}
                    <li class="nav-item">
                        <a class="nav-link {% if unknown_skill and not skill_by_age and not skill_by_level and not skill_by_rank and not skill_masterised and not skill_chained and not skill_without_help and not skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" data-toggle="tab" href="#unknown_skill">
                            All skill
                        </a>
                    </li>
                    {% endif %}
                </ul>

                <div class="tab-content tab-space tab-subcategories pt-0 pb-0">
                    {% if planned_skill %}
                    <div class="tab-pane {% if planned_skill %}active{% endif %}" id="planned_skill">
                        <table class="table table-condensed table-striped tablesorter" id="table_planned_skill">
                            <thead>
                                <tr>
                                    {% if user_is_trainer %}
                                        <th style="width: 15%"></th>
                                    {% endif %}
                                    <th style="width: 10%">Notation</th>
                                    <th class="header text-left" style="width: 35%">Label</th>
                                    <th class="header text-left" style="width: 10%">Phase</th>
                                    <th class="header text-left" style="width: 10%">Deadline</th>
                                    <th class="header" style="width: 7%">Diff.</th>
                                    <th class="header" style="width: 8%">Level</th>
                                    <th class="header" style="width: 13%">Rank</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for plan in planned_skill %}
                                <tr>
                                    {% if user_is_trainer %}
                                    <td>
                                        <a href="{% url 'plan_update' plan.id %}">
                                            <span class="tim-icons icon-pencil text-warning"></span>
                                        </a>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-with-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ plan.educative.id }}" data-learning_step="1">
                                            <i class="far fa-check"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-without-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ plan.educative.id }}" data-learning_step="2">
                                            <i class="far fa-check-double"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-chained" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ plan.educative.id }}" data-learning_step="3">
                                            <i class="far fa-link"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-masterised" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ plan.educative.id }}" data-learning_step="4">
                                            <i class="far fa-thumbs-up"></i>
                                        </button>
                                    </td>
                                    {% endif %}
                                    <td>{{ plan.educative.skill.notation }}</td>
                                    <td class="text-left">
                                        <a href="{% url 'skill_details' plan.educative.id %}">{{ plan.educative.long_label }}</a>
                                    </td>
                                    <td class="text-left">
                                        {{ plan.get_learning_step_display }}</a>
                                    </td>
                                    <td>
                                        {% if plan.is_past %}<span class="text-danger"><b>{% endif %}
                                        {{ plan.date | date:"d-m-Y" }}
                                        {% if plan.is_past %}</b></span>{% endif %}
                                    </td>
                                    <td>{{ plan.educative.difficulty }}</td>
                                    <td>{{ plan.educative.level }}</td>
                                    <td>{{ plan.educative.rank }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% endif %}

                    {% if confused_skill %}
                    <div class="tab-pane {% if confused_skill and not planned_skill %}active{% endif %}" id="confused_skill">
                        <table class="table table-striped table-condensed tablesorter" id="table_confused_skill">
                            <thead>
                                <tr>
                                    {% if user_is_trainer %}
                                        <th style="width: 10%"></th>
                                    {% endif %}
                                    <th style="width: 10%">Notation</th>
                                    <th class="header text-left" style="width: 35%">Label</th>
                                    <th class="header" style="width: 7%">Diff.</th>
                                    <th class="header" style="width: 7%">Level</th>
                                    <th class="header" style="width: 7%">Rank</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for skill in confused_skill %}
                                <tr>
                                    {% if user_is_trainer %}
                                    <td>
                                        <!-- WITH HELP -->
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-without-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="2">
                                            <i class="far fa-check-double"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-chained" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="3">
                                            <i class="far fa-link"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-masterised" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="4">
                                            <i class="far fa-thumbs-up"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-unknown" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="0">
                                            <i class="far fa-thumbs-down"></i>
                                        </button>
                                    </td>
                                    {% endif %}
                                    <td>{{ skill.notation }}</td>
                                    <td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
                                    <td>{{ skill.difficulty }}</td>
                                    <td>{{ skill.level }}</td>
                                    <td>{{ skill.rank }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% endif %}

                    {% if skill_whith_help %}
                    <div class="tab-pane {% if skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" id="skill_whith_help">
                        <table class="table table-striped table-condensed tablesorter" id="table_skill_with_help">
                            <thead>
                                <tr>
                                    {% if user_is_trainer %}
                                        <th style="width: 10%"></th>
                                    {% endif %}
                                    <th style="width: 10%">Notation</th>
                                    <th class="header text-left" style="width: 35%">Label</th>
                                    <th class="header" style="width: 7%">Diff.</th>
                                    <th class="header" style="width: 7%">Level</th>
                                    <th class="header" style="width: 7%">Rank</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for skill in skill_whith_help %}
                                <tr>
                                    {% if user_is_trainer %}
                                    <td>
                                        <!-- WITH HELP -->
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-without-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="2">
                                            <i class="far fa-check-double"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-chained" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="3">
                                            <i class="far fa-link"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-masterised" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="4">
                                            <i class="far fa-thumbs-up"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-unknown" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="0">
                                            <i class="far fa-thumbs-down"></i>
                                        </button>
                                    </td>
                                    {% endif %}
                                    <td>{{ skill.notation }}</td>
                                    <td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
                                    <td>{{ skill.difficulty }}</td>
                                    <td>{{ skill.level }}</td>
                                    <td>{{ skill.rank }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% endif %}

                    {% if skill_without_help %}
                    <div class="tab-pane {% if skill_without_help and not skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" id="skill_without_help">
                        <table class="table table-striped table-condensed tablesorter" id="table_skill_without_help">
                            <thead>
                                <tr>
                                    {% if user_is_trainer %}
                                        <th style="width: 12%"></th>
                                    {% endif %}
                                    <th style="width: 10%">Notation</th>
                                    <th class="header text-left" style="width: 55%">Label</th>
                                    <th class="header" style="width: 7%">Diff.</th>
                                    <th class="header" style="width: 7%">Level</th>
                                    <th class="header" style="width: 7%">Rank</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for skill in skill_without_help %}
                                <tr>
                                    {% if user_is_trainer %}
                                    <td>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-with-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ plan.educative.id }}" data-learning_step="1">
                                            <i class="far fa-check"></i>
                                        </button>
                                        <!-- WITHOUT HELP -->
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-chained" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="3">
                                            <i class="far fa-link"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-masterised" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="4">
                                            <i class="far fa-thumbs-up"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-unknown" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="0">
                                            <i class="far fa-thumbs-down"></i>
                                        </button>
                                    </td>
                                    {% endif %}
                                    <td>{{ skill.notation }}</td>
                                    <td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
                                    <td>{{ skill.difficulty }}</td>
                                    <td>{{ skill.level }}</td>
                                    <td>{{ skill.rank }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% endif %}

                    {% if skill_chained %}
                    <div class="tab-pane {% if skill_chained and not skill_without_help and not skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" id="skill_chained">
                        <table class="table table-striped table-condensed tablesorter" id="table_skill_chained">
                            <thead>
                                <tr>
                                    {% if user_is_trainer %}
                                        <th style="width: 12%"></th>
                                    {% endif %}
                                    <th style="width: 10%">Notation</th>
                                    <th class="header text-left" style="width: 35%">Label</th>
                                    <th class="header" style="width: 7%">Diff.</th>
                                    <th class="header" style="width: 7%">Level</th>
                                    <th class="header" style="width: 7%">Rank</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for skill in skill_chained %}
                                <tr>
                                    {% if user_is_trainer %}
                                    <td>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-with-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ plan.educative.id }}" data-learning_step="1">
                                            <i class="far fa-check"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-without-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="2">
                                            <i class="far fa-check-double"></i>
                                        </button>
                                        <!-- chained -->
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-masterised" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="4">
                                            <i class="far fa-thumbs-up"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-unknown" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="0">
                                            <i class="far fa-thumbs-down"></i>
                                        </button>
                                    </td>
                                    {% endif %}
                                    <td>{{ skill.notation }}</td>
                                    <td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
                                    <td>{{ skill.difficulty }}</td>
                                    <td>{{ skill.level }}</td>
                                    <td>{{ skill.rank }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% endif %}

                    {% if skill_masterised %}
                    <div class="tab-pane {% if skill_masterised and not skill_chained and not skill_without_help and not skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" id="skill_masterised">
                        <table class="table table-striped table-condensed tablesorter" id="table_skill_masterised">
                            <thead>
                                <tr>
                                    {% if user_is_trainer %}
                                        <th style="width: 12%"></th>
                                    {% endif %}
                                    <th style="width: 10%">Notation</th>
                                    <th class="header text-left" style="width: 35%">Label</th>
                                    <th class="header" style="width: 7%">Diff.</th>
                                    <th class="header" style="width: 7%">Level</th>
                                    <th class="header" style="width: 7%">Rank</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for skill in skill_masterised %}
                                <tr>
                                    {% if user_is_trainer %}
                                    <td>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-with-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ plan.educative.id }}" data-learning_step="1">
                                            <i class="far fa-check"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-without-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ plan.educative.id }}" data-learning_step="2">
                                            <i class="far fa-check-double"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-chained" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ plan.educative.id }}" data-learning_step="3">
                                            <i class="far fa-link"></i>
                                        </button>
                                        <!-- MASTERISED -->
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-unknown" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="0">
                                            <i class="far fa-thumbs-down"></i>
                                        </button>
                                    </td>
                                    {% endif %}
                                    <td>{{ skill.notation }}</td>
                                    <td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
                                    <td>{{ skill.difficulty }}</td>
                                    <td>{{ skill.level }}</td>
                                    <td>{{ skill.rank }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% endif %}

                    {% if skill_by_rank %}
                    <div class="tab-pane {% if skill_by_rank and not skill_masterised and not skill_chained and not skill_without_help and not skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" id="skill_by_rank">
                        <table class="table table-striped table-condensed tablesorter" id="table_by_rank">
                            <thead>
                                <tr>
                                    {% if user_is_trainer %}
                                        <th style="width: 13%">Actions</th>
                                    {% endif %}
                                    <th style="width: 10%">Notation</th>
                                    <th class="header text-left" style="width: 50%">Label</th>
                                    <th class="header" style="width: 7%">Diff.</th>
                                    <th class="header" style="width: 7%">Level</th>
                                    <th class="header" style="width: 7%">Rank</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for skill in skill_by_rank %}
                                <tr>
                                    {% if user_is_trainer %}
                                    <td>
                                        <a href="{% url 'add_skill_for_gymnast' gymnast.id skill.id %}">
                                            <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon planify_skill">
                                                <i class="fal fa-share-all"></i>
                                            </button>
                                        </a>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-with-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="1">
                                            <i class="far fa-check"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-without-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="2">
                                            <i class="far fa-check-double"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-chained" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="3">
                                            <i class="far fa-link"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-masterised" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="4">
                                            <i class="far fa-thumbs-up"></i>
                                        </button>
                                    </td>
                                    {% endif %}
                                    <td>{{ skill.notation }}</td>
                                    <td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
                                    <td>{{ skill.difficulty }}</td>
                                    <td>{{ skill.level }}</td>
                                    <td>{{ skill.rank }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% endif %}

                    {% if skill_by_level %}
                    <div class="tab-pane {% if skill_by_level and not skill_by_rank and not skill_masterised and not skill_chained and not skill_without_help and not skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" id="skill_by_level">
                        <table class="table table-striped table-condensed tablesorter" id="table_by_level">
                            <thead>
                                <tr>
                                    {% if user_is_trainer %}
                                        <th style="width: 15%">Actions</th>
                                    {% endif %}
                                    <th style="width: 10%">Notation</th>
                                    <th class="header text-left" style="width: 50%">Label</th>
                                    <th class="header" style="width: 7%">Diff.</th>
                                    <th class="header" style="width: 7%">Level</th>
                                    <th class="header" style="width: 7%">Rank</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for skill in skill_by_level %}
                                <tr>
                                    {% if user_is_trainer %}
                                    <td>
                                        <a href="{% url 'add_skill_for_gymnast' gymnast.id skill.id %}">
                                            <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon planify_skill">
                                                <i class="fal fa-share-all"></i>
                                            </button>
                                        </a>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-with-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="1">
                                            <i class="far fa-check"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-without-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="2">
                                            <i class="far fa-check-double"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-chained" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="3">
                                            <i class="far fa-link"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-masterised" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="4">
                                            <i class="far fa-thumbs-up"></i>
                                        </button>
                                    </td>
                                    {% endif %}
                                    <td>{{ skill.notation }}</td>
                                    <td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
                                    <td>{{ skill.difficulty }}</td>
                                    <td>{{ skill.level }}</td>
                                    <td>{{ skill.rank }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% endif %}

                    {% if skill_by_age %}
                    <div class="tab-pane {% if skill_by_age and not skill_by_level and not skill_by_rank and not skill_masterised and not skill_chained and not skill_without_help and not skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" id="skill_by_age">
                        <table class="table table-striped table-condensed tablesorter" id="table_by_age">
                            <thead>
                                <tr>
                                    {% if user_is_trainer %}
                                        <th style="width: 15%">Actions</th>
                                    {% endif %}
                                    <th style="width: 10%">Notation</th>
                                    <th class="header text-left" style="width: 50%">Label</th>
                                    <th class="header" style="width: 7%">Diff.</th>
                                    <th class="header" style="width: 7%">Level</th>
                                    <th class="header" style="width: 7%">Rank</th>

                                </tr>
                            </thead>
                            <tbody>
                                {% for skill in skill_by_age %}
                                <tr>
                                    {% if user_is_trainer %}
                                    <td>
                                        <a href="{% url 'add_skill_for_gymnast' gymnast.id skill.id %}">
                                            <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon planify_skill">
                                                <i class="fal fa-share-all"></i>
                                            </button>
                                        </a>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-with-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="1">
                                            <i class="far fa-check"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-without-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="2">
                                            <i class="far fa-check-double"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-chained" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="3">
                                            <i class="far fa-link"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-masterised" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="4">
                                            <i class="far fa-thumbs-up"></i>
                                        </button>
                                    </td>
                                    {% endif %}
                                    <td>{{ skill.notation }}</td>
                                    <td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
                                    <td>{{ skill.difficulty }}</td>
                                    <td>{{ skill.level }}</td>
                                    <td>{{ skill.rank }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% endif %}

                    {% if unknown_skill %}
                    <div class="tab-pane {% if unknown_skill and not skill_by_age and not skill_by_level and not skill_by_rank and not skill_masterised and not skill_chained and not skill_without_help and not skill_whith_help and not confused_skill and not planned_skill %}active{% endif %}" id="unknown_skill">
                        <table class="table table-striped table-condensed tablesorter" id="table_unknown_skill">
                            <thead>
                                <tr>
                                    {% if user_is_trainer %}
                                        <th style="width: 15%">Actions</th>
                                    {% endif %}
                                    <th style="width: 10%">Notation</th>
                                    <th class="header text-left" style="width: 50%">Label</th>
                                    <th class="header" style="width: 7%">Diff.</th>
                                    <th class="header" style="width: 7%">Level</th>
                                    <th class="header" style="width: 7%">Rank</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for skill in unknown_skill %}
                                <tr>
                                    {% if user_is_trainer %}
                                    <td>
                                        <a href="{% url 'add_skill_for_gymnast' gymnast.id skill.id %}">
                                            <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon planify_skill">
                                                <i class="fal fa-share-all"></i>
                                            </button>
                                        </a>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-with-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="1">
                                            <i class="far fa-check"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-without-help" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="2">
                                            <i class="far fa-check-double"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-chained" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="3">
                                            <i class="far fa-link"></i>
                                        </button>
                                        <button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill text-chained" data-gymnast_id="{{ gymnast.id }}" data-skill_id="{{ skill.id }}" data-learning_step="4">
                                            <i class="far fa-thumbs-up"></i>
                                        </button>
                                    </td>
                                    {% endif %}
                                    <td>{{ skill.notation }}</td>
                                    <td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
                                    <td>{{ skill.difficulty }}</td>
                                    <td>{{ skill.level }}</td>
                                    <td>{{ skill.rank }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% endif %}

                    {% else %}
                        <div class="tab-pane active" id="no_skill">
                            <p>No skill to display.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        $('.checkUnknownSkill').click(function(){
            $.ajax({
                // TODO: chande hardcoded url
                url: '/follow-up/learnedskill/new/',
                data: {
                    gymnast_id: $(this).data('gymnast_id'),
                    skill_id: $(this).data('skill_id'),
                    learning_step: $(this).data('learning_step'),
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                type: 'POST',
                context: $(this),
                success: function (response) {
                    // avec reload (data à jour)
                    // location.reload();

                    // sans relaod des datas (data pas totalement à jour)
                    $(this).closest('tr').fadeTo("slow", 0.0, function(){
                        $(this).remove();
                    });
                    // $(this).closest('tr').slideUp("slow");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                },
                failure: function (jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });
        });

        $('#table_by_rank, #table_by_level, #table_by_age, #table_unknown_skill, #table_skill_with_help, #table_skill_without_help, #table_skill_chained').tablesorter({
            {% if user_is_trainer %}
            headers: {
              0: { sorter: false },      // disable first column
            },
            {% endif %}
            // dateFormat: "uk",
            sortList: [[5,0], [4,0], [2,0]]
        });

        $('#table_planned_skill').tablesorter({
            {% if user_is_trainer %}
            headers: {
              0: { sorter: false },      // disable first column
            },
            {% endif %}
            // dateFormat: "uk",
            sortList: [[3, 0], [6,0], [5,0], [3, 0]]
        });
    });
</script>