{% extends 'bridge/base.html' %}
{% comment "License" %}
% Copyright (c) 2019 ISP RAS (http://www.ispras.ru)
% Ivannikov Institute for System Programming of the Russian Academy of Sciences
%
% Licensed under the Apache License, Version 2.0 (the "License");
% you may not use this file except in compliance with the License.
% You may obtain a copy of the License at
%
%    http://www.apache.org/licenses/LICENSE-2.0
%
% Unless required by applicable law or agreed to in writing, software
% distributed under the License is distributed on an "AS IS" BASIS,
% WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
% See the License for the specific language governing permissions and
% limitations under the License.
{% endcomment %}

{% load i18n %}
{% load tz %}
{% load static %}
{% load compress %}
{% load tableheader %}

{% block title %}{{ tabledata.title }}{% endblock %}

{% block head_block %}
    {% compress js file marks %}
        <script type="text/javascript" src="{% static 'bridge/semantic/tablesort.js' %}"></script>
        <script type="text/javascript" src="{% static 'marks/js/marks.js' %}"></script>
    {% endcompress %}
{% endblock %}

{% block body_block %}
    <div class="ui grid">
        <div class="eight wide column">
            <div class="ui mini buttons">
                <button id="download_selected_marks_btn" class="ui teal button disabled">{% trans 'Download' %}</button>
                {% if tabledata.is_manager %}
                    <button id="remove_marks_modal_show" class="ui red button disabled">{% trans 'Delete' %}</button>
                {% endif %}
            </div>
        </div>
        <div class="eight wide column right aligned">
            <button id="view_show_form_btn_{{ tabledata.view.type }}" class="ui mini violet button">{{ tabledata.view.viewtitle }}</button>
        </div>
    </div>
    <br>

    <div id="view_form_segment_{{ tabledata.view.type }}" class="ui form yellow segment" style="display:none;">
        {% include tabledata.view.template with view=tabledata.view selected_columns=tabledata.selected_columns available_columns=tabledata.available_columns statuses=tabledata.statuses verdicts=tabledata.verdicts authors=tabledata.authors sources=tabledata.sources %}
    </div>

    {% if tabledata.values|length %}
        <div>
            {% if tabledata.page.has_previous %}
                <i class="ui arrow left blue link icon page-link-icon" data-page-number="{{ tabledata.page.previous_page_number }}"></i>
            {% endif %}
            <span>{% blocktrans with n1=tabledata.page.number n2=tabledata.page.paginator.num_pages %}Page {{ n1 }} of {{ n2 }}{% endblocktrans %}</span>
            {% if tabledata.page.has_next %}
                <i class="ui arrow right blue link icon page-link-icon" data-page-number="{{ tabledata.page.next_page_number }}"></i>
            {% endif %}
        </div>
        <div style="overflow-x:auto;max-height: 71vh;overflow-y:auto;">
            <table class="ui compact celled selectable sortable structured striped table {% if tabledata.view.type == '7' %}orange{% elif tabledata.view.type == '8' %}green{% elif tabledata.view.type == '9' %}red{% endif %}">
                <thead>{% tableheader tabledata.columns tabledata.titles %}</thead>
                <tbody>
                    {% for row_data in tabledata.values %}
                        <tr>
                            {% for v in row_data %}
                                <td class="collapsing{% if v.checkbox %} one wide{% endif %}"{% if v.checkbox %} style="text-align: right"{% endif %}>
                                    {% if v.checkbox %}
                                        <div class="ui checkbox">
                                            <input type="checkbox" id="mark_checkbox__{{ v.checkbox }}" value="{{ v.checkbox }}" class="mark-checkbox">
                                            <label for="mark_checkbox__{{ v.checkbox }}"></label>
                                        </div>
                                    {% elif v.href %}
                                        <a href="{{ v.href }}">{{ v.value }}</a>
                                    {% else %}
                                        <span{% if v.color %} style="color:{{ v.color }}"{% endif %}>{{ v.value }}</span>
                                    {% endif %}
                                </td>
                            {% endfor %}
                        </tr>
                    {%  endfor %}
                </tbody>
            </table>
        </div>
        <br>
    {% else %}
        <h2 class="header" style="text-align:center;">{% trans 'List of marks of the given type is empty, please create them or change the view' %}</h2>
    {% endif %}

    <input id="marks_type" type="hidden" value="{{ tabledata.mark_type }}">

    <div id="remove_marks_modal" class="ui basic modal">
        <div class="ui icon header">
            <i class="warning sign icon"></i>
            {% trans 'Are you sure' %}?
        </div>
        <div class="content">
            <div class="ui center aligned grid">
                <p>{% trans 'All versions and all data of the selected marks will be deleted' %}!</p>
            </div>
        </div>
        <div class="actions">
            <div class="ui center aligned grid">
                <button class="ui blue basic inverted button modal-cancel">{% trans 'Cancel' %}</button>
                <button class="ui red basic inverted button modal-confirm">{% trans 'Delete' %}</button>
            </div>
        </div>
    </div>
    <span id="no_marks_selected" hidden>{% trans 'Please select at least one mark' %}</span>
    <span id="download_marks_url" hidden>{% url 'marks:download-marks-list' %}</span>
{% endblock %}