{% extends "layout/2-columns-left.html" %}
{% load i18n staticfiles template_tools %}

{% block head %}
    {{ block.super }}
    <script type="text/javascript" src="{{ STATIC_URL }}common/js/ajax-modal.js"></script>
    {% if waiting_tasks_grouped %}
        <script type="text/javascript" src="{{ STATIC_URL }}trainings/js/waiting-trainings-poller.js"></script>
    {% endif %}
    <style>
        .popover {
            width: 200px;
        }
    </style>
{% endblock %}

{% block subtitle %}
    {% trans "Training list" %}
{% endblock %}

{% block actions %}
    <a href="{% url 'trainings:training-create' %}" class="btn btn-primary">
        <i class="icon-plus icon-white"></i>{% trans "Add a training" %}
    </a>
{% endblock %}

{% block column_left %}
    <form action="" method="get" id="trainings-filters-form">
        {% include 'extras/form.html' with form=filter.form %}
        <div class="clearfix">
            <a href="{% url 'trainings:training-list' %}" class="pull-left btn btn-warning">
                {% trans 'Reset' %}
            </a>
            <input type="submit" class="btn btn-primary pull-right" value="{% trans 'Apply' %}" />
        </div>
    </form>
{% endblock %}

{% block column_main %}
    <div class="panel panel-default">
        <table class="table table-hover">

            {# Start by displaying waiting tasks about trainings #}
            {% if waiting_tasks_grouped %}
                <thead class="waiting-trainings">
                    <tr>
                        <th colspan="{% if user_can_have_survey %}4{% else %}3{% endif %}">
                            {% trans "Operations in progress" %}
                        </th>
                        <th>{% trans "New versions" %}</th>
                        <th>{% trans "Duplicates" %}</th>
                    </tr>
                </thead>
                <tbody class="waiting-trainings">
                    {% for training_info in waiting_tasks_grouped.values %}
                        <tr class="waiting-training" data-training-id="{{ training_info.training.id }}">
                            <td colspan="{% if user_can_have_survey %}4{% else %}3{% endif %}">
                                {{ training_info.training.name }}
                            </td>
                            <td>
                                {% if training_info.tasks.CREATE_DRAFT %}
                                    0 / {{ training_info.tasks.CREATE_DRAFT|length }}
                                    <span class="spinner"></span>
                                {% endif %}
                            </td>
                            <td>
                                {% if training_info.tasks.DUPLICATE_TO_MEMBER %}
                                    0 / {{ training_info.tasks.DUPLICATE_TO_MEMBER|length }}
                                    <span class="spinner"></span>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            {% endif %}

            {# Then display real trainings #}
            <thead>
                <tr>
                    <th>{% trans 'Name' %}</th>
                    <th>{% trans 'Business unit' %}</th>
                    <th>{% trans 'Last modification' %}</th>
                    <th>
                        {% trans 'Status' %}
                        <button
                            type="button"
                            class="btn btn-xs btn-default"
                            data-toggle="popover">
                            <i class="fa fa-question-circle"></i>
                        </button>
                    </th>
                    <th>{% trans 'Actions' %}</th>
                    {% if user_can_have_survey %}
                        <th>{% trans 'Survey' %}</th>
                    {% endif %}
                </tr>
            </thead>
            {% if recent_trainings %}
                <tbody class="recent-trainings">
                    {% include "cms/trainings/training_list_include_trs.html" with training_list=recent_trainings %}
                </tbody>
            {% endif %}
            <tbody class="normal-trainings">
                {% include "cms/trainings/training_list_include_trs.html" with excluded_ids=recent_trainings_ids %}
            </tbody>
        </table>
        {% if is_paginated %}
            <div class="panel-footer">
                {% pagination form_id="trainings-filters-form" %}
            </div>
        {% endif %}
        <script type="text/javascript" src="{% static 'trainings/popover.js' %}"></script>
        <script type="text/javascript">
            $(function () {

                {% if waiting_tasks_grouped %}
                WaitingTrainingsPoller.init({
                    url: "{{ view.model.get_waiting_and_recent_json_list_url }}?state_in=UNREADY_STATES&include_recent=1",
                    data: {{ waiting_tasks_grouped_json|safe }},
                    colspan: {% if user_can_have_survey %}4{% else %}3{% endif %}
                });
                {% endif %}
            })
        </script>
    </div>
{% endblock %}