{% extends 'layout/dialog_base.html' %}

{% macro _render_template_list(templates, current_template) %}
    {% if templates %}
        <div class="i-box just-group-list">
            <div class="i-box-content">
                <ul class="group-list no-content-before badge-backside-list">
                    {% for tpl in templates | sort(attribute='title') %}
                        {% set different_size = tpl.data.width != width or tpl.data.height != height %}
                        {% set linked_to_same_regform = not tpl.registration_form or not current_template.registration_form or tpl.registration_form == current_template.registration_form %}
                        <li {% if different_size %}
                                class="not-selectable-backside"
                                title="{% trans %}This template has different dimensions than your template{% endtrans %}"
                            {% elif not linked_to_same_regform %}
                                class="not-selectable-backside"
                                title="{% trans %}This template is linked to a different registration form{% endtrans %}"
                            {% endif %}>
                            <a class="backside-template" data-href="{{ url_for('.get_template_data', tpl) }}">
                                <i class="designer-template-type-icon template-icon-{{ tpl.type.name }}"
                                   title="{{ tpl.type.title }}"></i>
                                <span>{{ tpl.title }}</span>
                            </a>
                       </li>
                   {% endfor %}
                </ul>
            </div>
        </div>
    {% else %}
        <div class="italic text-not-important">
            {%- trans %}No templates{% endtrans -%}
        </div>
    {% endif %}
{% endmacro %}

{% block description %}
    {%- trans -%}
        The following badge templates can be used as the back side for your template. Note that only single-sided
        templates with the same dimensions can be used as the back side of a template.
    {%- endtrans -%}
{%- endblock %}

{% block content %}
    <section>
        <h3>{% trans %}Inherited templates{% endtrans %}</h3>
        {{ _render_template_list(inherited_templates, current_template) }}
    </section>
    <section class="custom-template-list">
        <h3>{% trans %}Custom templates{% endtrans %}</h3>
        {{ _render_template_list(custom_templates, current_template) }}
    </section>

    <script>
        $('li:not(.not-selectable-backside) .backside-template').on('click', function() {
            var $this = $(this);
            $.ajax({
                url: $this.data('href'),
                type: 'GET',
                dataType: 'json',
                error: handleAjaxError,
                success: function(data) {
                    $('.template-side.back').trigger('indico:backsideUpdated', data);
                    $this.trigger('ajaxDialog:close');
                }
            });
        });
    </script>
{% endblock %}
