{% extends 'page.html.twig' %}

{% block content %}
        <form action="{{ url_for('paymentTypes') }}" 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("Name") }}</th>
                            <th>{{ _T("Actions") }}</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <td data-scope="row">
                                <span class="displaynone">
                                    {{ _T("Add payment type") }}
                                </span>
                            </td>
                            <td class="left" data-title="{{ _T("Label") }}">
                                <div class="required field">
                                    <label for="name" class="displaynone">{{ _T("Name") }}</label>
                                    <input size="20" type="text" name="name" 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-disabled="true"></i>
                                    {{ _T("Add") }}
                                </button>
                            </td>
                        </tr>
                    </tfoot>
                    <tbody>
            {% for ptype in list %}
                        <tr>
                            <td data-scope="row">
                {% if preferences.pref_show_id %}
                                {{ ptype.__get('id') }}
                {% else %}
                                {{ loop.index }}
                {% endif %}
                                <span class="displaynone">
                                    <a href="{{ url_for('editPaymentType', {'id': ptype.__get('id')}) }}">
                                        {{ _T("%s payment type")|replace({'%s': ptype.getName()}) }}
                                    </a>
                                </span>
                            </td>
                            <td class="left" data-title="{{ _T("Name") }}">{{ ptype.getName() }}</td>
                            <td class="center actions_row">
                                <a
                                    href="{{ url_for('editPaymentType', {'id': ptype.__get('id')}) }}"
                                    class="action single-edit"
                                >
                                    <i class="ui edit icon tooltip"></i>
                                    <span class="ui special popup">{{ _T("Edit '%s' payment type")|replace({'%s': ptype.getName()}) }}</span>
                                </a>
                                <a
                                    href="{{ url_for('dynamicTranslations', {'text_orig': ptype.getName(false)|escape}) }}"
                                    class="action single-translate"
                                >
                                    <i class="ui language grey icon tooltip"></i>
                                    <span class="ui special popup">{{ _T("Translate '%s'")|replace({'%s': ptype.getName()}) }}</span>
                                </a>
                {% if ptype.isSystemType() %}
                                <i class="ui icon">&nbsp;</i>
                {% else %}
                                <a
                                    href="{{ url_for('removePaymentType', {'id': ptype.__get('id')}) }}"
                                    class="delete"
                                >
                                    <i class="ui trash red icon tooltip"></i>
                                    <span class="ui special popup">{{ _T("Delete '%s' payment type")|replace({'%s': ptype.getName()}) }}</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 payment type")|e("js"),
                    modal_class: "mini",
                    modal_onapprove: modal_onapprove
                } %}

                {% set extra_success = "
                    $('.modal-form form').on('submit', function(event) {
                        event.preventDefault();
                        var _form = $(this);
                        var _data = _form.serialize();
                        $.ajax({
                            url: _form.attr('action'),
                            type: 'POST',
                            datatype: 'json',
                            data: _data,
                            error: function() {
                                $.modal({
                                    title: '%error%',
                                    class: 'mini',
                                    actions: [{
                                        text: '%close%',
                                        icon: 'times',
                                        class: 'icon labeled cancel'
                                    }],
                                    className: {
                                        modal: 'ui redalert modal',
                                        title: 'center aligned header',
                                        content: 'center aligned content',
                                        actions: 'center aligned actions'
                                    }
                                }).modal('show');
                            }
                        });
                    });
                " %}
                {% include "elements/js/modal_action.js.twig" with {
                    selector: ".single-translate",
                    extra_success: extra_success|replace({'%error%': _T("An error occurred :(")|e("js"), '%close%': _T("Close")|e("js")}),
                    modal_title_twig: _T("Translate labels")|e("js"),
                    modal_content_class: "scrolling",
                    modal_onapprove: modal_onapprove
                } %}

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