{% 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 humanize %}
{% load static %}
{% load compress %}
{% load tableheader %}

{% block title %}{% trans 'Safes mark' %}{% endblock %}

{% block head_block %}
    {% compress css file mark %}
        <link href="{% static 'marks/css/mark.css' %}" rel="stylesheet">
        <link href="{% static 'marks/css/tagsmap.css' %}" rel="stylesheet">
    {% endcompress %}
    {% compress js file mark %}
        <script type="text/javascript" src="{% static 'marks/js/tags.js' %}"></script>
        <script type="text/javascript" src="{% static 'marks/js/mark.js' %}"></script>
    {% endcompress %}
{% endblock %}

{% block body_block %}
    <div class="ui grid">
        <div class="seven wide column">
            {# Mark menu #}
            <div class="ui violet inverted menu top attached">
                <a class="browse item">{% trans 'Mark' %}<i class="dropdown icon"></i></a>
                <div class="ui inverted popup bottom left transition hidden">
                    <a href="{% url 'marks:safe-download' mark.pk %}" class="item">{% trans 'Download' %}</a>
                    <a href="{% url 'marks:safe-download-preset' mark.pk %}" class="item">{% trans 'Download in preset format' %}</a>
                    <a href="{% url 'marks:safe-edit' mark.pk %}" class="item{% if not access.can_edit %} disabled{% endif %}">{% trans 'Edit' %}</a>
                    <a id="remove_mark_modal_show" class="item{% if not access.can_delete %} disabled{% endif %}">{% trans 'Delete' %}</a>
                </div>
            </div>
            <table class="ui selectable compact inverted violet table attached">
                <tbody>
                    <tr>
                        <th class="right aligned">{% trans 'Identifier' %}</th>
                        <td>{{ mark.identifier }}</td>
                    </tr>
                    <tr>
                        <th class="right aligned">{% trans 'Source' %}</th>
                        <td>{{ mark.get_source_display }}</td>
                    </tr>
                    {% if mark.author %}
                        <tr>
                            <th class="right aligned">{% trans 'Author' %}</th>
                            <td><a class="violet-link" href="{% url 'users:show-profile' mark.author.pk %}">{{ mark.author.get_full_name }}</a></td>
                        </tr>
                    {% endif %}
                    <tr>
                        <th class="right aligned">{% trans 'Last change' %}</th>
                        <td>
                            {% if user.data_format == 'hum' %}{{ mark_version.change_date|naturaltime }}{% else %}{{ mark_version.change_date }}{% endif %}
                            {% if mark_version.author %}
                                (<a class="violet-link" href="{% url 'users:show-profile' mark_version.author_id %}">{{ mark_version.author.get_full_name }}</a>)
                            {% endif %}
                            {% if mark_version.comment|length %}
                                <p><span class="italic">{% trans 'Comment' %}:</span> <small>"{{ mark_version.comment }}"</small></p>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th class="right aligned">{% trans 'Verdict' %}</th>
                        <td><span class="with-shadow"{% if verdict.color %} style="color: {{ verdict.color }};"{% endif %}>{{ verdict.text }}</span></td>
                    </tr>
                    {% if mark_version.description %}
                        <tr>
                            <th class="right aligned">{% trans 'Description' %}</th>
                            <td>{{ mark_version.description|safe }}</td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
            <br>
            <div class="ui horizontal segments" style="margin-top: 0">
                <div class="ui pink segment">
                    <h4 class="header ui pink">{% trans 'Tags' %}</h4>
                    <div id="tags_tree" class="tagsmap">
                        {% include 'marks/MarkTagsTree.html' with tags=tags view_only=True %}
                    </div>
                </div>
            </div>

            {# Attributes #}
            <div class="ui styled accordion fluid">
                <div class="title">
                    <i class="grid layout icon"></i>{% trans 'Attributes' %}
                </div>
                <div class="content">
                    <div style="overflow-x:auto;">
                        <table class="ui celled compact purple table">
                            <tbody>
                                {% for attr in mark_version.attrs.all %}
                                    <tr>
                                        <th class="collapsing">{{ attr.name }}</th>
                                        <td class="collapsing">
                                            {% if attr.is_compare %}
                                                <i class="ui green small checkmark icon"></i>
                                            {% else %}
                                                <i class="ui red small remove icon"></i>
                                            {% endif %}
                                            {{ attr.value }}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="nine wide column">
            {# Mark versions list #}
            {% if access.can_edit %}
                {% include 'marks/versions.html' with versions=versions %}
            {% endif %}

            <h4 class="header ui teal">{% trans 'Associated leaf reports' %}</h4>
            {# View for associated reports #}
            {% include reports.view.template with view=reports.view selected_columns=reports.selected_columns available_columns=reports.available_columns ass_types=reports.ass_types %}

            {# Associated reports table #}
            {% if reports.values|length %}
                <br>
                <div>
                    {% if reports.page.has_previous %}
                        <i class="ui arrow left blue link icon page-link-icon" data-page-number="{{ reports.page.previous_page_number }}"></i>
                    {% endif %}
                    <span>{% blocktrans with n1=reports.page.number n2=reports.paginator.num_pages %}Page {{ n1 }} of {{ n2 }}{% endblocktrans %}</span>
                    {% if reports.page.has_next %}
                        <i class="ui arrow right blue link icon page-link-icon" data-page-number="{{ reports.page.next_page_number }}"></i>
                    {% endif %}
                </div>
                <div style="overflow-x: auto;">
                    <table class="ui compact teal celled selectable table alternate-color">
                        <thead>{% tableheader reports.columns reports.titles %}</thead>
                        <tbody>
                            {% for row_data in reports.values %}
                                <tr>
                                    {% for v in row_data %}
                                        <td class="collapsing">
                                            {% if v.column == 'associated' %}
                                                {% if v.value %}
                                                    <i class="ui green check icon"></i>
                                                {% else %}
                                                    <i class="ui red minus icon"></i>
                                                {% endif %}
                                            {% 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>
            {% else %}
                <h5>{% trans 'The list of associated reports is empty. Maybe it is because of the selected view.' %}</h5>
            {% endif %}
        </div>
    </div>

    {% if access.can_delete %}
        <div id="remove_mark_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 'The action is irreversible' %}!</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"
                            data-url="{% url 'marks:api-safe-detail' mark.pk %}" data-redirect="{% url 'marks:safe-list' %}"
                    >{% trans 'Delete' %}</button>
                </div>
            </div>
        </div>
    {% endif %}
    <input id="mark_pk" type="hidden" value="{{ mark.pk }}">
    <input id="mark_type" type="hidden" value="safe">
{% endblock %}