{% from 'forms/_form.html' import form_header, form_footer, form_fieldset, form_rows %}
{% from 'message_box.html' import message_box %}
{% set editable = not reminder or not reminder.is_sent %}
{% set disabled_fields = () if editable else form._fields.keys() %}

<div class="reminders">
    {% if reminder and reminder.is_overdue %}
        {% call message_box('warning', fixed_width=true) %}
            {% trans %}This reminder is overdue and will be sent within a few minutes.{% endtrans %}
        {% endcall %}
    {% endif %}

    {{ form_header(form, id='reminder-form') }}
    {{ form_rows(form, fields=form.schedule_fields, disable=disabled_fields) }}
    {% call form_fieldset(_('Recipients')) %}
        {{ form_rows(form, fields=form.recipient_fields, disable=disabled_fields) }}
    {% endcall %}
    {% call form_fieldset(_('Misc')) %}
        {{ form_rows(form, skip=form.schedule_recipient_fields, disable=disabled_fields) }}
    {% endcall %}
    {% call form_footer(form) %}
        {% if editable %}
            <input id="save-button" class="i-button big highlight" type="submit"
                   value="{% trans %}Save{% endtrans %}" data-disabled-until-change>
            <input id="preview-reminder" class="i-button big" type="button"
                   value="{%- trans %}Preview email{% endtrans -%}"
                   data-href="{{ url_for('.preview', event) }}">
        {% endif %}
        <a href="{{ url_for('.list', event) }}" class="i-button big" data-button-back>
            {%- trans %}Back{% endtrans -%}
        </a>
    {% endcall %}

    {% if editable %}
        <script>
            (function() {
                'use strict';

                $('#preview-reminder').ajaxDialog({
                    title: $T('Reminder preview'),
                    method: 'POST',
                    data: function() {
                        return {
                            reminder_type: {{ form.reminder_type.data.name|tojson }},
                            render_mode: {{ form.render_mode.data.name|tojson }},
                            include_summary: $('#include_summary').prop('checked') ? '1' : '0',
                            include_description: $('#include_description').prop('checked') ? '1' : '0',
                            attach_ical: $('#attach_ical').prop('checked') ? '1' : '0',
                            subject: $('#subject').val() ?? '',
                            message: $('#message').val()
                        };
                    },
                    dialogClasses: 'editor-output',
                });
            })();
        </script>
    {% endif %}
</div>
