<h4>
    <a href="javascript:history.back()"><i class="fas fa-chevron-left"></i></a>&nbsp;<%= _lc( 'CREATE_APPOINTMENT' ) %>
    <%=raw app.core.View.getTemplate( 'gui-header-help-button' ) %>
</h4>
<% var mNow = moment().add( '1', 'days' ); mNow.minute( 0 ).second( 0 ); %>
<% var mReject = mNow.clone(); mReject.subtract( '1', 'days' ); %>
<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col">

                    </div>
                </div>
            <form data-id="form-appointment"
                  class="needs-validation"
                  novalidate>
                <div class="form-group">
                    <div class="form-row">
                        <div class="col">
                            <label for="select-team-id">
                                <%= _lc( 'APPOINTMENT_FOR_TEAM' ) %>
                            </label>
                            <select class="form-control"
                                    name="team-id"
                                    data-id="select-team-id"
                                    id="select-team-id">
                                <% for ( var gi = 0; gi < groups.length; gi++ ) {    %>
                                    <option value="<%= groups[ gi ].getId() %>"><%= groups[ gi ].getName() %></option>
                                <% }    %>
                            </select>
                            <div class="invalid-feedback">
                                <%= _lc( 'VALIDATION_APPOINTMENT_MIN_ATTENDEE' ) %>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="input-subject">
                        <%= _lc( 'APPOINTMENT_SUBJECT' ) %>
                    </label>
                    <input type="text"
                           minlength="3"
                           maxlength="255"
                           name="subject"
                           data-id="input-subject"
                           id="input-subject"
                           class="form-control"
                           autocomplete="off"
                           required />
                    <div class="invalid-feedback">
                        <%= _lc( 'VALIDATION_INPUT_REQUIRED' ) %>
                    </div>
                </div>

                <% for ( var gi = 0; gi < groups.length; gi++ ) {    %>

                    <% mTeam = groups[ gi ]; %>

                    <section data-id="section-category-selection-<%= mTeam.getId() %>"
                             data-type="section-category-selection"
                             style="display: <%= ( gi === 0 ) ? 'block' : 'none' %>">

                        <% var categories = mTeam.getAdminCourseCategoriesForProfile( currentProfile ); %>
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col">
                                    <label for="select-category-<%= mTeam.getId() %>">
                                        <%= _lc( 'APPOINTMENT_CATEGORY' ) %> <small>(<%= _lc( 'APPOINTMENT_CATEGORY_MULTIPLE_SELECTION_POSSIBLE' ) %>)</small>
                                    </label>
                                    <select class="form-control"
                                            name="category"
                                            multiple
                                            size="<%= ~~Math.min( 4, categories.length ) %>"
                                            data-id="select-category-<%= mTeam.getId() %>"
                                            id="select-category-<%= mTeam.getId() %>">
                                        <% for ( var ci = 0; ci < categories.length; ci++ ) {    %>
                                            <option value="<%= categories[ ci ].id %>"><%= categories[ ci ].name %></option>
                                        <% }    %>
                                    </select>
                                    <div class="invalid-feedback">
                                        <%= _lc( 'VALIDATION_SELECT_AT_LEAST_ONE_CATEGORY' ) %>
                                    </div>
                                </div>
                            </div>
                            <%=raw app.core.View.getTemplate( 'gui-form-help', { help : _lc( 'FORMHELP_APPOINTMENT_CATEGORY' ) } ) %>
                            <% if ( 0 === categories.length )   {   %>
                            <div class="alert alert-warning" role="alert">
                                <%= _lc( 'APPOINTMENT_CATEGORIES_MISSING_FOR_ADMIN' ) %>
                            </div>
                            <% }    %>
                        </div>

                    </section>

                <% }    %>

                <div class="form-group">
                    <label><%= _lc( 'APPOINTMENT_VISIBLE_FOR' ) %></label><br />
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio"
                               id="input-visibility-all"
                               data-id="input-visibility-all"
                               name="input-visibility"
                               value="visibility-all"
                               class="custom-control-input"
                               checked="checked"
                        >
                        <label class="custom-control-label"
                               for="input-visibility-all"><%= _lc( 'APPOINTMENT_VISIBLE_FOR_ALL' ) %></label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio"
                               id="input-visibility-category_only"
                               data-id="input-visibility-category_only"
                               name="input-visibility"
                               value="visibility-category-only"
                               class="custom-control-input">
                        <label class="custom-control-label"
                               for="input-visibility-category_only"><%= _lc( 'APPOINTMENT_VISIBLE_FOR_CATEGORY_ONLY' ) %></label>
                    </div>
                    <div data-id="max-bookers" style="display: none; margin-left: 22px">
                        <small>
                            <%= _lc( 'MAX_BOOKERS' ) %>: <span data-id="span-max-bookers">0</span>
                        </small>
                    </div>
                </div>

                    <div class="form-group">
                        <div class="form-row">
                            <div class="col">
                                <label for="input-start-date">
                                    <%= _lc( 'APPOINTMENT_START_DATE' ) %>
                                </label>
                                <input type="date"
                                       id="input-start-date"
                                       data-id="input-start-date"
                                       name="start-date"
                                       class="form-control"
                                       value="<%= mNow.format( 'YYYY-MM-DD' ) %>"
                                       required />
                                <div class="invalid-feedback">
                                    <%= _lc( 'VALIDATION_APPOINTMENT_STARTTIME_CANNOT_BE_IN_PAST' ) %>
                                </div>
                            </div>
                            <div class="col">
                                <label for="input-start-time">
                                    <%= _lc( 'APPOINTMENT_START_TIME' ) %>
                                </label>
                                <input type="time"
                                       id="input-start-time"
                                       data-id="input-start-time"
                                       name="start-time"
                                       value="<%= mNow.format( 'HH:mm' ) %>"
                                       class="form-control"
                                        required />
                            </div>
                        </div>
                    </div>
                    <% mNow.add( 1, 'hours' ) %>
                    <div class="form-group">
                        <div class="form-row">
                            <div class="col">
                                <label for="input-end-date">
                                    <%= _lc( 'APPOINTMENT_END_DATE' ) %>
                                </label>
                                <input type="date"
                                       id="input-end-date"
                                       data-id="input-end-date"
                                       name="end-date"
                                       class="form-control"
                                       value="<%= mNow.format( 'YYYY-MM-DD' ) %>"
                                       required />
                                <div class="invalid-feedback">
                                    <%= _lc( 'VALIDATION_APPOINTMENT_ENDTIME_CANNOT_BE_BEFORE_STARTTIME' ) %>
                                </div>
                            </div>
                            <div class="col">
                                <label for="input-end-time">
                                    <%= _lc( 'APPOINTMENT_END_TIME' ) %>
                                </label>
                                <input type="time"
                                       id="input-end-time"
                                       data-id="input-end-time"
                                       name="end-time"
                                       value="<%= mNow.format( 'HH:mm' ) %>"
                                       class="form-control"
                                       required />
                            </div>
                        </div>
                    </div>
                    <% mNow.subtract( 1, 'hours' ) %>
                    <div class="form-group">
                        <div class="form-row">
                            <div class="col">
                                <label for="input-deadline-date">
                                    <%= _lc( 'APPOINTMENT_DEADLINE_DATE' ) %>
                                </label>
                                <input type="date"
                                       id="input-deadline-date"
                                       data-id="input-deadline-date"
                                       name="deadline-date"
                                       class="form-control"
                                       value="<%= mNow.format( 'YYYY-MM-DD' ) %>"
                                       required />
                                <div class="invalid-feedback">
                                    <%= _lc( 'VALIDATION_APPOINTMENT_DEADLINE_CANNOT_BE_AFTER_STARTTIME' ) %>
                                </div>
                            </div>
                            <div class="col">
                                <label for="input-end-time">
                                    <%= _lc( 'APPOINTMENT_DEADLINE_TIME' ) %>
                                </label>
                                <input type="time"
                                       id="input-deadline-time"
                                       data-id="input-deadline-time"
                                       name="deadline-time"
                                       value="<%= mNow.format( 'HH:mm' ) %>"
                                       class="form-control"
                                       required />
                            </div>
                        </div>
                        <%=raw app.core.View.getTemplate( 'gui-form-help', { help : _lc( 'FORMHELP_APPOINTMENT_DEADLINE' ) } ) %>
                    </div>
                    <div class="form-group">
                        <div class="form-row">
                            <div class="col">
                                <label for="input-deadline-reject-date">
                                    <%= _lc( 'APPOINTMENT_DEADLINE_REJECT_DATE' ) %>
                                </label>
                                <input type="date"
                                       id="input-deadline-reject-date"
                                       data-id="input-deadline-reject-date"
                                       name="deadline-date"
                                       class="form-control"
                                       value="<%= mReject.format( 'YYYY-MM-DD' ) %>"
                                       required />
                                <div class="invalid-feedback">
                                    <%= _lc( 'GENERAL_VALIDATION_REQUIRED' ) %>
                                </div>
                            </div>
                            <div class="col">
                                <label for="input-deadline-reject-time">
                                    <%= _lc( 'APPOINTMENT_DEADLINE_REJECT_TIME' ) %>
                                </label>
                                <input type="time"
                                       id="input-deadline-reject-time"
                                       data-id="input-deadline-reject-time"
                                       name="deadline-time"
                                       value="<%= mReject.format( 'HH:mm' ) %>"
                                       class="form-control"
                                       required />
                                <div class="invalid-feedback">
                                    <%= _lc( 'GENERAL_VALIDATION_REQUIRED' ) %>
                                </div>
                            </div>
                        </div>
                        <%=raw app.core.View.getTemplate( 'gui-form-help', { help : _lc( 'FORMHELP_APPOINTMENT_DEADLINE_REJECT' ) } ) %>
                    </div>
                    <div class="form-group">
                        <label for="input-location">
                            <%= _lc( 'APPOINTMENT_LOCATION' ) %>
                        </label>
                        <input type="text"
                               maxlength="256"
                               data-id="input-location"
                               id="input-location"
                               autocomplete="off"
                               class="form-control" />
                    </div>
                    <div class="form-group">
                        <div class="form-row">
                            <!--
                            <div class="col">
                                <label for="select-min-attendee">
                                    <%= _lc( 'APPOINTMENT_MIN_ATTENDEE' ) %>
                                </label>
                                <select class="form-control"
                                        name="min-attendee"
                                        data-id="select-min-attendee"
                                        id="select-min-attendee">
                                    <option value="0"><%= _lc( 'DOESNT_MATTER' ) %></option>
                                    <% for ( var ma = 1; ma <= 500; ma++ ) { %>
                                        <option value="<%= ma %>"><%= ma %></option>
                                    <% }    %>
                                </select>
                                <div class="invalid-feedback">
                                    <%= _lc( 'VALIDATION_APPOINTMENT_MIN_ATTENDEE' ) %>
                                </div>
                            </div>
                            -->
                            <div class="col">
                                <label for="select-max-attendee">
                                    <%= _lc( 'APPOINTMENT_MAX_ATTENDEE' ) %>
                                </label>
                                <select class="form-control"
                                        name="max-attendee"
                                        data-id="select-max-attendee"
                                        id="select-max-attendee">
                                    <option value="0"><%= _lc( 'DOESNT_MATTER' ) %></option>
                                    <% for ( var ma = 1; ma <= 500; ma++ ) { %>
                                        <option value="<%= ma %>"><%= ma %></option>
                                    <% }    %>
                                </select>
                                <div class="invalid-feedback">
                                    <%= _lc( 'VALIDATION_APPOINTMENT_MAX_ATTENDEE' ) %>
                                </div>
                                <%=raw app.core.View.getTemplate( 'gui-form-help', { help : _lc( 'FORMHELP_APPOINTMENT_MAX_ATTENDEES' ) } ) %>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label><%= _lc( 'APPOINTMENT_FREQUENCY' ) %></label><br />
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio"
                                   id="input-frequency-single"
                                   data-id="input-frequency-single"
                                   name="input-frequency"
                                   value="frequency-single"
                                   class="custom-control-input"
                                   checked="checked"
                            >
                            <label class="custom-control-label"
                                   for="input-frequency-single"><%= _lc( 'APPOINTMENT_SINGLE' ) %></label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio"
                                   id="input-frequency-multiple"
                                   data-id="input-frequency-multiple"
                                   name="input-frequency"
                                   value="frequency-multiple"
                                   class="custom-control-input">
                            <label class="custom-control-label"
                                   for="input-frequency-multiple"><%= _lc( 'APPOINTMENT_MULTIPLE' ) %></label>
                        </div>
                    </div>
                    <div class="collapse"
                         data-id="collapse-frequency-details"
                         id="collapse-frequency-details">
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col">
                                    <label for="select-frequency-unit">
                                        <%= _lc( 'APPOINTMENT_FREQUENCY_UNIT' ) %>
                                    </label>
                                    <select class="form-control"
                                            name="frequency-unit"
                                            data-id="select-frequency-unit"
                                            id="select-frequency-unit">
                                        <option value="daily"><%= _lc( 'APPOINTMENT_FREQUENCY_DAILY' ) %></option>
                                        <option value="weekly"><%= _lc( 'APPOINTMENT_FREQUENCY_WEEKLY' ) %></option>
                                        <option value="twoweek"><%= _lc( 'APPOINTMENT_FREQUENCY_TWO_WEEK' ) %></option>
                                        <option value="monthly"><%= _lc( 'APPOINTMENT_FREQUENCY_MONTHLY' ) %></option>
                                        <option value="yearly"><%= _lc( 'APPOINTMENT_FREQUENCY_YEARLY' ) %></option>
                                    </select>
                                </div>
                                <div class="col">
                                    <label for="select-frequency-num-repetition">
                                        <%= _lc( 'APPOINTMENT_FREQUENCY_NUM_REPETITION' ) %>
                                    </label>
                                    <select class="form-control"
                                            name="frequency-num-repetition"
                                            data-id="select-frequency-num-repetition"
                                            id="select-frequency-num-repetition">
                                        <% for ( var rpi = 1; rpi < 53; rpi++ ) {   %>
                                            <option value="<%= rpi %>"><%= rpi %></option>
                                        <% }    %>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="textarea-comment">
                            <%= _lc( 'APPOINTMENT_ADDITIONAL_NOTES' ) %>
                        </label>
                        <textarea id="textarea-comment"
                                  data-id="textarea-comment"
                                  class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="input-location">
                            Abrechnungsfaktor
                        </label>
                        <input type="number"
                               min="0"
                               data-id="input-price-factor"
                               id="input-price-factor"
                               value="1"
                               step="0.5"
                               class="form-control" />
                    </div>
                    <hr />
                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox"
                                   id="appointment-state"
                                   data-id="checkbox-appointment-state"
                                   class="custom-control-input"
                            />
                            <label class="custom-control-label"
                                   for="appointment-state"
                                   style="vertical-align: top;"><%= _lc( 'DIRECTLY_PUBLISH_APPOINTMENT' ) %></label>
                        </div>
                        <%=raw app.core.View.getTemplate( 'gui-form-help', { help : _lc( 'FORMHELP_APPOINTMENT_PUBLISH_DIRECTLY' ) } ) %>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="javascript:history.back()"
                       class="btn btn-sm btn-secondary">
                        <%= _lc( 'BTN_CANCEL' ) %>
                    </a>
                    <button type="button"
                            data-id="btn-create"
                            class="btn btn-sm btn-primary">
                        <%= _lc( 'BTN_CREATE' ) %>
                    </button>
                </div>
            </form>
        </div>
        </div>
    </div>
</div>