{% extends "orga/mails/base.html" %}
{% load bootstrap4 %}
{% load i18n %}

{% block mail_content %}
    <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>

    <div class="d-flex w-100 mb-3">
        <a href="{{ request.event.orga_urls.new_template }}" class="btn btn-success flip ml-auto btn-lg">
            <i class="fa fa-plus"></i>
            {% translate "New custom template" %}
        </a></div>

    <form class="accordion form" id="template-accordion">
        <div class="card">
            <div class="card-header" id="heading{{ ack.instance.id }}">
                <h2>
                    <button class="btn btn-block text-left d-flex" type="button" data-toggle="collapse" data-target="#collapse{{ ack.instance.id }}" aria-expanded="false" aria-controls="collapse{{ ack.instance.id }}">
                        {% translate "Acknowledge Mail" %}
                        <i class="fa fa-2x ml-auto"></i>
                    </button>
                </h2>
            </div>
            <div id="collapse{{ ack.instance.id }}" class="collapse" aria-labelledby="heading{{ ack.instance.id }}" data-parent="#template-accordion">
                <div class="card-body">

                    <div class="row mt-2 mb-4 mr-1">
                        <a href="{{ ack.instance.urls.edit }}" class="btn btn-info flip ml-auto">{% translate "Edit template" %}</a>
                    </div>
                    {% bootstrap_form ack layout='event' %}
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header" id="heading{{ accept.instance.id }}">
                <h2>
                    <button class="btn btn-block text-left d-flex" type="button" data-toggle="collapse" data-target="#collapse{{ accept.instance.id }}" aria-expanded="false" aria-controls="collapse{{ accept.instance.id }}">
                        {% translate "Accept Mail" %}
                        <i class="fa fa-2x ml-auto"></i>
                    </button>
                </h2>
            </div>
            <div id="collapse{{ accept.instance.id }}" class="collapse" aria-labelledby="heading{{ accept.instance.id }}" data-parent="#template-accordion">
                <div class="card-body">

                    <div class="row mt-2 mb-4 mr-1">
                        <a href="{{ accept.instance.urls.edit }}" class="btn btn-info flip ml-auto">{% translate "Edit template" %}</a>
                    </div>
                    {% bootstrap_form accept layout='event' %}
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header" id="heading{{ reject.instance.id }}">
                <h2>
                    <button class="btn btn-block text-left d-flex" type="button" data-toggle="collapse" data-target="#collapse{{ reject.instance.id }}" aria-expanded="false" aria-controls="collapse{{ reject.instance.id }}">
                        {% translate "Reject Mail" %}
                        <i class="fa fa-2x ml-auto"></i>
                    </button>
                </h2>
            </div>
            <div id="collapse{{ reject.instance.id }}" class="collapse" aria-labelledby="heading{{ reject.instance.id }}" data-parent="#template-accordion">
                <div class="card-body">

                    <div class="row mt-2 mb-4 mr-1">
                        <a href="{{ reject.instance.urls.edit }}" class="btn btn-info flip ml-auto">{% translate "Edit template" %}</a>
                    </div>
                    {% bootstrap_form reject layout='event' %}
                </div>
            </div>
        </div>

        <div class="accordion" id="template-accordion">
            <div class="card">
                <div class="card-header" id="heading{{ update.instance.id }}">
                    <h2>
                        <button class="btn btn-block text-left d-flex" type="button" data-toggle="collapse" data-target="#collapse{{ update.instance.id }}" aria-expanded="false" aria-controls="collapse{{ update.instance.id }}">
                            {% translate "New schedule version" %}
                            <i class="fa fa-2x ml-auto"></i>
                        </button>
                    </h2>
                </div>
                <div id="collapse{{ update.instance.id }}" class="collapse" aria-labelledby="heading{{ update.instance.id }}" data-parent="#template-accordion">
                    <div class="card-body">

                        <div class="row mt-2 mb-4 mr-1">
                            <a href="{{ update.instance.urls.edit }}" class="btn btn-info flip ml-auto">{% translate "Edit template" %}</a>
                        </div>
                        {% bootstrap_form update layout='event' %}
                    </div>
                </div>
            </div>

            <div class="accordion" id="template-accordion">
                <div class="card">
                    <div class="card-header" id="heading{{ remind.instance.id }}">
                        <h2>
                            <button class="btn btn-block text-left d-flex" type="button" data-toggle="collapse" data-target="#collapse{{ remind.instance.id }}" aria-expanded="false" aria-controls="collapse{{ remind.instance.id }}">
                                {% translate "Unanswered questions reminder" %}
                                <i class="fa fa-2x ml-auto"></i>
                            </button>
                        </h2>
                    </div>
                    <div id="collapse{{ remind.instance.id }}" class="collapse" aria-labelledby="heading{{ remind.instance.id }}" data-parent="#template-accordion">
                        <div class="card-body">

                            <div class="row mt-2 mb-4 mr-1">
                                <a href="{{ remind.instance.urls.edit }}" class="btn btn-info flip ml-auto">{% translate "Edit template" %}</a>
                            </div>
                            {% bootstrap_form remind layout='event' %}
                        </div>
                    </div>
                </div>

                {% for template in other %}
                    <div class="card">
                        <div class="card-header" id="heading{{ template.instance.id }}">
                            <h2>
                                <button class="btn btn-block text-left d-flex" type="button" data-toggle="collapse" data-target="#collapse{{ template.instance.id }}" aria-controls="collapse{{ template.instance.id }}">
                                    {% translate "Custom Mail" %}: {{ template.instance.subject }}
                                    <i class="fa fa-2x ml-auto"></i>
                                </button>
                            </h2>
                        </div>
                        <div id="collapse{{ template.instance.id }}" class="collapse" aria-labelledby="heading{{ template.instance.id }}" data-parent="#template-accordion">
                            <div class="card-body">
                                <div class="row mt-2 mb-4 mr-1">
                                    <a href="{{ template.instance.urls.delete }}" class="btn btn-danger flip ml-auto mr-2">{% translate "Delete template" %}</a>
                                    <a href="{{ template.instance.urls.edit }}" class="btn btn-info mr-2">{% translate "Edit template" %}</a>
                                    <a href="{{ request.event.orga_urls.compose_mails }}?template={{ template.instance.pk }}" class="btn btn-success">{% translate "Send mails" %}</a>
                                </div>
                                {% bootstrap_form template layout='event' %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </form>
{% endblock %}
