{% extends "dav_registration/base.html" %}
{% load bootstrap3 %}
{% load i18n %}

{% block head-title %}{% block form-title %}{% trans 'Anmeldung' %} - {{ event.number }}{% endblock form-title %} - {{ block.super }}{% endblock head-title %}

{% block head-additional %}
<script type="text/javascript">
    function init_not_dav_member_handler() {
        var e_orig = $("#id_dav_member");
        initial_str = e_orig.val();
        initial_bool = (initial_str == 'True')

        var e_inverted = $("#id_not_dav_member");
        if(e_inverted != null) {
            e_inverted.prop("checked", !initial_bool);
            e_inverted.change(function(){ not_dav_member_handler(); });
        }
    }

    function not_dav_member_handler() {
        var e = $("#id_not_dav_member");
        if(e != null)
            checked = e.prop("checked");
        else
            checked = true;

        $("#id_dav_number").prop("disabled", checked);
        $("#id_dav_member").val(!checked);
        if(checked) {
            $("#id_dav_number").val("");
        }
    }

    function year_of_birth_handler() {
        var junior_age = 25
        var year_now = new Date().getFullYear()
        var year_of_birth = parseInt($("#id_year_of_birth").val());
        if(year_of_birth > (year_now - junior_age)) {
            $("#id_apply_reduced_fee").prop('checked', true);
        }
    }

    $(document).ready(function(){
        init_not_dav_member_handler();
        var e = $("#id_year_of_birth");
        e.change(function(){ year_of_birth_handler(); });
    });
</script>
{% endblock head-additional %}

{% block page-container-fluid %}
<h3 class="top-most">{% trans 'Anmeldung' %}</h3>
<form>
    <div class="form-group">
        <label class="control-label" for="event">{% trans 'Veranstaltung' %}</label>
        <input id="event" class="form-control" type="text" value="{{ event }}" readonly>
    </div>
</form>
{% block form-errors %}
{% bootstrap_form_errors form %}
{% endblock form-errors %}
{% block form %}
<form action="" method="post">
    {% block form-content %}
    {% csrf_token %}
    {% block form-fields %}
    {% block form-fields-hidden %}
    {% for field in form.hidden_fields %}
    {{ field }}
    {% endfor %}
    {% endblock form-fields-hidden %}
    {% block form-fields-visible %}
    <div class="row">
        <div class="col-sm-6">
            {% bootstrap_field form.personal_names %}
        </div>
        <div class="col-sm-6">
            {% bootstrap_field form.family_names %}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            {% bootstrap_field form.address %}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            {% bootstrap_field form.postal_code %}
        </div>
        <div class="col-sm-9">
            {% bootstrap_field form.city %}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            {% bootstrap_field form.email_address %}
        </div>
        <div class="col-sm-6">
            {% bootstrap_field form.phone_number %}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            {% bootstrap_field form.year_of_birth %}
        </div>
        <div class="col-sm-9">
            <strong>Antrag auf reduzierte Teilnahmegebühr</strong>
            {% bootstrap_field form.apply_reduced_fee %}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            {% bootstrap_field form.dav_number %}
        </div>
        <div class="col-sm-3">
            <strong>Nichtmitglieder</strong>
            {% bootstrap_field form.not_dav_member %}
        </div>
        <div class="col-sm-6">
            {% bootstrap_field form.emergency_contact %}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            {% bootstrap_field form.experience %}
        </div>
        <div class="col-sm-6">
            {% bootstrap_field form.note %}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <label class="control-label" for="privacy_policy">{% trans 'Erklärung zur Datenspeicherung' %}</label>
                <div id="privacy_policy" class="well well-sm form-control-static">
                    <p>
                        <small>{{ privacy_policy|linebreaksbr }}</small>
                    </p>
                    <small>{% trans 'Zeitpunkt der Löschung' %}: {{ purge_at|date:'l, d. F Y' }}</small>
                </div>
            </div>
            {% if form.privacy_policy_accepted.errors %}
            <div class="has-error">
            {% endif %}
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="privacy_policy_accepted" {% if form.privacy_policy_accepted.value %}checked="checked"{% endif %}>
                    {% trans 'Ich willige in die oben erläuterte Datenspeicherung ein.' %}
                </label>
            </div>
            {% if form.privacy_policy_accepted.errors %}
            <div class="help-block">
                {% for error in form.privacy_policy_accepted.errors %}
                <p>{{ error }}</p>
                {% endfor %}
            </div>
            </div>
            {% endif %}

        </div>
    </div>
    {% endblock form-fields-visible %}
    {% endblock form-fields %}
    <div class="row">
        <div class="col-sm-12">
            <h5>Teilnahmevorbehalt</h5>
            <div class="well well-sm">
                <p><small>
                    <strong>
                        Die erfolgreiche Anmeldung hier im Portal bedeutet nicht, dass du auf jeden Fall
                        an der Tour oder dem Kurs teilnehmen kannst.
                    </strong>
                    <br />
                    Bei vielen Veranstaltungen wollen mehr Mitglieder teilnehmen,
                    als der oder die Tourenleiter/innen mitnehmen können.
                    Zudem muss die Tourenleitung erst noch entscheiden, ob du
                    die erforderlichen Anforderungen zur Teilnahme erfüllst
                    (evtl. wird er/sie sich dafür bei dir melden).
                    Die Plätze werden daher nicht unbedingt nach dem first-come-first-serve-Prinzip vergeben.
                    <br/>
                    Der/die Tourenleiter/in wird dir also persönlich per E-Mail zu- oder absagen.
                </small></p>
            </div>
            {% if form.participation_conditions_accepted.errors %}
            <div class="has-error">
            {% endif %}
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="participation_conditions_accepted" {% if form.participation_conditions_accepted.value %}checked="checked"{% endif %}>
                    {% trans 'Ich habe den oben erläuterten Teilnahmevorbehalt und die <a href="https://www.alpenverein-karlsruhe.de/programm/teilnahmebedingungen" target="_blank" rel="noreferrer noopener">Teilnahmebedingungen</a> gelesen und akzeptiert.' %}
                </label>
            </div>
            {% if form.participation_conditions_accepted.errors %}
            <div class="help-block">
                {% for error in form.participation_conditions_accepted.errors %}
                <p>{{ error }}</p>
                {% endfor %}
            </div>
            </div>
            {% endif %}
        </div>
    </div>
    <div class="row">&nbsp;</div>
    {% block form-buttons %}
    {% buttons %}
    <button type="submit" class="btn btn-success">
        {% bootstrap_icon 'ok' %}&thinsp;
        {% trans 'Anmeldung abschicken' %}
    </button>
    <a class="btn btn-danger" href="{% url 'dav_registration:event' event.pk %}">
        {% bootstrap_icon 'remove' %}&thinsp;
        {% trans 'Zurück' %}
    </a>
    {% endbuttons %}
    {% endblock form-buttons %}
    {% endblock form-content %}
</form>
{% endblock form %}
{% endblock page-container-fluid %}