{% extends "orga/mails/base.html" %}

{% load compress %}
{% load i18n %}
{% load static %}

{% block scripts %}
    {% compress css %}
        <link rel="stylesheet" href="{% static "common/css/dialog.css" %}">
    {% endcompress %}
    <script defer src="{% static "common/js/modalDialog.js" %}"></script>
{% endblock scripts %}

{% block mail_content %}
    <h2 class="d-flex">
        {% translate "Templates" %}
        <span class="dialog-anchor ml-2" data-target="#info-dialog" data-toggle="dialog">
            <i class="fa fa-question-circle-o text-info"></i>
        </span>
        <a href="{{ request.event.orga_urls.new_template }}" class="btn btn-success flip ml-auto">
            <i class="fa fa-plus"></i>
            {% translate "New custom template" %}
        </a>
    </h2>
    <dialog class="info-dialog" id="info-dialog">
        <div class="alert alert-info">
            <div>
                <p>
                    {% blocktranslate trimmed %}
                        You can edit the default templates and your custom templates for emails here.
                        If you want to send emails to some or all of your speakers, head over to the
                        “Send Emails” tab. Mails queued for sending are in the “Outbox” tab.
                    {% endblocktranslate %}
                </p>
                <p>
                    {% blocktranslate trimmed %}
                        There are different placeholders available depending on the template type.
                        They are explained in detail once you start editing a template.
                    {% endblocktranslate %}
                </p>
            </div>
        </div>
    </dialog>


    {# HACK: This isn"t really a form, but we want to make the templates look like normal forms #}
    <div class="accordion form" id="template-accordion">
        {% for template in templates %}
            <div class="card">
                <div class="card-header" id="heading{{ template.obj.id }}">
                    <h2 class="d-flex">
                        <button class="btn btn-block text-left" data-toggle="collapse" data-target="#collapse{{ template.obj.id }}" aria-expanded="false" aria-controls="collapse{{ template.obj.id }}">
                            {% if template.custom %}
                                {% translate "Custom Mail" %}:
                            {% endif %}
                            {{ template.title }}
                            <i class="fa fa-2x ml-auto"></i>
                        </button>
                        <div class="d-flex">
                            {% if template.custom %}
                                <a href="{{ template.obj.urls.delete }}" class="btn btn-danger flip mr-1 nowrap">{% translate "Delete template" %}</a>
                                <a href="{{ request.event.orga_urls.compose_mails_sessions }}?template={{ template.obj.pk }}" class="btn btn-success mr-1 nowrap">{% translate "Send mails" %}</a>
                            {% endif %}
                            <a href="{{ template.obj.urls.edit }}" class="btn btn-info flip nowrap">{% translate "Edit template" %}</a>
                        </div>
                    </h2>
                </div>
                <div id="collapse{{ template.obj.id }}" class="collapse" aria-labelledby="heading{{ template.obj.id }}" data-parent="#template-accordion">
                    <div class="card-body">
                        {{ template.form }}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock mail_content %}
