{% load i18n %}

{# TODO: hide each main game type depending on what the user has selected (possible to avoid form submission of hidden things?) #}

{% if dialog %}
    <div class="inner_container">
        <p class="lead">When you are done creating a task, close the window and continue editing your task.</p>
{% endif %}

<form>
    {% csrf_token %}
<div id="course_goal_constructor" ng-app="CoursesConstruction" class="bootstrap-styles">
    <div class="col-lg-9 col-sm-9 col-md-9">

    <div class="goal_in_progress"
        ng-controller="TaskConstructorController" ng-source="/{{ URL_PREFIX }}/courses/api/goals/">

        <select class="form-control"
                id="selectToEdit"
                name="edit_goal"
                ng-change="populateGoal()"
                ng-show="!form_success"
                ng-options="g.id as g.short_name for g in existing_goals"
                ng-model="edit_goal_id">
            <option value="">{% blocktrans %}Edit an existing task{% endblocktrans %}</option>
        </select>

        <br />

        <form novalidate ng-show="results" ng-submit="submitForm()"
            id="new_goal" ng-hide="form_succcess && results" role="form">
            {% csrf_token %}
            <fieldset ng-disabled="{{ form_submitted }}">
            {# TODO: for which course? for now self-defined #}

            {# Here we define meta info, name, description, etc. #}
            <div class="row" ng-hide="form_success">
                <div class="col-md-11 col-md-offset-1">
                    <p class="lead goal_intro">
                        {% blocktrans %}
                        Create a task to track your progress on a feature of grammar.
                        {% endblocktrans %}
                    </p>
                </div>
            </div>


            <div class="row">

                <div class="col-md-1">
                    <span class="step_number">1</span>
                </div>

                <div class="col-md-11">

                    <div class="form-group" ng-show="instructor_courses">
                        <div class="">
                            <label for="goal_name" class="control-label">{% blocktrans %}Course name{% endblocktrans %}</label>
                        </div>

                        {# Loop the main set of options #}

                        <div class="">
                            <select class="form-control"
                                    id="selectCourseID"
                                    name="course_id"
                                    ng-change="reset()"
                                    ng-options="opt[0] as opt[1] for opt in instructor_courses"
                                    ng-model="user_goal.course_id">

                                <option value="">{% blocktrans %}Select a course{% endblocktrans %}</option>

                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="">
                            <label for="goal_name" class="control-label">{% blocktrans %}Task name{% endblocktrans %}</label>

                        </div>

                        {# Loop the main set of options #}

                        <div class="">
                            <input class="form-control"
                                    id="goal_name"
                                    name="goal_name"
                                    required
                                    ng-model="user_goal.short_name">
                        </div>
                    </div>

                    {% comment %}
                    <div class="form-group">
                        <div class="">
                            <label for="goal_description" class="control-label">Task description</label>
                        </div>

                        {# Loop the main set of options #}

                        <div class="">
                            <textarea class="form-control"
                                    id="goal_name"
                                    name="goal_name"
                                    required
                                    ng-model="user_goal.description">
                            </textarea>
                        </div>
                    </div>
                    {% endcomment %}

                    <div class="row">
                        <div class="col-sm-6 col-md-6">
                            <div class="form-group">
                                <div class="">
                                    <label for="goal_percent_correct"
                                        class="control-label">{% blocktrans %}Percent correct{% endblocktrans %}</label>
                                </div>

                                {# Loop the main set of options #}

                                <div class="input-group">
                                    <input class="form-control"
                                            id="goal_percent"
                                            name="goal_percent"
                                            type="number"
                                            ng-min="20"
                                            ng-max="100"
                                            required
                                            ng-model="user_goal.threshold">
                                    <span class="input-group-addon">%</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-6">
                            <div class="form-group">
                                <div class="">
                                    <label for="goal_minimum_tried"
                                        class="control-label">{% blocktrans %}Question sets achieved{% endblocktrans %}</label>
                                </div>

                                {# Loop the main set of options #}

                                <div class="input-group">
                                    <input class="form-control"
                                            id="goal_minimum_tried"
                                            name="goal_minimum_tried"
                                            type="number"
                                            ng-min="2"
                                            ng-model="user_goal.minimum_sets_attempted">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="">
                        </div>

                        {# Loop the main set of options #}

                        <div class="input-group">
                            <div class="checkbox">
                                <label>
                                    {% blocktrans %}
                                    Only count answers that are
                                    correct on the first try?
                                    {% endblocktrans %}
                                    <input class="form-control"
                                            id="goal_correct_first_try"
                                            name="goal_correct_first_try"
                                            type="checkbox"
                                            ng-model="user_goal.correct_first_try"
                                    >
                                </label>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

            {# Here's the selection for the course type #}
            <div class="row">

                <div class="col-md-1">
                    <span class="step_number">2</span>
                </div>

                <div class="col-md-11">
                    <div class="form-group">
                        <div class="">
                            <label for="selectMainType" class="control-label">{% blocktrans %}Game type{% endblocktrans %}</label>
                        </div>

                        {# Loop the main set of options #}

                        <div class="">
                            <select class="form-control"
                                    id="selectMainType"
                                    name="main_type"
                                    ng-change="reset()"
                                    ng-options="opt.value as opt.label for opt in main_types"
                                    ng-model="user_goal.main_type">

                                <option value="">{% blocktrans %}Select a type{% endblocktrans %}</option>

                            </select>
                        </div>
                    </div>
                </div>

            </div>

            {# Here's the selection for the course parameters #}
            <div class="row" ng-show="user_goal.main_type">

                <div class="col-md-1">
                    <span class="step_number">3</span>
                </div>

                <div class="col-md-11">

                    {# Loop the main set of options #}
                    <div class="form-section" 
                         ng-repeat="(key, data) in tree"
                         ng-show="user_goal.main_type == key">

                        {# each type available within the main type #}
                        {# TODO: need a subselector for each type #}

                            <select class="form-control"
                                    id="selectSubType"
                                    name="sub_type"
                                    ng-options="type.value as type.label for type in data.subtypes"
                                    ng-show="data.subtypes.length > 1"
                                    ng-model="user_goal.sub_type">

                                <option value="">{% blocktrans %}Subtype{% endblocktrans %}</option>

                            </select>

                        <div class="form-sub-section" 
                             ng-show="user_goal.sub_type == type.value"
                             ng-repeat="type in data.subtypes">

                            <h4><% type.label %></h4>

                            {# loop parameters available within the type #}
                            <div class="form-group" ng-repeat="p in type.params">

                                <div class="">
                                    <p><% option_values[p].name %></p>
                                </div>

                                {% comment %}
                                <!-- TODO: no value when not selected?
                                    also, somehow tricky when selected
                                    and unselected unselected values
                                    need to not be stored
                                -->
                                {% endcomment %}

                                <input class="form-control"
                                        id="goal_correct_first_try"
                                        ng-if="option_values[p].boolean"
                                        name="user_goal.params[p]"
                                        ng-true-value="on"
                                        type="checkbox"
                                        ng-model="user_goal.params[p]"
                                >

                                <select class="form-control"
                                        id="selectMainType"
                                        name="main_type"
                                        ng-if="option_values[p].select"
                                        ng-options="value as label for (value, label) in option_values[p].options"
                                        ng-model="user_goal.params[p]">

                                    <option value="">{% blocktrans %}Select a type{% endblocktrans %}</option>
                                </select>

                            </div>

                            <div class="form-sub-sub-section"
                                 ng-show="type.conditional">

                                <div class="form-group">
                                    <div class="col-sm-10">
                                        <div ng-repeat="additional in type.conditional"
                                             ng-show="user_goal.params[additional.key] == additional.value">

                                            <h4>Additional settings</h4>
                                             {# TODO: loop additional parameters #}
                                            <div ng-repeat="p in additional.params">
                                                <div class="">
                                                    <p><% option_values[p].name %></p>
                                                </div>

                                                <!-- TODO: no value when not selected?
                                                    also, somehow tricky when selected
                                                    and unselected unselected values
                                                    need to not be stored
                                                -->
                                                {% comment %}
                                                <input class="form-control"
                                                        id="goal_correct_first_try"
                                                        ng-if="option_values[p].boolean"
                                                        name="user_goal.params[p]"
                                                        ng-true-value="on"
                                                        ng-false-value="<% null %>"
                                                        type="checkbox"
                                                        ng-model="user_goal.params[p]"
                                                >
                                                {% endcomment %}

                                                <select class="form-control"
                                                        id="selectMainType"
                                                        name="main_type"
                                                        ng-if="option_values[p].select"
                                                        ng-options="value as label for (value, label) in option_values[p].options"
                                                        ng-model="user_goal.params[p]">

                                                    <option value="">{% blocktrans %}Select a type{% endblocktrans %}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" ng-show="user_goal.main_type">

                <div class="col-md-1">
                    <span class="step_number">&nbsp;</span>
                </div>

                <div class="col-md-11">
                    <button type="button" ng-click="submitForm()" class="btn btn-info">{% blocktrans %}Submit{% endblocktrans %}</button>
                    <button type="button" class="btn btn-warning">{% blocktrans %}Reset{% endblocktrans %}</button>
                    <button type="button" ng-click="deleteGoal()" ng-show="editing_existing" class="btn
                        btn-danger">{% blocktrans %}Delete this task{% endblocktrans %}</button>
                </div>
            </div>

            {# Form result feedback notification #}
            <div class="row">
                <div class="col-md-11 col-md-offset-1">
                    <div id="success_msg" ng-show="form_success">
                        <p ng-show="goal_deleted" class="lead">{% blocktrans %}You successfully deleted the task.{% endblocktrans %}</p>
                        <p ng-show="goal_created" class="lead">{% blocktrans %}You successfully created the task{% endblocktrans %} "<% goal.short_name %>".</p>
                        <p ng-show="goal_edited" class="lead">{% blocktrans %}You successfully edited the task{% endblocktrans %} "<% goal.short_name %>".</p>
                        <button ng-click="beginGoal()" type="button" class="btn btn-success">{% blocktrans %}Begin{% endblocktrans %}</button>
                        <button type="button" class="btn btn-info">{% blocktrans %}Course overview{% endblocktrans %}</button>
                    </div>
                </div>
            </div>
            </fieldset>
        </form>

    </div>

    </div>

</div>
</form>
{% if dialog %}
    </div>
{% endif %}