{#
/**
 * Copyright © 2003-2024 The Galette Team
 *
 * This file is part of Galette (https://galette.eu).
 *
 * Galette is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Galette is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Galette. If not, see <http://www.gnu.org/licenses/>.
 */
#}
{% extends 'page.html.twig' %}

{% block content %}
    <form action="{{ url_for('titles') }}" method="post" enctype="multipart/form-data" class="ui form">
        <div class="ui basic fitted segment loader_selector">
            <table class="listing ui celled striped table">
                <thead>
                    <tr>
                        <th class="id_row">#</th>
                        <th>{{ _T("Short form") }}</th>
                        <th>{{ _T("Long form") }}</th>
                        <th>{{ _T("Actions") }}</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td data-scope="row">
                            <span class="visually-hidden">
                                {{ _T("Add title") }}
                            </span>
                        </td>
                        <td class="left" data-col-label="{{ _T("Short form") }}">
                            <div class="required field">
                                <label for="short_label" class="visually-hidden">{{ _T("Short form") }}</label>
                                <input size="20" type="text" name="short_label" required="required"/>
                            </div>
                        </td>
                        <td class="left" data-col-label="{{ _T("Long form") }}">
                            <div class="required field">
                                <label for="long_label" class="visually-hidden">{{ _T("Long form") }}</label>
                                <input size="20" type="text" name="long_label" required="required"/>
                            </div>
                        </td>
                        <td class="center actions_row">
                            <input type="hidden" name="new" value="1" />
                            <button type="submit" name="valid" class="ui labeled icon button">
                                <i class="plus green icon" aria-hidden="true"></i>
                                {{ _T("Add") }}
                            </button>
                        </td>
                    </tr>
                </tfoot>
                <tbody>
        {% for title in titles_list %}
                    <tr>
                        <td data-scope="row">
            {% if preferences.pref_show_id %}
                            {{ title.id }}
            {% else %}
                            {{ loop.index }}
            {% endif %}
                            <span class="displaynone">
                                <a href="{{ url_for('editTitle', {'id': title.id}) }}">
                                    {{ _T("%s title")|replace({'%s': title.short|escape}) }}
                                </a>
                            </span>
                        </td>
                        <td class="left" data-col-label="{{ _T("Short form") }}">{{ title.short|escape }}</td>
                        <td class="left" data-col-label="{{ _T("Long form") }}">{{ title.long|escape }}</td>
                        <td class="center actions_row">
                            <a
                                href="{{ url_for('editTitle', {'id': title.id}) }}"
                                class="action single-edit"
                            >
                                <i class="ui edit icon tooltip" aria-hidden="true"></i>
                                <span class="ui special popup">{{ _T("Edit '%s' title")|replace({'%s': title.short|escape}) }}</span>
                            </a>
            {% if title.id == 1 or title.id == 2 %}
                            <i class="ui icon">&nbsp;</i>
            {% else %}
                            <a
                                href="{{ url_for('removeTitle', {'id': title.id}) }}"
                                class="delete "
                            >
                                <i class="ui trash red icon tooltip" aria-hidden="true"></i>
                                <span class="ui special popup">{{ _T("Delete '%s' title")|replace({'%s': title.short|escape}) }}</span>
                            </a>
            {% endif %}
                        </td>
                    </tr>
        {% endfor %}
                </tbody>
            </table>
        </div>
        {% include 'components/forms/csrf.html.twig' %}
    </form>
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        $(function() {
            {% set modal_onapprove = "
                $('.modal-form form #redirect_uri').val(window.location.href);
                $('.modal-form form').submit();
            " %}
            {% include "elements/js/modal_action.js.twig" with {
                selector: ".single-edit",
                modal_title_twig: _T("Edit title")|e("js"),
                modal_class: "mini",
                modal_onapprove: modal_onapprove
            } %}

            {% include "elements/js/removal.js.twig" with {
                single_action: "true"
            } %}
        });
    </script>
{% endblock %}
