{% extends 'dav_events/base.html' %}
{% load bootstrap3 %}
{% load i18n %}

{% block head-title %}{{ event }} - {{ block.super }}{% endblock head-title %}

{% block head-additional %}
<script type="text/javascript">
    function nextAccordionPanel(event) {
        var sender = $(event.srcElement);
        var current_panel = sender.closest(".panel");
        var next_panel = current_panel.next();
        var current_collapse =  sender.closest(".panel-collapse");
        var next_collapse = next_panel.find(".panel-collapse");
        current_collapse.collapse("hide");
        next_collapse.collapse("show");
        $('html, body').animate({
            scrollTop: current_collapse.offset().top
        },'slow');
    }
    function previousAccordionPanel(event) {
        var sender = $(event.srcElement);
        var current_panel = sender.closest(".panel");
        var previous_panel = current_panel.prev();
        var current_collapse =  sender.closest(".panel-collapse");
        var previous_collapse = previous_panel.find(".panel-collapse");
        current_collapse.collapse("hide");
        previous_collapse.collapse("show");
        $('html, body').animate({
            scrollTop: previous_panel.offset().top
        },'slow');
    }
</script>
{% endblock head-additional %}

{% block page-container-fluid %}
<div class="action-tabs top-most">
    <ul class="nav nav-tabs" role="tablist">
        <li>
            <a href="{% url 'dav_events:list' %}">{% trans 'Veranstaltungsliste' %}</a>
        </li>
        <li>
            <a href="{% url 'dav_events:detail' event.pk %}">{% trans 'Details' %}</a>
        </li>
        <li class="active">
            <a href="{% url 'dav_events:update' event.pk %}">{% trans 'Ändern' %}</a>
        </li>
        <li class="{% if not event.registration_required %}disabled{% endif %}">
            <a class="{% if not event.registration_required %}disabled{% endif %}"
               href="{% url 'dav_events:registrations' event.pk %}">{% trans 'Anmeldungen' %}</a>
        </li>
    </ul>
</div>
<form id="id_event_update_form" action="" method="post">
    {% csrf_token %}

    {% if is_realized %}
    <div class="alert alert-info alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        {% trans 'Diese Veranstaltung wurde bereits durchgeführt.' %}
    </div>
    {% elif is_canceled %}
    <div class="alert alert-info alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        {% trans 'Diese Veranstaltung ist abgesagt.' %}
    </div>
    {% elif is_expired %}
    <div class="alert alert-info alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        {% trans 'Diese Veranstaltung ist bereits ausgelaufen.' %}
    </div>
    {% elif is_publishing_any %}
    <div class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>{% trans 'Achtung!' %}</strong> {% trans 'Diese Veranstaltung wird/wurde bereits veröffentlicht.' %}
        {% trans 'Änderungen müssen mit allen Beteiligten abgesprochen werden.' %}
    </div>
    {% elif is_accepted %}
    <div class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>{% trans 'Achtung!' %}</strong> {% trans 'Diese Veranstaltung wurde bereits freigegeben.' %}
        {% trans 'Änderungen müssen mit allen Beteiligten abgesprochen werden.' %}
    </div>
    {% endif %}

    {% if form.errors %}
    <div class="alert alert-danger">
        Bitte überprüfe deine Eingaben!
        {{ form.non_field_errors }}
        <ul>
            {% for field in form %}
            {% if field.errors %}
            <li>
                {{ field.label }}:
                {{ field.errors }}
            </li>
            {% endif %}
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">{{ event }}</h3></div>
        <div class="panel-body">
            <div class="panel-group" id="form-accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div id="headingModusForm" class="panel-heading" role="tab">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseModusForm" data-toggle="collapse" data-parent="#accordion"
                               aria-expanded="true" aria-controls="collapseModusForm">
                                Veranstaltungsmodus / Termin
                            </a>
                        </h4>
                    </div>
                    <div id="collapseModusForm" class="panel-collapse collapse{% if decollapseModusForm or decollapseAllForms or decollapseFirstForm %} in{% endif %}"
                         role="tabpanel" aria-labelledby="headingModusForm">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-4">
                                    {% bootstrap_field form.mode %}
                                </div>
                                <div class="col-sm-4">
                                    {% bootstrap_field form.sport %}
                                </div>
                                <div class="col-sm-4">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            {% bootstrap_field form.level %}
                                        </div>
                                        <div class="col-sm-12">
                                            {% bootstrap_field form.ski_lift %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    {% bootstrap_field form.first_day %}
                                </div>
                                <div class="col-sm-6">
                                    {% bootstrap_field form.last_day %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    {% bootstrap_field form.alt_first_day %}
                                </div>
                                <div class="col-sm-6">
                                    {% bootstrap_field form.alt_last_day %}
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <a class="btn btn-default" href="#" onclick="nextAccordionPanel(event)">{% trans 'Nächster Abschnitt' %} {% bootstrap_icon 'arrow-down' %}</a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div id="headingLocationForm" class="panel-heading" role="tab">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseLocationForm" data-toggle="collapse" data-parent="#accordion"
                               aria-expanded="true" aria-controls="collapseLocationForm">
                                Ort
                            </a>
                        </h4>
                    </div>
                    <div id="collapseLocationForm" class="panel-collapse collapse{% if decollapseLocationForm or decollapseAllForms %} in{% endif %}"
                         role="tabpanel" aria-labelledby="headingLocationForm">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.country %}
                                    {% bootstrap_field form.terrain %}
                                    {% bootstrap_field form.location %}
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <a class="btn btn-default" href="#" onclick="nextAccordionPanel(event)">{% trans 'Nächster Abschnitt' %} {% bootstrap_icon 'arrow-down' %}</a>
                            <a class="btn btn-default" href="#" onclick="previousAccordionPanel(event)">{% trans 'Vorheriger Abschnitt' %} {% bootstrap_icon 'arrow-up' %}</a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div id="headingJourneyForm" class="panel-heading" role="tab">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseJourneyForm" data-toggle="collapse" data-parent="#accordion"
                               aria-expanded="true" aria-controls="collapseJourneyForm">
                                An- und Abreise
                            </a>
                        </h4>
                    </div>
                    <div id="collapseJourneyForm" class="panel-collapse collapse{% if decollapseJourneyForm or decollapseAllForms %} in{% endif %}"
                         role="tabpanel" aria-labelledby="headingJourneyForm">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    {% bootstrap_field form.transport %}
                                </div>
                                <div class="col-sm-6">
                                    {% bootstrap_field form.transport_other %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    {% bootstrap_field form.meeting_point %}
                                </div>
                                <div class="col-sm-6">
                                    {% bootstrap_field form.meeting_point_other %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    {% bootstrap_field form.meeting_time %}
                                </div>
                                <div class="col-sm-6">
                                    {% bootstrap_field form.departure_time %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.departure_ride %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    {% bootstrap_field form.return_departure_time %}
                                </div>
                                <div class="col-sm-6">
                                    {% bootstrap_field form.return_arrival_time %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.arrival_previous_day %}
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <a class="btn btn-default" href="#" onclick="nextAccordionPanel(event)">{% trans 'Nächster Abschnitt' %} {% bootstrap_icon 'arrow-down' %}</a>
                            <a class="btn btn-default" href="#" onclick="previousAccordionPanel(event)">{% trans 'Vorheriger Abschnitt' %} {% bootstrap_icon 'arrow-up' %}</a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div id="headingAccommodationForm" class="panel-heading" role="tab">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseAccommodationForm" data-toggle="collapse" data-parent="#accordion"
                               aria-expanded="true" aria-controls="collapseAccommodationForm">
                                Unterkunft
                            </a>
                        </h4>
                    </div>
                    <div id="collapseAccommodationForm" class="panel-collapse collapse{% if decollapseAccommodationForm or decollapseAllForms %} in{% endif %}"
                         role="tabpanel" aria-labelledby="headingAccommodationForm">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.basecamp %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    {% bootstrap_field form.accommodation %}
                                </div>
                                <div class="col-sm-6">
                                    {% bootstrap_field form.accommodation_other %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    {% bootstrap_field form.meals %}
                                </div>
                                <div class="col-sm-6">
                                    {% bootstrap_field form.meals_other %}
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <a class="btn btn-default" href="#" onclick="nextAccordionPanel(event)">{% trans 'Nächster Abschnitt' %} {% bootstrap_icon 'arrow-down' %}</a>
                            <a class="btn btn-default" href="#" onclick="previousAccordionPanel(event)">{% trans 'Vorheriger Abschnitt' %} {% bootstrap_icon 'arrow-up' %}</a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div id="headingRequirementsForm" class="panel-heading" role="tab">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseRequirementsForm" data-toggle="collapse" data-parent="#accordion"
                               aria-expanded="true" aria-controls="collapseRequirementsForm">
                                Voraussetzungen / Vorbedingungen
                            </a>
                        </h4>
                    </div>
                    <div id="collapseRequirementsForm" class="panel-collapse collapse{% if decollapseRequirementsForm or decollapseAllForms %} in{% endif %}"
                         role="tabpanel" aria-labelledby="headingRequirementsForm">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.requirements %}
                                    {% bootstrap_field form.equipment %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    {% bootstrap_field form.pre_meeting_1 %}
                                </div>
                                <div class="col-sm-6">
                                    {% bootstrap_field form.pre_meeting_2 %}
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <a class="btn btn-default" href="#" onclick="nextAccordionPanel(event)">{% trans 'Nächster Abschnitt' %} {% bootstrap_icon 'arrow-down' %}</a>
                            <a class="btn btn-default" href="#" onclick="previousAccordionPanel(event)">{% trans 'Vorheriger Abschnitt' %} {% bootstrap_icon 'arrow-up' %}</a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div id="headingTrainerForm" class="panel-heading" role="tab">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseTrainerForm" data-toggle="collapse" data-parent="#accordion"
                               aria-expanded="true" aria-controls="collapseTrainerForm">
                                Tourenleitung
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTrainerForm" class="panel-collapse collapse{% if decollapseTrainerForm or decollapseAllForms %} in{% endif %}"
                         role="tabpanel" aria-labelledby="headingTrainerForm">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    {% bootstrap_field form.trainer_firstname %}
                                </div>
                                <div class="col-sm-6">
                                    {% bootstrap_field form.trainer_familyname %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    {% bootstrap_field form.trainer_email %}
                                </div>
                                <div class="col-sm-6">
                                    {% bootstrap_field form.trainer_phone %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.trainer_2_fullname %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.trainer_3_fullname %}
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <a class="btn btn-default" href="#" onclick="nextAccordionPanel(event)">{% trans 'Nächster Abschnitt' %} {% bootstrap_icon 'arrow-down' %}</a>
                            <a class="btn btn-default" href="#" onclick="previousAccordionPanel(event)">{% trans 'Vorheriger Abschnitt' %} {% bootstrap_icon 'arrow-up' %}</a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div id="headingRegistrationForm" class="panel-heading" role="tab">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseRegistrationForm" data-toggle="collapse" data-parent="#accordion"
                               aria-expanded="true" aria-controls="collapseRegistrationForm">
                                Teilnehmer / Anmeldung
                            </a>
                        </h4>
                    </div>
                    <div id="collapseRegistrationForm" class="panel-collapse collapse{% if decollapseRegistrationForm or decollapseAllForms %} in{% endif %}"
                         role="tabpanel" aria-labelledby="headingRegistrationForm">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <label>{% trans 'Teilnehmerzahl' %}</label> (0 = {% trans 'unreglementiert' %})
                                    <div class="row">
                                    <div class="col-sm-6">
                                        {% bootstrap_field form.min_participants %}
                                    </div>
                                    <div class="col-sm-6">
                                        {% bootstrap_field form.max_participants %}
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-3">
                                    <label>{% trans 'Anmeldung' %}</label>
                                    {% bootstrap_field form.registration_required %}
                                </div>
                                <div class="col-sm-9">
                                    <div class="row registration_settings">
                                        <div class="col-sm-12">
                                            {% bootstrap_field form.deadline %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row registration_settings">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.registration_howto %}
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <a class="btn btn-default" href="#" onclick="nextAccordionPanel(event)">{% trans 'Nächster Abschnitt' %} {% bootstrap_icon 'arrow-down' %}</a>
                            <a class="btn btn-default" href="#" onclick="previousAccordionPanel(event)">{% trans 'Vorheriger Abschnitt' %} {% bootstrap_icon 'arrow-up' %}</a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div id="headingChargesForm" class="panel-heading" role="tab">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseChargesForm" data-toggle="collapse" data-parent="#accordion"
                               aria-expanded="true" aria-controls="collapseChargesForm">
                                Kosten
                            </a>
                        </h4>
                    </div>
                    <div id="collapseChargesForm" class="panel-collapse collapse{% if decollapseChargesForm or decollapseAllForms %} in{% endif %}"
                         role="tabpanel" aria-labelledby="headingChargesForm">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.charge %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.additional_costs %}
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <a class="btn btn-default" href="#" onclick="nextAccordionPanel(event)">{% trans 'Nächster Abschnitt' %} {% bootstrap_icon 'arrow-down' %}</a>
                            <a class="btn btn-default" href="#" onclick="previousAccordionPanel(event)">{% trans 'Vorheriger Abschnitt' %} {% bootstrap_icon 'arrow-up' %}</a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div id="headingTrainingForm" class="panel-heading" role="tab">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseTrainingForm" data-toggle="collapse" data-parent="#accordion"
                               aria-expanded="true" aria-controls="collapseTrainingForm">
                                Kursinhalte / Kursziele
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTrainingForm" class="panel-collapse collapse{% if decollapseTrainingForm or decollapseAllForms %} in{% endif %}"
                         role="tabpanel" aria-labelledby="headingTrainingForm">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.course_topic_1 %}
                                    {% bootstrap_field form.course_topic_2 %}
                                    {% bootstrap_field form.course_topic_3 %}
                                    {% bootstrap_field form.course_topic_4 %}
                                    {% bootstrap_field form.course_topic_5 %}
                                    {% bootstrap_field form.course_topic_6 %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.course_goal_1 %}
                                    {% bootstrap_field form.course_goal_2 %}
                                    {% bootstrap_field form.course_goal_3 %}
                                    {% bootstrap_field form.course_goal_4 %}
                                    {% bootstrap_field form.course_goal_5 %}
                                    {% bootstrap_field form.course_goal_6 %}
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <a class="btn btn-default" href="#" onclick="nextAccordionPanel(event)">{% trans 'Nächster Abschnitt' %} {% bootstrap_icon 'arrow-down' %}</a>
                            <a class="btn btn-default" href="#" onclick="previousAccordionPanel(event)">{% trans 'Vorheriger Abschnitt' %} {% bootstrap_icon 'arrow-up' %}</a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div id="headingDescriptionForm" class="panel-heading" role="tab">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseDescriptionForm" data-toggle="collapse" data-parent="#accordion"
                               aria-expanded="true" aria-controls="collapseDescriptionForm">
                                Titel / Beschreibung
                            </a>
                        </h4>
                    </div>
                    <div id="collapseDescriptionForm" class="panel-collapse collapse{% if decollapseDescriptionForm or decollapseAllForms %} in{% endif %}"
                         role="tabpanel" aria-labelledby="headingDescriptionForm">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.title %}
                                    {% bootstrap_field form.description %}
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <a class="btn btn-default" href="#" onclick="nextAccordionPanel(event)">{% trans 'Nächster Abschnitt' %} {% bootstrap_icon 'arrow-down' %}</a>
                            <a class="btn btn-default" href="#" onclick="previousAccordionPanel(event)">{% trans 'Vorheriger Abschnitt' %} {% bootstrap_icon 'arrow-up' %}</a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div id="headingWorkflowForm" class="panel-heading" role="tab">
                        <h4 class="panel-title">
                            <a role="button" href="#collapseWorkflowForm" data-toggle="collapse" data-parent="#accordion"
                               aria-expanded="true" aria-controls="collapseWorkflowForm">
                                Bearbeitungshinweis / Workflow
                            </a>
                        </h4>
                    </div>
                    <div id="collapseWorkflowForm" class="panel-collapse collapse{% if decollapseWorkflowForm or decollapseAllForms %} in{% endif %}"
                         role="tabpanel" aria-labelledby="headingWorkflowForm">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.internal_note %}
                                    {% bootstrap_field form.registration_closed %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    {% bootstrap_field form.planned_publication_date %}
                                    {% bootstrap_field form.number %}
                                    {% bootstrap_field form.owner %}
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <a class="btn btn-default" href="#" onclick="previousAccordionPanel(event)">{% trans 'Vorheriger Abschnitt' %} {% bootstrap_icon 'arrow-up' %}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <button type="submit" class="btn btn-success">
                {% bootstrap_icon 'hdd' %}&thinsp;
                {% trans 'Speichern' %}
            </button>
            <a class="btn btn-danger" href="{% url 'dav_events:detail' event.pk %}">
                {% bootstrap_icon 'remove' %}&thinsp;
                {% trans 'Abbrechen' %}
            </a>
        </div>
    </div>
</form>
{% endblock page-container-fluid %}