<h4>
    <a href="javascript:history.back()"><i class="fas fa-chevron-left"></i></a>&nbsp;<%= _lc( 'EDIT_APPOINTMENT' ) %>
    <%=raw app.core.View.getTemplate( 'gui-header-help-button' ) %>
</h4>
<% var mStart = a.getMomentStart(); %>
<% var mEnd = a.getMomentEnd(); %>
<% var mDeadline = a.getMomentDeadline(); %>
<% var mReject = a.getMomentDeadlineReject(); %>
<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <form data-id="form-appointment"
                  class="needs-validation"
                  novalidate>
                <div class="card-body">
                    <input type="hidden"
                           name="appointment-id"
                           value="<%= a.getId() %>" />

                    <% var mTeam = new app.model.Group( team ) %>
                    <input type="hidden"
                           name="team-id"
                           data-id="select-team-id"
                           value="<%= mTeam.getId() %>" />

                    <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"
                               value="<%= a.getSubject() %>"
                               autocomplete="off"
                               required />
                        <div class="invalid-feedback">
                            <%= _lc( 'VALIDATION_INPUT_REQUIRED' ) %>
                        </div>
                    </div>

                    <% 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><a href="/#/course/categories/<%= mTeam.getId() %>" style="text-decoration: underline">Zur Kursverwaltung</a></small>
                                </label>
                                <select class="form-control"
                                        name="category"
                                        multiple="multiple"
                                        required="required"
                                        size="<%= ~~Math.min( 4, categories.length ) %>"
                                        data-id="select-category-<%= mTeam.getId() %>"
                                        id="select-category-<%= mTeam.getId() %>">
                                    <% var categoryIds = a.getCategoryIds(); %>
                                    <% for ( var ci = 0; ci < categories.length; ci++ ) {    %>
                                        <option value="<%= categories[ ci ].id %>"
                                                <%= ( -1 < categoryIds.indexOf( categories[ ci ].id ) ) ? 'selected="selected"' : '' %>
                                        ><%= 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>

                    <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"
                                   <%= a.getVisibility() === 'ALL' ? '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"
                                   <%= a.getVisibility() === 'CATEGORIES' ? 'checked="checked"' : '' %>
                            >
                            <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">
                            <small>
                                <em><i class="fas fa-info-circle"></i> <%= _lc( 'MAX_BOOKERS' ) %>: <span data-id="span-max-bookers">0</span></em>
                            </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="<%= mStart.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="<%= mStart.format( 'HH:mm' ) %>"
                                       class="form-control"
                                       required />
                            </div>
                        </div>
                    </div>
                    <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="<%= mEnd.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="<%= mEnd.format( 'HH:mm' ) %>"
                                       class="form-control"
                                       required />
                            </div>
                        </div>
                    </div>
                    <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="<%= mDeadline.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="<%= mDeadline.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"
                               value="<%= a.getLocation() ? a.getLocation() : '' %>"
                               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 %>"
                                                <%= ( a.getMinAttendees() == ma ) ? 'selected="selected"' : '' %>>
                                            <%= 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 %>"
                                                <%= ( a.getMaxAttendees() == ma ) ? 'selected="selected"' : '' %> >
                                            <%= ma %>
                                        </option>
                                    <% }    %>
                                </select>
                                <% if ( 0 < a.getNumAttendeesAccepted() || 0 < a.getNumAttendeesDeclined()  )   { %>

                                    <p>
                                        <small><%= _lc( 'UPDATE_APPOINTMENT_CURRENT_ATTENDEE_STATUS', [ a.getNumAttendeesAccepted(), a.getNumAttendeesWaiting() ] ) %></small>
                                    </p>

                                <% }    %>
                                <%=raw app.core.View.getTemplate( 'gui-form-help', { help : _lc( 'FORMHELP_APPOINTMENT_MAX_ATTENDEES' ) } ) %>
                            </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"><%= a.getComment() ? a.getComment() : '' %></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="<%= a.getPriceFactor() %>"
                               step="0.5"
                               class="form-control" />
                    </div>
                    <% if ( 0 < a.getNumAttendeesAccepted() || 0 < a.getNumAttendeesDeclined()  )   { %>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox my-1 mr-sm-2">
                            <input type="checkbox"
                                   name="reset-attendee-list"
                                   data-id="checkbox-reset-attendee-list"
                                   id="checkbox-reset-attendee-list"
                                   class="custom-control-input"
                            >
                            <label class="custom-control-label"
                                   for="checkbox-reset-attendee-list"><%= _lc( 'RESET_ATTENDEE_LIST' ) %></label>
                            <p>
                                <small><%= _lc( 'RESET_ATTENDEE_LIST_INFO' ) %></small>
                            </p>
                        </div>
                    </div>
                    <% }    %>
                </div>
                <div class="card-footer">
                    <a href="#/appointment/<%= a.getId() %>"
                       class="btn btn-sm btn-secondary">
                        <%= _lc( 'BTN_CANCEL' ) %>
                    </a>
                    <button type="button"
                            data-id="btn-save"
                            class="btn btn-sm btn-primary">
                        <%= _lc( 'BTN_SAVE' ) %>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>