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

{% block head %}
    {{ block.super }}
    <script type="text/javascript" src="{{ STATIC_URL }}common/js/ajax-modal.js"></script>
{% 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">
        {% 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">
            <thead>
                <tr>
                    <th>{% trans 'Name' %}</th>
                    <th>{% trans 'Business unit' %}</th>
                    <th>{% trans 'Last modification' %}</th>
                    <th>{% trans 'Status' %}</th>
                    <th>{% trans 'Actions' %}</th>
                    {% if user_can_have_survey %}
                        <th>{% trans 'Survey' %}</th>
                    {% endif %}
                </tr>
            </thead>
            <tbody>
                {% for training in training_list %}
                    <tr class="training_item_{{ training.id }}">
                        <td>
                            <a href="{{ training.get_edit_url }}">
                                {{ training.name }}
                            </a>
                        </td>
                        <td>
                            {{ training.business_unit.name }}
                        </td>
                        <td>{{ training.created_at }}</td>
                        <td>
                            {% include 'trainings/training_state.html' %}
                            <button
                                type="button"
                                class="btn btn-xs btn-default"
                                data-toggle="popover">
                                <i class="fa fa-question-circle"></i>
                            </button>
                        </td>
                        <td>
                            {% include 'trainings/training_actions.html' %}
                        </td>
                        {% if user_can_have_survey %}
                            <td>
                                <a class="btn btn-default" href="{{ training.get_survey_url }}">
                                    <i class="fa fa-list-ul"></i>
                                </a>
                            </td>
                        {% endif %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <div class="panel-footer">
            {% include 'extras/pagination.html' %}
        </div>
        <script type="text/javascript">
            $(function () {

                var content = ['<b>How to modify a published training</b></br>',
                               'A published training can\'t be modified,',
                               'to edit it change its status to "draft".',
                               'This action may take several minutes.',
                               'It will create a duplicate of your training in draft mode.',
                               'Trainers will still be able to use the published training.</br></br>',
                               '<b>Publish your draft</b></br>',
                               'Once you have done all your modifications in your draft,',
                               'you may publish your draft training, it will overwrite the existing',
                               '"published training".'].join(' ');

                var popoverTemplate = ['<div class="timePickerWrapper popover">',
                                       '<div class="arrow"></div>',
                                       '<div class="popover-content">',
                                       '</div>',
                                       '</div>'].join('');

                var options = {
                    selector: '[data-toggle="popover"]',
                    trigger: 'hover',
                    template: popoverTemplate,
                    content: content,
                    html: true
                };
                $('body').popover(options);
            })
        </script>
    </div>
{% endblock %}