{% extends "jury/base.html.twig" %}
{% import "jury/jury_macros.twig" as macros %}

{% block title %}Balloons {{ current_contest.shortname | default('') }} - {{ parent() }}{% endblock %}

{% block extrahead %}
    {{ parent() }}
    {{ macros.table_extrahead() }}
    {{ macros.select2_extrahead() }}
{% endblock %}

{% block content %}

    {% if current_contest is null %}
        <h1>Balloons</h1>
        <p class="nodata">No active contest</p>
    {% else %}

    <h1>Balloons - {{ current_contest.name }}</h1>

    {% if isfrozen %}
        <div class="alert alert-info"><i class="fas fa-snowflake"></i> Scoreboard of c{{ current_contest.cid }} ({{ current_contest.shortname }}) is now frozen.</div>
    {% endif %}

    <div class="mb-3">
        <div class="btn-group" role="group">
            <input type="checkbox" class="btn-check" id="filter-toggle" {% if hasFilters %}checked{% endif %} autocomplete="off">
            <label for="filter-toggle" class="btn btn-outline-secondary">
                <i class="fas fa-filter"></i> Filter
            </label>
        </div>
        <div class="card mt-3{% if not hasFilters %} d-none{% endif %}" id="filter-card">
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-6">
                        <label for="affiliation-filter">Filter on affiliation(s)</label>
                        <select id="affiliation-filter" class="select2 form-control" multiple data-filter-field="affiliation-id"
                                data-ajax-url="{{ path('jury_ajax_data', {datatype: 'affiliations', select2: true}) }}">
                            {%- for affiliation in filteredAffiliations %}
                                <option value="{{ affiliation.affilid }}" selected>
                                    {{ affiliation.name }} (a{{ affiliation.affilid }})
                                </option>
                            {%- endfor %}
                        </select>
                        <label for="location-filter">Filter on locations(s)</label>
                        <select id="location-filter" class="select2 form-control" multiple data-filter-field="location-str"
                                data-ajax-url="{{ path('jury_ajax_data', {datatype: 'locations', select2: true}) }}">
                            {%- for location in filteredLocations %}
                                <option value="{{ location.location }}" selected>
                                    {{ location.location }}
                                </option>
                            {%- endfor %}
                        </select>
                        <label for="category-filter">Filter on category(s)</label>
                        <select id="category-filter" class="select2" multiple data-filter-field="category-id" style="width:100%">
                            {%- for category in filteredCategories %}
                                <option value="{{ category.categoryid }}" selected>
                                    {{ category.name }}
                                </option>
                            {%- endfor %}
                            {%- for category in availableCategories %}
                                <option value="{{ category.categoryid }}">
                                    {{ category.name }}
                                </option>
                            {%- endfor %}
                        </select>
                    </div>
                </div>

                <button class="btn btn-secondary" id="clear-filters"><i class="fas fa-times-circle"></i> Reset all
                    filters
                </button>
            </div>
        </div>
    </div>
    <div data-ajax-refresh-target data-ajax-refresh-after="process_balloons_filter">
        {%- include 'jury/partials/balloon_list.html.twig' %}
    </div>
    {% endif %}

{% endblock %}

{% block extrafooter %}
    {% if current_contest is not null %}
        <script>
            $(function () {
                $('#filter-toggle').on('change', function () {
                    if ($(this).is(':checked')) {
                        $('#filter-card').removeClass('d-none');
                    } else {
                        $('#filter-card').addClass('d-none');
                    }
                });

                $('.select2').each(function () {
                    var $elem = $(this);
                    if(!$elem.data('ajax-url')) {
                        return;
                    }
                    $elem.select2({
                        minimumInputLength: 1,
                        ajax: {
                            url: $elem.data('ajax-url'),
                            dataType: 'json',
                            delay: 250
                        }
                    })
                });

                $('#clear-filters').on('click', function () {
                    $('select[data-filter-field]').each(function () {
                        var $filterField = $(this);
                        if ($filterField.data('filter-field') == "category-id") {
                            $filterField.val({{- defaultCategories|json_encode() -}}).trigger('change');
                        } else {
                            $filterField.val([]).trigger('change');
                        }
                    });
                });

                window.process_balloons_filter = function () {
                    var $trs = $('table.balloons-table > tbody tr');

                    var filters = [];

                    $('select[data-filter-field]').each(function () {
                        var $filterField = $(this);
                        if ($filterField.val().length) {
                            filters.push({
                                field: $filterField.data('filter-field'),
                                values: $filterField.val()
                            });
                        }
                    });

                    var balloons_filter = {};
                    for (var i = 0; i < filters.length; i++) {
                        balloons_filter[filters[i].field] = filters[i].values;
                    }

                    setCookie('domjudge_balloonsfilter', JSON.stringify(balloons_filter));

                    if (filters.length === 0) {
                        $trs.show();
                    } else {
                        $trs
                            .hide()
                            .filter(function () {
                                var $tr = $(this);

                                for (var i = 0; i < filters.length; i++) {
                                    var value = "" + $tr.data(filters[i].field);
                                    if (filters[i].values.indexOf(value) === -1) {
                                        return false;
                                    }
                                }

                                return true;
                            })
                            .show();
                    }
                };

                $('select[data-filter-field]').on('change', process_balloons_filter);
                window.process_balloons_filter();
            });
        </script>
    {% endif %}
{% endblock %}