{% extends "trainings/library_base.html" %}
{% load i18n staticfiles template_tools widget_tweaks %}

{% block head %}
    {{ block.super }}
    {% 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 column_main %}
    <div class="clearfix">
        <h1 class="page-title pull-left no-margin">{% trans "My scenarios" %}</h1>
        <div class="pull-right">
            <a href="{% url 'trainings:training-create' %}" class="btn my-btn my-btn-red dialog-box">
                {% trans "New scenario" %}
            </a>
        </div>
    </div>
    <div class="row training-list-filters">
        <div class="col-md-8">
            {% include 'trainings/_list_filters.html' with form=filter.form %}
        </div>
        <div class="col-md-4">
            {% if is_paginated %}
                <div class="pull-right">
                    {% pagination form_id="filters" %}
                </div>
            {% endif %}
        </div>
    </div>
    <div class="panel panel-default scrolling-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 class="col-md-2">
                        {% trans 'Status' %}
                        <button
                            type="button"
                            class="btn btn-xs btn-default"
                            data-toggle="popover">
                            <i class="fa fa-question-circle"></i>
                        </button>
                    </th>
                    <th class="col-md-4">{% trans 'Name' %}</th>
                    <th class="col-md-3">{% trans 'Business unit' %}</th>
                    <th class="">{% trans 'Modified on' %}</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: $('.scrolling-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);
                });

                var $trainingsTable = $('.trainings-table');

                $trainingsTable.find('tbody tr').css({cursor: 'pointer'});
                $trainingsTable.on('click', 'tbody tr', function(e){
                    if ($('.training-actions').has(e.target).length == 0) {
                        window.location = $(this).data('href');
                    }
                });
            })
        </script>
    </div>
{% endblock %}