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

{% block head-additional %}
<script type="text/javascript">
    function add_sport_handler() {
        var elements = $("input[name=sport]");
        elements.click(function(){ sport_handler(); });
    }

    function sport_handler() {
        var e = $("#id_ski_lift");
        if(e != null) {
            var sport = $("input[name=sport]:checked").val();
            if(sport == "S") {
                e.prop("disabled", false);
            } else {
                if(e.prop("checked"))
                    $("#skilift-alert").modal('show');
                e.prop("checked", false);
                e.prop("disabled", true);
            }
        }
    }

    function add_first_day_handler() {
        var e = $("#id_first_day_widget");
        e.on('changeDate', function(){ first_day_handler(); });
    }

    function first_day_handler() {
        var d = $("#id_first_day_widget").find("input").val();
        var e = $("#id_last_day_widget");
        e.datetimepicker('setStartDate', d);
    }

    function add_alt_first_day_handler() {
        var e = $("#id_alt_first_day_widget");
        e.on('changeDate', function(){ alt_first_day_handler(); });
    }

    function alt_first_day_handler() {
        var d = $("#id_alt_first_day_widget").find("input").val();
        var e = $("#id_alt_last_day_widget");
        e.datetimepicker('setStartDate', d);
    }

    $(document).ready(function(){
        add_sport_handler();
        sport_handler();
        add_first_day_handler();
        add_alt_first_day_handler();
    });
</script>
{% endblock head-additional %}

{% block modals %}
<div id="skilift-alert" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="alert alert-danger alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            Das Feld Skiliftbenutzung kann nur bei Ski-Veranstaltungen ausgewählt werdent!
        </div>
    </div>
</div>
{% endblock modals %}

{% block form-fields-visible %}
<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">&nbsp;</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 class="row">&nbsp;</div>
{% endblock form-fields-visible %}