{% extends 'categories/management/base.html' %}

{% from 'forms/_form.html' import form_header, form_rows, form_fieldset, form_footer %}

{% macro render_image_form(image_form, type, endpoint, title, deletion_prompt_title, deletion_prompt) %}
    {{ form_header(image_form, classes='image-form', action=url_for(endpoint, category)) }}
        {% call form_fieldset(title) %}
            {{ form_rows(image_form, skip_labels=true) }}
        {% endcall %}
    {% call form_footer(image_form, skip_label=true) %}
        <input class="i-button big highlight icon-upload" type="submit"
               value="{% trans %}Upload{% endtrans %}" data-disabled-until-change>
        {% set field = image_form|attr(type) %}
        <button class="i-button js-remove-button danger icon-remove{% if not field._value() %} hidden{% endif %}"
                data-method="DELETE"
                data-href="{{ url_for(endpoint, category) }}"
                data-title="{{ deletion_prompt_title }}"
                data-confirm="{{ deletion_prompt }}">
            {% trans %}Delete{% endtrans %}
        </button>
    {% endcall %}
{% endmacro %}

{% block title %}
    {% trans %}Settings{% endtrans %}
{% endblock %}

{% block content %}
    {{ form_header(form) }}
        {{ form_rows(form, fields=form.BASIC_FIELDS) }}
        {% if indico_config.ENABLE_GOOGLE_WALLET %}
            {% call form_fieldset(_('Google Wallet')) %}
                {{ form_rows(form, fields=form.GOOGLE_WALLET_FIELDS) }}
            {% endcall %}
        {% endif %}
        {% if indico_config.ENABLE_APPLE_WALLET %}
            {% call form_fieldset(_('Apple Wallet')) %}
                {{ form_rows(form, fields=form.APPLE_WALLET_FIELDS) }}
            {% endcall %}
        {% endif %}
        {% call form_fieldset(_('Event Header')) %}
            {{ form_rows(form, fields=form.EVENT_HEADER_FIELDS) }}
        {% endcall %}
    {% call form_footer(form) %}
        <input class="i-button big highlight" type="submit" value="{% trans %}Save{% endtrans %}"
               data-disabled-until-change>
    {% endcall %}

    {% set delete_icon_prompt = _("Are you sure you want to remove the icon of this category?") %}
    {% set delete_logo_prompt = _("Are you sure you want to remove the logo of this category?") %}
    {{ render_image_form(icon_form, 'icon', '.manage_icon', _('Icon'), _('Delete Icon?'), delete_icon_prompt) }}
    {{ render_image_form(logo_form, 'logo', '.manage_logo', _('Logo'), _('Delete Logo?'), delete_logo_prompt) }}

    {% block after_forms %}{% endblock %}

    <script>
        (function() {
            'use strict';

            $('.image-form').on('indico:fieldsSaved', function(evt, response) {
                var hidden = !response.content;
                var $this = $(this);
                $this.find('.js-remove-button').toggleClass('hidden', hidden).prop('disabled', hidden);
            }).on('indico:confirmed', '.js-remove-button', function(evt) {
                evt.preventDefault();

                var $this = $(this);
                var $form = $this.closest('form');
                var dropzone = $form.get(0).dropzone;

                $this.prop('disabled', true);
                $.ajax({
                    url: $this.data('href'),
                    method: $this.data('method'),
                    complete: IndicoUI.Dialogs.Util.progress(),
                    error: handleAjaxError,
                    success: function(data) {
                        handleFlashes(data, true, $form.find('.flashed-messages'));
                        dropzone.removeAllFiles();
                        $form.trigger('indico:fieldsSaved', data);
                    }
                });
            });
        })();
    </script>
{% endblock content %}
