{% 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 tableheader %}

{% if MarkTable.values|length %}
    <div style="margin-top: 5px;">
        <table class="ui celled compact pink selectable table alternate-color">
            <thead>{% tableheader MarkTable.columns MarkTable.titles %}</thead>
            <tbody>
                {% for values_block in MarkTable.values %}
                    <tr>
                        <td colspan="{{ MarkTable.columns|length }}" style="color: {{ values_block.color }}">{{ values_block.title }}</td>
                    </tr>
                    {% for row_data in values_block.values %}
                        <tr>
                            {% for v in row_data %}
                                <td>
                                    {% if v.column == 'likes' %}
                                        <div class="ui mini buttons">
                                            <button class="ui green basic icon mini button like-mark-btn {% if v.value.likes_num %} like-popup{% endif %}" data-url="{{ v.value.like_url }}" data-method="POST"{% if v.value.likes_num %} data-popupid="#like_popup_{{ v.value.id }}"{% endif %}>
                                                <i class="ui thumbs up icon"></i>{{ v.value.likes_num }}
                                            </button>
                                            <button class="ui red icon basic right attached mini button like-mark-btn {% if v.value.dislikes_num %} dislike-popup{% endif %}" data-url="{{ v.value.like_url }}" data-method="DELETE"{% if v.value.dislikes_num %} data-popupid="#like_popup_{{ v.value.id }}"{% endif %}>
                                                <i class="ui thumbs down icon"></i>{{ v.value.dislikes_num }}
                                            </button>
                                        </div>
                                    {% elif v.column == 'buttons' %}
                                        <div class="ui mini buttons">
                                            {% if v.value.confirm %}
                                                <button class="ui green icon button note-popup confirm-mark-btn" data-position="top right" data-content="{% trans 'Confirm' %}" data-url="{{ v.value.confirm }}" data-method="POST"><i class="legal icon"></i></button>
                                            {% endif %}
                                            {% if v.value.unconfirm %}
                                                <button class="ui red icon button note-popup confirm-mark-btn" data-position="top right" data-content="{% trans 'Reject' %}" data-url="{{ v.value.unconfirm }}" data-method="DELETE"><i class="trash icon"></i></button>
                                            {% endif %}
                                            <button class="ui blue icon button note-popup mark-inline-form" data-position="top right" data-content="{% trans 'Edit' %}" data-url="{{ v.value.edit }}"><i class="edit icon"></i></button>
                                            <button class="ui red icon button note-popup mark-inline-delete" data-position="top right" data-content="{% trans 'Remove' %}" data-url="{{ v.value.delete }}"><i class="remove icon"></i></button>
                                        </div>
                                    {% elif v.column == 'description' %}
                                        {{ v.value|safe }}
                                    {% 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 %}
                {% endfor %}


            </tbody>
        </table>
        {% for likes_datum in MarkTable.likes_popups %}
            <div id="like_popup_{{ likes_datum.id }}" class="ui special mini popup">
                <div class="content">
                    {% for like_author in likes_datum.authors %}
                        <a href="{{ like_author.href }}">{{ like_author.value }}</a><br>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </div>
    <div id="remove_mark_inline_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">{% trans 'Delete' %}</button>
            </div>
        </div>
    </div>

    <script type="application/javascript">
        jQuery(function () {
            // Remove mark actions
            let remove_mark_modal = $('#remove_mark_inline_modal');
            remove_mark_modal.modal({transition: 'fly up', autofocus: false, closable: false});
            remove_mark_modal.find('.modal-cancel').click(function () {
                remove_mark_modal.modal('hide')
            });
            remove_mark_modal.find('.modal-confirm').click(function () {
                remove_mark_modal.modal('hide');
                $.ajax({
                    url: $(this).data('url'),
                    method: 'DELETE',
                    success: function () {
                        window.location.replace('')
                    }
                });
            });
            $('.mark-inline-delete').click(function () {
                remove_mark_modal.find('.modal-confirm').data('url', $(this).data('url'));
                remove_mark_modal.modal('show');
            });
        })
    </script>
{% else %}
    <h5>{% trans 'The list of associated marks is empty. Maybe it is because of the selected view.' %}</h5>
{% endif %}