probuddy-master/src/client/app/tmpl/appointment-form.html

<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">
                    <div class="form-row">
                        <div class="col">
                            <label>
                                <%= _lc( 'APPOINTMENT_ICON' ) %>
                            </label>
                            <div class="radio-icons" id="radio-icons">
                                <p class="d-flex justify-content-between align-items-center">
                                    <span>
                                        <span class="selected-icon">Ohne</span>
                                    </span>
                                    <i class="fas fa-chevron-down"></i>
                                </p>
                                <div class="radio-icons-inner">
                                    <label for="input-subject-icon">
                                        <input type="radio" value="" name="categoryicon" id="input-subject-icon" checked />
                                        Ohne
                                    </label>
                                    <label for="input-subject-icon-wrench">
                                        <input type="radio" value="fa-wrench" name="categoryicon" id="input-subject-icon-wrench" />
                                        <i class="fas fa-wrench"></i>
                                    </label>
                                    <label for="input-subject-icon-weight">
                                        <input type="radio" value="fa-weight" name="categoryicon" id="input-subject-icon-weight" />
                                        <i class="fas fa-weight"></i>
                                    </label>
                                    <label for="input-subject-icon-walking">
                                        <input type="radio" value="fa-walking" name="categoryicon" id="input-subject-icon-walking" />
                                        <i class="fas fa-walking"></i>
                                    </label>
                                    <label for="input-subject-icon-volume-up">
                                        <input type="radio" value="fa-volume-up" name="categoryicon" id="input-subject-icon-volume-up" />
                                        <i class="fas fa-volume-up"></i>
                                    </label>
                                    <label for="input-subject-icon-video">
                                        <input type="radio" value="fa-video" name="categoryicon" id="input-subject-icon-video" />
                                        <i class="fas fa-video"></i>
                                    </label>
                                    <label for="input-subject-icon-utensils">
                                        <input type="radio" value="fa-utensils" name="categoryicon" id="input-subject-icon-utensils" />
                                        <i class="fas fa-utensils"></i>
                                    </label>
                                    <label for="input-subject-icon-user-friends">
                                        <input type="radio" value="fa-user-friends" name="categoryicon" id="input-subject-icon-user-friends" />
                                        <i class="fas fa-user-friends"></i>
                                    </label>
                                    <label for="input-subject-icon-umbrella-beach">
                                        <input type="radio" value="fa-umbrella-beach" name="categoryicon" id="input-subject-icon-umbrella-beach" />
                                        <i class="fas fa-umbrella-beach"></i>
                                    </label>
                                    <label for="input-subject-icon-trophy">
                                        <input type="radio" value="fa-trophy" name="categoryicon" id="input-subject-icon-trophy" />
                                        <i class="fas fa-trophy"></i>
                                    </label>
                                    <label for="input-subject-icon-tree">
                                        <input type="radio" value="fa-tree" name="categoryicon" id="input-subject-icon-tree" />
                                        <i class="fas fa-tree"></i>
                                    </label>
                                    <label for="input-subject-icon-toolbox">
                                        <input type="radio" value="fa-toolbox" name="categoryicon" id="input-subject-icon-toolbox" />
                                        <i class="fas fa-toolbox"></i>
                                    </label>
                                    <label for="input-subject-icon-thumbtack">
                                        <input type="radio" value="fa-thumbtack" name="categoryicon" id="input-subject-icon-thumbtack" />
                                        <i class="fas fa-thumbtack"></i>
                                    </label>
                                    <label for="input-subject-icon-tags">
                                        <input type="radio" value="fa-tags" name="categoryicon" id="input-subject-icon-tags" />
                                        <i class="fas fa-tags"></i>
                                    </label>
                                    <label for="input-subject-icon-tachometer-alt">
                                        <input type="radio" value="fa-tachometer-alt" name="categoryicon" id="input-subject-icon-tachometer-alt" />
                                        <i class="fas fa-tachometer-alt"></i>
                                    </label>
                                    <label for="input-subject-icon-swimmer">
                                        <input type="radio" value="fa-swimmer" name="categoryicon" id="input-subject-icon-swimmer" />
                                        <i class="fas fa-swimmer"></i>
                                    </label>
                                    <label for="input-subject-icon-surprise">
                                        <input type="radio" value="fa-surprise" name="categoryicon" id="input-subject-icon-surprise" />
                                        <i class="fas fa-surprise"></i>
                                    </label>
                                    <label for="input-subject-icon-street-view">
                                        <input type="radio" value="fa-street-view" name="categoryicon" id="input-subject-icon-street-view" />
                                        <i class="fas fa-street-view"></i>
                                    </label>
                                    <label for="input-subject-icon-stopwatch">
                                        <input type="radio" value="fa-stopwatch" name="categoryicon" id="input-subject-icon-stopwatch" />
                                        <i class="fas fa-stopwatch"></i>
                                    </label>
                                    <label for="input-subject-icon-star">
                                        <input type="radio" value="fa-star" name="categoryicon" id="input-subject-icon-star" />
                                        <i class="fas fa-star"></i>
                                    </label>
                                    <label for="input-subject-icon-smile-wink">
                                        <input type="radio" value="fa-smile-wink" name="categoryicon" id="input-subject-icon-smile-wink" />
                                        <i class="fas fa-smile-wink"></i>
                                    </label>
                                    <label for="input-subject-icon-shuttle-van">
                                        <input type="radio" value="fa-shuttle-van" name="categoryicon" id="input-subject-icon-shuttle-van" />
                                        <i class="fas fa-shuttle-van"></i>
                                    </label>
                                    <label for="input-subject-icon-shopping-cart">
                                        <input type="radio" value="fa-shopping-cart" name="categoryicon" id="input-subject-icon-shopping-cart" />
                                        <i class="fas fa-shopping-cart"></i>
                                    </label>
                                    <label for="input-subject-icon-running">
                                        <input type="radio" value="fa-running" name="categoryicon" id="input-subject-icon-running" />
                                        <i class="fas fa-running"></i>
                                    </label>
                                    <label for="input-subject-icon-rocket">
                                        <input type="radio" value="fa-rocket" name="categoryicon" id="input-subject-icon-rocket" />
                                        <i class="fas fa-rocket"></i>
                                    </label>
                                    <label for="input-subject-icon-recycle">
                                        <input type="radio" value="fa-recycle" name="categoryicon" id="input-subject-icon-recycle" />
                                        <i class="fas fa-recycle"></i>
                                    </label>
                                    <label for="input-subject-icon-question-circle">
                                        <input type="radio" value="fa-question-circle" name="categoryicon" id="input-subject-icon-question-circle" />
                                        <i class="fas fa-question-circle"></i>
                                    </label>
                                    <label for="input-subject-icon-puzzle-piece">
                                        <input type="radio" value="fa-puzzle-piece" name="categoryicon" id="input-subject-icon-puzzle-piece" />
                                        <i class="fas fa-puzzle-piece"></i>
                                    </label>
                                    <label for="input-subject-icon-poll">
                                        <input type="radio" value="fa-poll" name="categoryicon" id="input-subject-icon-poll" />
                                        <i class="fas fa-poll"></i>
                                    </label>
                                    <label for="input-subject-icon-plus-circle">
                                        <input type="radio" value="fa-plus-circle" name="categoryicon" id="input-subject-icon-plus-circle" />
                                        <i class="fas fa-plus-circle"></i>
                                    </label>
                                    <label for="input-subject-icon-play-circle">
                                        <input type="radio" value="fa-play-circle" name="categoryicon" id="input-subject-icon-play-circle" />
                                        <i class="fas fa-play-circle"></i>
                                    </label>
                                    <label for="input-subject-icon-phone-square">
                                        <input type="radio" value="fa-phone-square" name="categoryicon" id="input-subject-icon-phone-square" />
                                        <i class="fas fa-phone-square"></i>
                                    </label>
                                    <label for="input-subject-icon-pepper-hot">
                                        <input type="radio" value="fa-pepper-hot" name="categoryicon" id="input-subject-icon-pepper-hot" />
                                        <i class="fas fa-pepper-hot"></i>
                                    </label>
                                    <label for="input-subject-icon-paw">
                                        <input type="radio" value="fa-paw" name="categoryicon" id="input-subject-icon-paw" />
                                        <i class="fas fa-paw"></i>
                                    </label>
                                    <label for="input-subject-icon-paper-plane">
                                        <input type="radio" value="fa-paper-plane" name="categoryicon" id="input-subject-icon-paper-plane" />
                                        <i class="fas fa-paper-plane"></i>
                                    </label>
                                    <label for="input-subject-icon-motorcycle">
                                        <input type="radio" value="fa-motorcycle" name="categoryicon" id="input-subject-icon-motorcycle" />
                                        <i class="fas fa-motorcycle"></i>
                                    </label>
                                    <label for="input-subject-icon-mobile">
                                        <input type="radio" value="fa-mobile" name="categoryicon" id="input-subject-icon-mobile" />
                                        <i class="fas fa-mobile"></i>
                                    </label>
                                    <label for="input-subject-icon-medal">
                                        <input type="radio" value="fa-medal" name="categoryicon" id="input-subject-icon-medal" />
                                        <i class="fas fa-medal"></i>
                                    </label>
                                    <label for="input-subject-icon-map-signs">
                                        <input type="radio" value="fa-map-signs" name="categoryicon" id="input-subject-icon-map-signs" />
                                        <i class="fas fa-map-signs"></i>
                                    </label>
                                    <label for="input-subject-icon-map-marked">
                                        <input type="radio" value="fa-map-marked" name="categoryicon" id="input-subject-icon-map-marked" />
                                        <i class="fas fa-map-marked"></i>
                                    </label>
                                    <label for="input-subject-icon-male">
                                        <input type="radio" value="fa-male" name="categoryicon" id="input-subject-icon-male" />
                                        <i class="fas fa-male"></i>
                                    </label>
                                    <label for="input-subject-icon-female">
                                        <input type="radio" value="fa-female" name="categoryicon" id="input-subject-icon-female" />
                                        <i class="fas fa-female"></i>
                                    </label>
                                    <label for="input-subject-icon-magic">
                                        <input type="radio" value="fa-magic" name="categoryicon" id="input-subject-icon-magic" />
                                        <i class="fas fa-magic"></i>
                                    </label>
                                    <label for="input-subject-icon-lock">
                                        <input type="radio" value="fa-lock" name="categoryicon" id="input-subject-icon-lock" />
                                        <i class="fas fa-lock"></i>
                                    </label>
                                    <label for="input-subject-icon-lock-open">
                                        <input type="radio" value="fa-lock-open" name="categoryicon" id="input-subject-icon-lock-open" />
                                        <i class="fas fa-lock-open"></i>
                                    </label>
                                    <label for="input-subject-icon-laugh">
                                        <input type="radio" value="fa-laugh" name="categoryicon" id="input-subject-icon-laugh" />
                                        <i class="fas fa-laugh"></i>
                                    </label>
                                    <label for="input-subject-icon-layer-group">
                                        <input type="radio" value="fa-layer-group" name="categoryicon" id="input-subject-icon-layer-group" />
                                        <i class="fas fa-layer-group"></i>
                                    </label>
                                    <label for="input-subject-icon-key">
                                        <input type="radio" value="fa-key" name="categoryicon" id="input-subject-icon-key" />
                                        <i class="fas fa-key"></i>
                                    </label>
                                    <label for="input-subject-icon-info-circle">
                                        <input type="radio" value="fa-info-circle" name="categoryicon" id="input-subject-icon-info-circle" />
                                        <i class="fas fa-info-circle"></i>
                                    </label>
                                    <label for="input-subject-icon-horse">
                                        <input type="radio" value="fa-horse" name="categoryicon" id="input-subject-icon-horse" />
                                        <i class="fas fa-horse"></i>
                                    </label>
                                    <label for="input-subject-icon-home">
                                        <input type="radio" value="fa-home" name="categoryicon" id="input-subject-icon-home" />
                                        <i class="fas fa-home"></i>
                                    </label>
                                    <label for="input-subject-icon-hiking">
                                        <input type="radio" value="fa-hiking" name="categoryicon" id="input-subject-icon-hiking" />
                                        <i class="fas fa-hiking"></i>
                                    </label>
                                    <label for="input-subject-icon-heart">
                                        <input type="radio" value="fa-heart" name="categoryicon" id="input-subject-icon-heart" />
                                        <i class="fas fa-heart"></i>
                                    </label>
                                    <label for="input-subject-icon-helicopter">
                                        <input type="radio" value="fa-helicopter" name="categoryicon" id="input-subject-icon-helicopter" />
                                        <i class="fas fa-helicopter"></i>
                                    </label>
                                    <label for="input-subject-icon-handshake">
                                        <input type="radio" value="fa-handshake" name="categoryicon" id="input-subject-icon-handshake" />
                                        <i class="fas fa-handshake"></i>
                                    </label>
                                    <label for="input-subject-icon-hand-holding-usd">
                                        <input type="radio" value="fa-hand-holding-usd" name="categoryicon" id="input-subject-icon-hand-holding-usd" />
                                        <i class="fas fa-hand-holding-usd"></i>
                                    </label>
                                    <label for="input-subject-icon-hand-holding-medical">
                                        <input type="radio" value="fa-hand-holding-medical" name="categoryicon" id="input-subject-icon-hand-holding-medical" />
                                        <i class="fas fa-hand-holding-medical"></i>
                                    </label>
                                    <label for="input-subject-icon-hand-holding-heart">
                                        <input type="radio" value="fa-hand-holding-heart" name="categoryicon" id="input-subject-icon-hand-holding-heart" />
                                        <i class="fas fa-hand-holding-heart"></i>
                                    </label>
                                    <label for="input-subject-icon-hammer">
                                        <input type="radio" value="fa-hammer" name="categoryicon" id="input-subject-icon-hammer" />
                                        <i class="fas fa-hammer"></i>
                                    </label>
                                    <label for="input-subject-icon-globe">
                                        <input type="radio" value="fa-globe" name="categoryicon" id="input-subject-icon-globe" />
                                        <i class="fas fa-globe"></i>
                                    </label>
                                    <label for="input-subject-icon-glass-cheers">
                                        <input type="radio" value="fa-glass-cheers" name="categoryicon" id="input-subject-icon-glass-cheers" />
                                        <i class="fas fa-glass-cheers"></i>
                                    </label>
                                    <label for="input-subject-icon-ghost">
                                        <input type="radio" value="fa-ghost" name="categoryicon" id="input-subject-icon-ghost" />
                                        <i class="fas fa-ghost"></i>
                                    </label>
                                    <label for="input-subject-icon-futbol">
                                        <input type="radio" value="fa-futbol" name="categoryicon" id="input-subject-icon-futbol" />
                                        <i class="fas fa-futbol"></i>
                                    </label>
                                    <label for="input-subject-icon-fish">
                                        <input type="radio" value="fa-fish" name="categoryicon" id="input-subject-icon-fish" />
                                        <i class="fas fa-fish"></i>
                                    </label>
                                    <label for="input-subject-icon-fire-alt">
                                        <input type="radio" value="fa-fire-alt" name="categoryicon" id="input-subject-icon-fire-alt" />
                                        <i class="fas fa-fire-alt"></i>
                                    </label>
                                    <label for="input-subject-icon-fan">
                                        <input type="radio" value="fa-fan" name="categoryicon" id="input-subject-icon-fan" />
                                        <i class="fas fa-fan"></i>
                                    </label>
                                    <label for="input-subject-icon-eye">
                                        <input type="radio" value="fa-eye" name="categoryicon" id="input-subject-icon-eye" />
                                        <i class="fas fa-eye"></i>
                                    </label>
                                    <label for="input-subject-icon-exclamation-circle">
                                        <input type="radio" value="fa-exclamation-circle" name="categoryicon" id="input-subject-icon-exclamation-circle" />
                                        <i class="fas fa-exclamation-circle"></i>
                                    </label>
                                    <label for="input-subject-icon-euro-sign">
                                        <input type="radio" value="fa-euro-sign" name="categoryicon" id="input-subject-icon-euro-sign" />
                                        <i class="fas fa-euro-sign"></i>
                                    </label>
                                    <label for="input-subject-icon-envelope">
                                        <input type="radio" value="fa-envelope" name="categoryicon" id="input-subject-icon-envelope" />
                                        <i class="fas fa-envelope"></i>
                                    </label>
                                    <label for="input-subject-icon-dot-circle">
                                        <input type="radio" value="fa-dot-circle" name="categoryicon" id="input-subject-icon-dot-circle" />
                                        <i class="fas fa-dot-circle"></i>
                                    </label>
                                    <label for="input-subject-icon-dollar-sign">
                                        <input type="radio" value="fa-dollar-sign" name="categoryicon" id="input-subject-icon-dollar-sign" />
                                        <i class="fas fa-dollar-sign"></i>
                                    </label>
                                    <label for="input-subject-icon-dog">
                                        <input type="radio" value="fa-dog" name="categoryicon" id="input-subject-icon-dog" />
                                        <i class="fas fa-dog"></i>
                                    </label>
                                    <label for="input-subject-icon-directions">
                                        <input type="radio" value="fa-directions" name="categoryicon" id="input-subject-icon-directions" />
                                        <i class="fas fa-directions"></i>
                                    </label>
                                    <label for="input-subject-icon-concierge-bell">
                                        <input type="radio" value="fa-concierge-bell" name="categoryicon" id="input-subject-icon-concierge-bell" />
                                        <i class="fas fa-concierge-bell"></i>
                                    </label>
                                    <label for="input-subject-icon-compass">
                                        <input type="radio" value="fa-compass" name="categoryicon" id="input-subject-icon-compass" />
                                        <i class="fas fa-compass"></i>
                                    </label>
                                    <label for="input-subject-icon-comments">
                                        <input type="radio" value="fa-comments" name="categoryicon" id="input-subject-icon-comments" />
                                        <i class="fas fa-comments"></i>
                                    </label>
                                    <label for="input-subject-icon-coffee">
                                        <input type="radio" value="fa-coffee" name="categoryicon" id="input-subject-icon-coffee" />
                                        <i class="fas fa-coffee"></i>
                                    </label>
                                    <label for="input-subject-icon-cloud">
                                        <input type="radio" value="fa-cloud" name="categoryicon" id="input-subject-icon-cloud" />
                                        <i class="fas fa-cloud"></i>
                                    </label>
                                    <label for="input-subject-icon-child">
                                        <input type="radio" value="fa-child" name="categoryicon" id="input-subject-icon-child" />
                                        <i class="fas fa-child"></i>
                                    </label>
                                    <label for="input-subject-icon-cat">
                                        <input type="radio" value="fa-cat" name="categoryicon" id="input-subject-icon-cat" />
                                        <i class="fas fa-cat"></i>
                                    </label>
                                    <label for="input-subject-icon-certificate">
                                        <input type="radio" value="fa-certificate" name="categoryicon" id="input-subject-icon-certificate" />
                                        <i class="fas fa-certificate"></i>
                                    </label>
                                    <label for="input-subject-icon-car">
                                        <input type="radio" value="fa-car" name="categoryicon" id="input-subject-icon-car" />
                                        <i class="fas fa-car"></i>
                                    </label>
                                    <label for="input-subject-icon-calendar-alt">
                                        <input type="radio" value="fa-calendar-alt" name="categoryicon" id="input-subject-icon-calendar-alt" />
                                        <i class="fas fa-calendar-alt"></i>
                                    </label>
                                    <label for="input-subject-icon-bus">
                                        <input type="radio" value="fa-bus" name="categoryicon" id="input-subject-icon-bus" />
                                        <i class="fas fa-bus"></i>
                                    </label>
                                    <label for="input-subject-icon-bullhorn">
                                        <input type="radio" value="fa-bullhorn" name="categoryicon" id="input-subject-icon-bullhorn" />
                                        <i class="fas fa-bullhorn"></i>
                                    </label>
                                    <label for="input-subject-icon-bookmark">
                                        <input type="radio" value="fa-bookmark" name="categoryicon" id="input-subject-icon-bookmark" />
                                        <i class="fas fa-bookmark"></i>
                                    </label>
                                    <label for="input-subject-icon-bolt">
                                        <input type="radio" value="fa-bolt" name="categoryicon" id="input-subject-icon-bolt" />
                                        <i class="fas fa-bolt"></i>
                                    </label>
                                    <label for="input-subject-icon-biking">
                                        <input type="radio" value="fa-biking" name="categoryicon" id="input-subject-icon-biking" />
                                        <i class="fas fa-biking"></i>
                                    </label>
                                    <label for="input-subject-icon-baby-carriage">
                                        <input type="radio" value="fa-baby-carriage" name="categoryicon" id="input-subject-icon-baby-carriage" />
                                        <i class="fas fa-baby-carriage"></i>
                                    </label>
                                    <label for="input-subject-icon-award">
                                        <input type="radio" value="fa-award" name="categoryicon" id="input-subject-icon-award" />
                                        <i class="fas fa-award"></i>
                                    </label>
                                    <label for="input-subject-icon-arrow-alt-circle-up">
                                        <input type="radio" value="fa-arrow-alt-circle-up" name="categoryicon" id="input-subject-icon-arrow-alt-circle-up" />
                                        <i class="fas fa-arrow-alt-circle-up"></i>
                                    </label>
                                    <label for="input-subject-icon-arrow-alt-circle-down">
                                        <input type="radio" value="fa-arrow-alt-circle-down" name="categoryicon" id="input-subject-icon-arrow-alt-circle-down" />
                                        <i class="fas fa-arrow-alt-circle-down"></i>
                                    </label>
                                    <label for="input-subject-icon-arrow-alt-circle-right">
                                        <input type="radio" value="fa-arrow-alt-circle-right" name="categoryicon" id="input-subject-icon-arrow-alt-circle-right" />
                                        <i class="fas fa-arrow-alt-circle-right"></i>
                                    </label>
                                    <label for="input-subject-icon-arrow-alt-circle-left">
                                        <input type="radio" value="fa-arrow-alt-circle-left" name="categoryicon" id="input-subject-icon-arrow-alt-circle-left" />
                                        <i class="fas fa-arrow-alt-circle-left"></i>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row">
                        <div class="col">
                            <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>
                    </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>