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

{% block title %}Shadow differences - {{ parent() }}{% endblock %}

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

{% block content %}

    <h1>Shadow differences</h1>

    {%- if current_contests is empty %}
        <div class="alert alert-danger">No active contest</div>
    {%- else %}
        <div data-shadow-matrix>
            {% include 'jury/partials/shadow_matrix.html.twig' %}
        </div>

        <h2 class="mt-4">Details</h2>

        Show submissions:
        <div class="btn-group btn-group-sm mb-3" role="group">
            {%- for idx, type in viewTypes %}
                <input type="radio" autocomplete="off" class="btn-check"
                    name="viewtype" id="viewtype{{ idx }}" value="{{ type }}"
                    {% if idx == view %}checked{% endif %}>
                <label class="btn btn-secondary" for="viewtype{{ idx }}">{{ type }}</label>
            {%- endfor %}
        </div>
        <div class="btn-group btn-group-sm mb-3" role="group">
            {%- for idx, type in verificationViewTypes %}
                    <input type="radio" autocomplete="off" class="btn-check"
                        name="verificationviewtype" id="verificationviewtype{{idx}}" value="{{ type }}"
                        {% if idx == verificationView %}checked{% endif %}>
                <label class="btn btn-secondary" for="verificationviewttype{{idx}}">{{ type }}</label>
            {%- endfor %}
        </div>

        <form action="{{ path('jury_shadow_differences') }}" method="get">
            <input type="hidden" name="view" value="{{ viewTypes[view] }}"/>
            <input type="hidden" name="verificationview" value="{{ verificationViewTypes[verificationView] }}"/>
            <div class="row mb-3">
                <div class="col-md-4">
                    <label for="oldverdict">External verdict</label>
                    <select style="width: 100%" class="select2 form-control" name="external"
                            id="external">
                        <option value="all" {% if external == 'all' %}selected{% endif %}>all</option>
                        {%- for verdict, abbreviation in verdicts %}
                            <option value="{{ verdict }}"
                                    {% if external == verdict %}selected{% endif %}>
                                {{ verdict }}
                            </option>
                        {%- endfor %}

                    </select>
                </div>
                <div class="col-md-4">
                    <label for="newverdict">Local verdict</label>
                    <select style="width: 100%" class="select2 form-control" name="local" id="local">
                        <option value="all" {% if local == 'all' %}selected{% endif %}>all</option>
                        {%- for verdict, abbreviation in verdicts %}
                            <option value="{{ verdict }}" {% if local == verdict %}selected{% endif %}>
                                {{ verdict }}
                            </option>
                        {%- endfor %}

                    </select>
                </div>
                <div class="col-md-2">
                    <label>&nbsp;</label>
                    <input class="btn btn-primary form-control" type="submit" value="Filter"/>
                </div>
                <div class="col-md-2">
                    <label>&nbsp;</label>
                    <a href="{{ path('jury_shadow_differences', {view: viewTypes[view], verificationview: verificationViewTypes[verificationView]}) }}"
                       class="btn btn-secondary form-control">Clear</a>
                </div>
            </div>
        </form>

        <div data-ajax-refresh-target data-ajax-refresh-after="updateMatrix">
            {% include 'jury/partials/shadow_submissions.html.twig' %}
        </div>
    {% endif %}

{% endblock %}

{% block extrafooter %}
    {%- if current_contests is not empty %}
        <script>
            $(function () {
                $('input[name=viewtype]').on('change', function () {
                    window.location = '{{ path('jury_shadow_differences', {view: 'REPLACE_ME', verificationview: verificationViewTypes[verificationView], external: external, local: local}) | escape('js') }}'.replace('REPLACE_ME', $(this).val());
                });
                $('input[name=verificationviewtype]').on('change', function () {
                    window.location = '{{ path('jury_shadow_differences', {view: viewTypes[view], verificationview: 'REPLACE_ME', external: external, local: local}) | escape('js') }}'.replace('REPLACE_ME', $(this).val());
                });

                $('.select2').select2();

                window.updateMatrix = function () {
                    var $matrixData = $('[data-new-shadow-matrix]');
                    var $matrix = $('[data-shadow-matrix]');
                    $matrix.html($matrixData.children());
                };

                $('table.submissions-table').find('[data-bs-toggle="tooltip"]').tooltip();
            });
        </script>
    {% endif %}
{% endblock %}