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

{% block head-additional %}
<script type="text/javascript">
    var max_topics = 6;
    var show_topics = 2;
    var max_goals = 6;
    var show_goals = 2;

    function setupTopicsAndGoals() {
        var e;
        for(var i = 1 ; i <= max_topics ; i++) {
            e = $("#block_topic_" + i);
            if(e != null) {
                if(i <= show_topics) {
                    if(e.css("display") == 'none')
                        e.slideDown();
                } else {
                    //if(e.css("display") != 'none')
                    //    e.slideUp();
                    e.hide();
                }
            }
        }
        for(var i = 1 ; i <= max_goals ; i++) {
            e = $("#block_goal_" + i);
            if(e != null) {
                if(i <= show_goals) {
                    if(e.css("display") == 'none')
                        e.slideDown();
                } else {
                    //if(e.css("display") != 'none')
                    //    e.slideUp();
                    e.hide();
                }
            }
        }
        e = document.getElementById("btn-topic-add");
        if(e != null) {
            if(show_topics < max_topics)
                e.disabled = false;
            else
                e.disabled = true;
        }

        e = document.getElementById("btn-goal-add");
        if(e != null) {
            if(show_goals < max_goals)
                e.disabled = false;
            else
                e.disabled = true;
        }
    }

    function addTopic() {
        if(show_topics < max_topics)
            show_topics++;
            setupTopicsAndGoals();
    }

    function addGoal() {
        if(show_goals < max_goals)
            show_goals++;
            setupTopicsAndGoals();
    }

    $(document).ready(function(){
        setupTopicsAndGoals();
    });
</script>
{% endblock head-additional %}

{% block form-fields-visible %}
<div class="row">
    <div class="col-sm-12">
        <label>{% trans 'Kursinhalte' %}</label>
        <span class="text-muted">
            ({% trans 'Werden mehrere Felder ausgefüllt, erfolgt die Anzeige ggf. als Spiegelstrich-Liste' %})
        </span>
        <div id="block_topic_1">
            {% bootstrap_field form.course_topic_1 show_label=False %}
        </div>
        <div id="block_topic_2">
            {% bootstrap_field form.course_topic_2 show_label=False %}
        </div>
        <div id="block_topic_3">
            {% bootstrap_field form.course_topic_3 show_label=False %}
        </div>
        <div id="block_topic_4">
            {% bootstrap_field form.course_topic_4 show_label=False %}
        </div>
        <div id="block_topic_5">
            {% bootstrap_field form.course_topic_5 show_label=False %}
        </div>
        <div id="block_topic_6">
            {% bootstrap_field form.course_topic_6 show_label=False %}
        </div>
        <button type="button" id="btn-topic-add" class="btn btn-info" onclick="addTopic()">
            {% bootstrap_icon 'plus' %}&thinsp;
            {% trans 'Weiteren Absatz hinzufügen' %}
        </button>
    </div>
</div>
<div class="row">&nbsp;</div>
<div class="row">
    <div class="col-sm-12">
        <label>{% trans 'Kursziele' %}</label>
        <span class="text-muted">
            ({% trans 'Werden mehrere Felder ausgefüllt, erfolgt die Anzeige ggf. als Spiegelstrich-Liste' %})
        </span>
        <div id="block_goal_1">
            {% bootstrap_field form.course_goal_1 show_label=False %}
        </div>
        <div id="block_goal_2">
            {% bootstrap_field form.course_goal_2 show_label=False %}
        </div>
        <div id="block_goal_3">
            {% bootstrap_field form.course_goal_3 show_label=False %}
        </div>
        <div id="block_goal_4">
            {% bootstrap_field form.course_goal_4 show_label=False %}
        </div>
        <div id="block_goal_5">
            {% bootstrap_field form.course_goal_5 show_label=False %}
        </div>
        <div id="block_goal_6">
            {% bootstrap_field form.course_goal_6 show_label=False %}
        </div>
        <button type="button" id="btn-goal-add" class="btn btn-info" onclick="addGoal()">
            {% bootstrap_icon 'plus' %}&thinsp;
            {% trans 'Weiteren Absatz hinzufügen' %}
        </button>
    </div>
</div>
<div class="row">&nbsp;</div>
{% endblock form-fields-visible %}