<%
    var isMatch = data.appointment.subject ? false : true;
    var isOver = ( data.appointment.starttime < TB.Utils.getUnixTimestamp() ) ? true : false;
%>
<div class="row">
    <div class="col-md-12">
        <h3>Details</h3>
    </div>
</div>

<form role="form" method="post" id="form_appointment_edit">
    <input type="hidden" name="id" value="<%= data.appointment.id %>" />

    <% if ( isMatch ) { %>

        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="form-group">
                    <label for="id_nr">ID Nummer</label>
                    <input type="text"
                           name="id_nr"
                           id="id_nr"
                           class="form-control"
                           <%= isOver ? 'disabled' : '' %>
                           value="<%= data.appointment.id_nr%>"
                        />
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="form-group">
                    <label for="home">Heim</label>
                    <input type="text"
                           name="home"
                           id="home"
                           class="form-control"
                           data-validate="required"
                           data-validate-errormsg="Bitte Namen des Heim Teams angeben."
                            <%= isOver ? 'disabled' : '' %>
                           value="<%= data.appointment.home %>"
                        />
                </div>
            </div>
            <div class="col-md-6 col-sm-12">
                <div class="form-group">
                    <label for="guest">Gast</label>
                    <input type="text"
                           name="guest"
                           id="guest"
                           class="form-control"
                           data-validate="required"
                           data-validate-errormsg="Bitte Namen des Gast Teams angeben."
                            <%= isOver ? 'disabled' : '' %>
                           value="<%= data.appointment.guest%>"
                        />
                </div>
            </div>
        </div>
    <%  } else {    %>

        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="subject">Grund</label>
                    <input type="text"
                           name="subject"
                           id="subject"
                           class="form-control"
                            <%= isOver ? 'disabled' : '' %>
                           data-validate="required"
                           data-validate-errormsg="Bitte Grund des Trefens angeben."
                           value="<%= data.appointment.subject%>"
                        />
                </div>
            </div>
        </div>
    <% }    %>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="starttime">Startzeit</label>
                <input type="text"
                       id="starttime"
                       name="starttime"
                       class="form-control"
                       value="<%= TB.Utils.getDatetimeStringFromUnixTimestamp( data.appointment.starttime ) %>"
                       <%= ( isOver ) ? 'disabled' : '' %>
                       data-datetimepicker="true"
                        data-validate="requiredDatetime"
                        data-validate-mintime="<%= new Date().getTime() %>"
                        data-validate-errormsg="Bitte gebe die Startzeit im folgenden Format ein: TT.MM.YYYY SS:MM. Die Startzeit muss in der Zukunft liegen."
                    />

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

    <div class="form-group">
        <label for="feedback_deadline">Zusagefrist</label>&nbsp;<span class="span-premium"><i class="glyphicon glyphicon-star"></i></span><br />
        <small>Gibt an, bis wieviel Minuten vor Terminstart das Gruppenmitglied zu- oder absagen kann. Gilt nicht für Coaches und Co-Coaches.</small>
        <div class="input-group">
            <input type="text"
                   name="feedback_deadline"
                   id="feedback_deadline"
                   class="form-control"
                   data-validate="requiredNumber"
                   data-minvalue="0"
                   data-validate-errormsg="Die Zusagefrist muss mindestens 0 sein."
                   value="<%= data.appointment.feedback_deadline %>"
                    <%= ( false === TB.Premium.isPremium() || isOver ) ? 'disabled="disabled"' : '' %>
            />
            <span class="input-group-addon">Minuten</span>
        </div>
    </div>
    <div class="form-group">
        <label for="feedback_deadline_notice">Hinweistext nach Fristablauf</label>&nbsp;<span class="span-premium"><i class="glyphicon glyphicon-star"></i></span><br />
        <small>Wird angezeigt, wenn jemand nach Firstablauf, zu- oder absagen möchte.</small>
        <input type="text"
               name="feedback_deadline_notice"
               id="feedback_deadline_notice"
               class="form-control"
               value="<%= data.appointment.feedback_deadline_notice %>"
                <%= ( false === TB.Premium.isPremium() || isOver ) ? 'disabled="disabled"' : '' %>
        />
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="duration">Dauer</label>
                <div class="input-group">
                    <input type="text"
                           name="duration"
                           id="duration"
                           class="form-control"
                           value="<%= data.appointment.duration %>"
                        <%= isOver ? 'disabled' : '' %>
                            data-validate="requiredNumber"
                            data-minvalue="1"
                           data-validate-errormsg="Bitte eine Dauer von mindestens 1 Minute angeben."
                        />
                    <span class="input-group-addon">Minuten</span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="subject">Ort (Optional)</label>
                <input type="text"
                       name="location"
                       id="location"
                       class="form-control"
                <%= isOver ? 'disabled' : '' %>
                value="<%= data.appointment.location %>"
                />
            </div>
        </div>
    </div>

    <% if ( data.attendees.length > 0 ) {   %>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label class="for-custom-radio" for="reset-attendees">Bestehende Zu-/Absagen</label>
                <label class="radiochecklabel radio-inline">
                    <div>
                        <input class="radiocheck" type="radio" name="reset-attendees" value="leave" checked="checked" />Bisherige Zu/Absagen behalten
                        <div class="check">
                            <div class="inside"></div>
                        </div>
                    </div>
                </label>
                <label class="radiochecklabel radio-inline">
                    <div>
                        <input class="radiocheck" type="radio" name="reset-attendees" value="reset" />Bisherige Zu/Absagen löschen
                        <div class="check">
                            <div class="inside"></div>
                        </div>
                    </div>
                </label>
            </div>
            <div class="alert alert-warning" role="alert">
                <i class="glyphicon glyphicon-warning-sign"></i> Einige Buddies haben schon zu diesem Termin zu- oder abgesagt. Bitte entscheide, ob du die bisherigen Zu- oder Absagen behalten möchtest, oder nicht.
            </div>
        </div>
    </div>

    <% }    %>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="comment">Kommentar</label>
                <textarea type="text"
                          name="comment"
                          id="comment"
                            <%= isOver ? 'disabled' : '' %>
                          class="form-control"
                    ><%= data.appointment.comment%></textarea>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <button type="button"
                        id="btn_update_appointment_cancel"
                        class="btn btn-danger btn-block">
                    <i class="glyphicon glyphicon-ban-circle"></i>&nbsp;Abbrechen
                </button>
            </div>
            <div class="col-md-6 col-sm-12">
                <button type="submit"
                        id="btn_update_appointment"
                    <%= isOver ? 'disabled' : '' %>
                        data-style="zoom-in"
                        data-size="l"
                        class="btn btn-success btn-block ladda-button">
                <i class="glyphicon glyphicon-floppy-disk"></i>&nbsp;Änderungen speichern
                </button>
            </div>
        </div>
    </div>
</form>