{% 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>
    <script type="text/javascript" src="{{ STATIC_URL }}common/js/sticky-table-header.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 page-header %}{% 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 %}
    
{% endblock %}

{% block column_main %}
    <div class="clearfix">
        <h1 class="pull-left no-margin">{% trans "Training list" %}</h1>
        <div class="pull-right">
            <a href="{% url 'trainings:training-create' %}" class="btn btn-primary">
                <i class="icon-plus icon-white"></i>{% trans "Add a training" %}
            </a>
        </div>
    </div>
    <div class="row training-list-filters">
        <div class="col-md-6">
            <form action="" method="get" id="trainings-filters-form">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" id="filters-dropdown-button" class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-caret-down"></i>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu dropdown-training-filters">
                            <div>
                                {% 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>
                            </div>
                        </div>
                    </div>
                    <input type="text" class="form-control" id="training-filter-input" placeholder="{% trans 'Search...' %}">
                    <div class="input-group-btn">
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
                <script type="text/javascript">
                    $(document).ready(function(){
                        // Manually handle the filters dropdown
                        var $filtersForm = $('#trainings-filters-form'),
                            $filtersDropdownWrapper = $('#trainings-filters-form .input-group-btn'),
                            $filtersDropdownContent = $('.dropdown-training-filters')
                            $filtersInput = $('#training-filter-input'),
                            $filtersButton = $('#filters-dropdown-button');
                        
                        var toggleFilters = function() {
                            $filtersDropdownWrapper.toggleClass('open');
                            $filtersForm.find('#id_name').trigger('focus');
                            $filtersForm.find('#id_version_state').djangoSelect2();
                        }
                        
                        // Open the filters when clicking the main input
                        $filtersInput.on('focus', function() {
                           toggleFilters();
                        });
                        // Open the filters when clicking the dropdown button
                        $filtersButton.on('click', function(event) {
                            toggleFilters();
                        });
                        // Handle the click outside of the dropdown
                        $('body').on('click', function(e) {
                            if (!$filtersDropdownContent.is(e.target)
                                && !$filtersInput.is(e.target)           
                                && $filtersDropdownContent.has(e.target).length === 0 
                                && $('.open').has(e.target).length === 0
                            ) {
                                $filtersDropdownWrapper.removeClass('open');
                            }
                        }); 
                    });
                </script>
            </form>
        </div>
        <div class="col-md-6">
            {% if is_paginated %}
                <div class="pull-right">
                    {% pagination form_id="trainings-filters-form" %}
                </div>
            {% endif %}
        </div>
    </div>
    <div class="panel panel-default trainings-table-wrapper">
        <table class="table table-hover trainings-table">

            {# 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></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 'Name' %}</th>
                    <th>{% trans 'Business unit' %}</th>
                    <th>{% trans 'Last modification' %}</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>
        <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 %}
                $('.trainings-table').stickyTableHeaders({scrollableArea: $('.trainings-table-wrapper'), "fixedOffset": 1});
                
                $(".dropdown").on("show.bs.dropdown", function() {
                    var $btnDropDown = $(this).find(".dropdown-toggle"),
                        $listHolder = $(this).find(".dropdown-menu");
                    //reset position property for DD container
                    $(this).css("position", "static");
                    $listHolder.css({
                        "top": ($btnDropDown.position().top + $btnDropDown.outerHeight(true)) + "px", 
                        "left": $btnDropDown.position().left + "px"
                    });
                    $listHolder.data("open", true);
                });
                //add BT DD hide event
                $(".dropdown").on("hidden.bs.dropdown", function() {
                    var $listHolder = $(this).find(".dropdown-menu");
                    $listHolder.data("open", false);
                });
            })
        </script>
    </div>
{% endblock %}
