{% 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="displaynone">
                                {{ _T("Add title") }}
                            </span>
                        </td>
                        <td class="left" data-title="{{ _T("Short form") }}">
                            <div class="required field">
                                <label for="short_label" class="displaynone">{{ _T("Short form") }}</label>
                                <input size="20" type="text" name="short_label" required="required"/>
                            </div>
                        </td>
                        <td class="left" data-title="{{ _T("Long form") }}">
                            <div class="required field">
                                <label for="long_label" class="displaynone">{{ _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-title="{{ _T("Short form") }}">{{ title.short|escape }}</td>
                        <td class="left" data-title="{{ _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"></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"></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 %}
