{% load custom_tags_and_filters %}
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">New training event: {{ tool }}</h4>
</div>
<div class="modal-body">
    <input type="hidden" id="dialog_cancelled" value="true">
    {% if form.non_field_errors %}
        <div class="alert alert-danger">
            Oops! Something went wrong. The training event was not created because:
            <br>
            {{ form.non_field_errors }}
        </div>
    {% endif %}
    <form id="additional_event_parameters" class="form-horizontal" onsubmit="return false">
        <input type="hidden" name="training_configured" value="true">
        <div class="form-group">
            <label class="control-label col-sm-3 col-md-2">Start time:</label>
            <div class="col-sm-5 col-md-4 form-control-static">{{ start | input_date_format }}</div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 col-md-2 control-label" for="location">Location</label>
            <div class="col-sm-5 col-md-4">
                <input class="form-control"
                       name="location"
                       id="location"
                       value="{{ form.location.value|default_if_none:'' }}"
                       type="text">
            </div>
            {% if form.location.errors %}
                <div class="col-sm-offset-3 col-md-offset-2 col-sm-9 col-md-10 form-control-static danger-highlight">
                    {{ form.location.errors|striptags }}
                </div>
            {% endif %}
        </div>
        {% if training_details.techniques.all %}
            <div class="form-group">
                <label class="col-sm-3 col-md-2 control-label" for="technique">Technique</label>
                <div class="col-sm-5 col-md-4">
                    <select class="form-control"
                            name="technique"
                            id="technique"
                            onchange="$('#message').val($(this).find('option:selected').data('description'));auto_size_textarea($('#message')[0], 2)">
                        <option value="">{{ "training"|customization:"training_technique_empty_label" }}</option>
                        {% for technique in training_details.techniques.all %}
                            <option label="{{ technique.name }}"
                                    data-description="{{ technique.description|default_if_none:''|escape }}"
                                    value="{{ technique.id }}"
                                    {% if form.technique.value|to_int == technique.id %}selected{% endif %}></option>
                        {% endfor %}
                    </select>
                </div>
                {% if form.technique.errors %}
                    <div class="col-sm-offset-3 col-md-offset-2 col-sm-9 col-md-10 form-control-static danger-highlight">
                        {{ form.technique.errors|striptags }}
                    </div>
                {% endif %}
            </div>
        {% endif %}
        <div class="form-group">
            <label class="col-sm-3 col-md-2 control-label" for="auto_cancel">Auto cancel</label>
            <div class="col-sm-5 col-md-4">
                <input class="form-control"
                       name="auto_cancel"
                       id="auto_cancel"
                       value="{{ form.auto_cancel.value|input_date_format }}"
                       type="text">
                if no users registered before.
            </div>
            {% if form.auto_cancel.errors %}
                <div class="col-sm-offset-3 col-md-offset-2 col-sm-9 col-md-10 form-control-static danger-highlight">
                    {{ form.auto_cancel.errors|striptags }}
                </div>
            {% endif %}
        </div>
        <div class="form-group">
            <label class="col-sm-3 col-md-2 control-label" for="duration">Duration</label>
            <div class="col-sm-5 col-md-4">
                <div class="input-group">
                    <input class="form-control"
                           name="duration"
                           id="duration"
                           type="number"
                           min="15"
                           value="{{ form.duration.value|default_if_none:'' }}"
                           required>
                    <span class="input-group-addon">minutes</span>
                </div>
            </div>
            {% if form.duration.errors %}
                <div class="col-sm-offset-3 col-md-offset-2 col-sm-9 col-md-10 form-control-static danger-highlight">
                    {{ form.duration.errors|striptags }}
                </div>
            {% endif %}
        </div>
        <div class="form-group">
            <label class="col-sm-3 col-md-2 control-label" for="capacity">Capacity</label>
            <div class="col-sm-5 col-md-4">
                <div class="input-group">
                    <input class="form-control"
                           name="capacity"
                           id="capacity"
                           type="number"
                           min="1"
                           value="{{ form.capacity.value|default_if_none:'' }}"
                           required>
                    <span class="input-group-addon">attendees</span>
                </div>
            </div>
            {% if form.capacity.errors %}
                <div class="col-sm-offset-3 col-md-offset-2 col-sm-9 col-md-10 form-control-static danger-highlight">
                    {{ form.capacity.errors|striptags }}
                </div>
            {% endif %}
        </div>
        <div class="form-group">
            <label class="col-sm-3 col-md-2 control-label" for="invitation_only">Invitation only</label>
            <div class="col-sm-5">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="invitation_only"
                               id="invitation_only"
                               {% if form.invitation_only.value %}checked{% endif %}>
                        Only invited users can register
                    </label>
                </div>
            </div>
            {% if form.invitation_only.errors %}
                <div class="col-sm-offset-3 col-md-offset-2 col-sm-9 col-md-10 form-control-static danger-highlight">
                    {{ form.invitation_only.errors|striptags }}
                </div>
            {% endif %}
        </div>
        {% if form.instance.id and form.instance.users.all %}
            <div class="form-group">
                <label class="control-label col-sm-3 col-md-2" for="_search">Attendees</label>
                <div id="registered-user-list" class="col-sm-9 form-control-static">
                    No users have registered for this training yet.
                </div>
            </div>
        {% endif %}
        <div class="form-group">
            <label class="control-label col-sm-3 col-md-2" for="invited_search">Invitations</label>
            <div class="col-sm-5 col-md-4">
                <input id="invited_search" type="text" autocomplete="off" class="form-control" placeholder="Invite users">
            </div>
        </div>
        <div class="form-group">
            <div id="invited-user-list" class="col-sm-offset-3 col-md-offset-2 col-sm-5">
                No users have been invited to this training yet.
            </div>
            {% if suggested_users %}
                <div id="suggested_users_container" class="col-sm-4">
                    <div class="visible-xs" style="margin-top: 20px"></div>
                    <div style="text-align: right; margin-top: -40px">
                        <div style="text-decoration: underline;margin-bottom: 5px">Suggested users:</div>
                        <div id="suggested_users">
                            {% for user in suggested_users %}
                                <div>
                                    <span onclick="add_invited_user('{{ user }}', '{{ user.id }}');$(this).closest('div').remove();if ($.trim($('#suggested_users').html()).length === 0){$('#suggested_users_container').remove()}"
                                          title="Add this user to the list of invited users"><span class="grey glyphicon glyphicon-chevron-left"></span> {{ user.get_name }}</span>
                                    <br>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
        {% if form.fields.qualification_levels.queryset %}
            <div class="form-group">
                <label class="control-label col-sm-3 col-md-2" for="qualification_levels_search">Required qualification</label>
                <div class="col-sm-9 col-md-10">
                    <div class="form-group col-sm-7 col-md-5">
                        <input id="qualification_levels_search"
                               type="text"
                               autocomplete="off"
                               class="form-control"
                               placeholder="Qualification levels">
                    </div>
                    <div id="qualification-levels-list" style="margin-left: -15px;" class="col-sm-12">
                        No prior qualifications needed for this training.
                    </div>
                </div>
            </div>
        {% endif %}
        <div class="form-group {% if form.message.errors %}has-error{% endif %}">
            <label class="control-label col-sm-3 col-md-2" for="message">Message</label>
            <div class="col-sm-8 col-md-6">
                <textarea id="message"
                          oninput="auto_size_textarea(this)"
                          name="message"
                          class="form-control"
                          placeholder="Add a optional message for the users">{{ form.message.value|default_if_none:"" }}</textarea>
            </div>
            {% if form.message.errors %}
                <div class="col-sm-offset-3 col-md-offset-2 col-sm-9 col-md-10 form-control-static danger-highlight">
                    {{ form.message.errors|striptags }}
                </div>
            {% endif %}
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3 col-md-2">Recurrence</label>
            <div class="col-sm-9 col-md-10">
                <div class="checkbox">
                    <a id="recurring_training_link"
                       onclick="toggle_details(this)"
                       data-toggle="collapse"
                       data-target="#recurrence"
                       class="pointer"
                       style="text-decoration: none">
                        <input type="hidden" name="recurring_training" value="" />
                        <input type="checkbox"
                               id="recurring_training"
                               name="recurring_training"
                               style="margin-left: 0"
                               {% if form.recurring_training.value %}checked{% endif %} />
                    </a>
                    <label for="recurring_training">Create more than one occurrence of this training</label>
                </div>
            </div>
            <div id="recurrence" class="collapse {{ form.recurring_training.value|yesno:"in," }}">
                <div class="col-md-offset-2 col-sm-12 col-md-10" style="padding-top: 15px">
                    <div class="row">
                        <div class="col-sm-2">
                            <label for="recurrence_interval">Every</label>
                            <input id="recurrence_interval"
                                   name="recurrence_interval"
                                   type="number"
                                   class="form-control"
                                   min="1"
                                   value="{{ form.recurrence_interval.value|default_if_none:'1' }}" />
                            {% if form.recurrence_interval.errors %}
                                <span class="danger-highlight">{{ form.recurrence_interval.errors|striptags }}</span>
                            {% endif %}
                        </div>
                        <div class="col-sm-6">
                            <label for="recurrence_frequency">Frequency</label>
                            <select class="form-control" name="recurrence_frequency" id="recurrence_frequency" required>
                                {% for choice in recurrence_intervals %}
                                    <option value="{{ choice.0 }}"
                                            {% if form.recurrence_frequency.value == choice.0|stringformat:'i' %}selected{% endif %}>
                                        {{ choice.1 }}
                                    </option>
                                {% endfor %}
                            </select>
                            {% if form.recurrence_frequency.errors %}
                                <span class="danger-highlight">{{ form.recurrence_frequency.errors|striptags }}</span>
                            {% endif %}
                        </div>
                        <div class="col-sm-4">
                            <label for="recurrence_until">Until</label>
                            <input type="text"
                                   id="recurrence_until"
                                   name="recurrence_until"
                                   class="form-control select-date"
                                   value="{{ form.recurrence_until.value|input_date_format }}"
                                   placeholder="Choose a date">
                            {% if form.recurrence_until.errors %}
                                <span class="danger-highlight">{{ form.recurrence_until.errors|striptags }}</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <div class="row">
        <div class="col-sm-offset-3 col-md-offset-2 col-sm-9 col-md-10 text-left">
            {% button type="save" submit=False dismiss="modal" onclick="$('#dialog_cancelled').val(false);" value="Confirm" %}
        </div>
    </div>
</div>
<script>
	$("#qualification_levels_search").autocomplete('qualification_levels', select_qualification_level, {{ form.fields.qualification_levels.queryset|json_search_base }}, true, true);
	function select_qualification_level(jquery_event, search_selection, dataset_name)
	{
		$(this).typeahead('val', '').focus();
		add_qualification_level(search_selection.name, search_selection.id);
	}
	function add_qualification_level(qualification_level_name, qualification_level_name_id)
	{
		add_to_list("#qualification-levels-list", "remove_qualification_level", qualification_level_name_id, qualification_level_name, "Remove this qualification level from the list", "qualification_levels");
	}
	function remove_qualification_level(qualification_level_id)
	{
		remove_from_list("#qualification-levels-list", "#qualification_levels_" + qualification_level_id, '<input type="hidden" value="" name="qualification_levels">No prior qualifications needed for this training.');
	}
	$("#invited_search").autocomplete('users', select_invited_user, '{% url 'user_for_training_search' %}', true);
	function select_invited_user(jquery_event, search_selection, dataset_name)
	{
		$(this).typeahead('val', '').focus();
		add_invited_user(search_selection.name, search_selection.id);
	}
	function add_invited_user(user_name, user_id)
	{
		add_to_list("#invited-user-list", "remove_invited_user", user_id, user_name, "Remove this user from the list of invited users", "user_ids_to_invite");
	}
	function remove_invited_user(user_id)
	{
		remove_from_list("#invited-user-list", "#user_ids_to_invite_" + user_id, '<input type="hidden" value="" name="user_ids_to_invite">No users have been invited to this training yet.');
	}
	{% for qualification_level in selected_qualification_levels %}
		add_qualification_level('{{ qualification_level.name }}', '{{ qualification_level.id }}');
	{% endfor %}
	{% for invitee in selected_invitees %}
		add_invited_user('{{ invitee }}', '{{ invitee.id }}');
	{% endfor %}
	let timepicker_properties =
    {
        format: '{{ datetime_input_js_format }}',
        showClose: true,
        sideBySide: true,
        useCurrent: false
    };
    let auto_cancel_jq = $("#auto_cancel");
    auto_cancel_jq.datetimepicker(timepicker_properties);
	$('#recurrence_until').datetimepicker({
		format: '{{ date_input_js_format }}',
		useCurrent: false,
		maxDate: moment('{{ recurrence_date_start|input_date_format }}', '{{ date_input_js_format }}').add({{ calendar_training_recurrence_limit }}, 'days').toDate(),
		minDate: moment('{{ recurrence_date_start|input_date_format }}', '{{ date_input_js_format }}')
    });
	$('#dialog .modal-dialog').addClass('modal-lg');
</script>
