<h3 *ngIf="isCreationMode">Internen Termin anlegen</h3>
<h3 *ngIf="!isCreationMode">Internen Termin bearbeiten</h3>
<form class="form" #internalMeetingForm="ngForm" (ngSubmit)="onFormSubmit(internalMeetingForm)">
    <div class="row row--full">
        <div class="column">
            <p class="error" *ngIf="errorMsg != ''">{{ errorMsg }}</p>
            <p class="error-msg" *ngIf="imeTitle.invalid && imeTitle.touched && imeTitle?.errors?.required">
                Betreff ist ein Pflichtfeld.
            </p>
            <p *ngIf="imeDateEnd.invalid && imeDateEnd.touched && imeDateEnd?.errors?.required" class="error-msg">
                Datum ist ein Pflichtfeld.
            </p>
            <p *ngIf="imeTimeStart.invalid && imeTimeStart.touched && imeTimeStart?.errors?.required" class="error-msg">
                Uhrzeit (Start) ist ein Pflichtfeld.
            </p>
            <p *ngIf="imeTimeEnd.invalid && imeTimeEnd.touched && imeTimeEnd?.errors?.required" class="error-msg">
                Uhrzeit (Ende) ist ein Pflichtfeld.
            </p>
            <p *ngIf="imeOwner.invalid && imeOwner.touched && imeOwner?.errors?.required" class="error-msg">
                PLP Verantwortlicher ist ein Pflichtfeld.
            </p>
        </div>
    </div>
    <div class="grid">
        <div class="grid-item">
            <div class="row">
                <div class="column">
                    <label for="imeTitle" [class.error]="imeTitle.invalid && imeTitle.touched && imeTitle?.errors?.required"><strong>Betreff*</strong></label>
                    <input type="text" [class.error]="imeTitle.invalid && imeTitle.touched && imeTitle?.errors?.required" id="imeTitle" name="imeTitle" required [(ngModel)]="internalMeeting.title"
                           placeholder="Betreff" #imeTitle="ngModel"/>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <label for="imeDateStart" [class.error]="imeDateStart.invalid && imeDateStart.touched && imeDateStart?.errors?.required"><strong>Datum (Start)*</strong></label>
                    <input type="date" [class.error]="imeDateStart.invalid && imeDateStart.touched && imeDateStart?.errors?.required" id="imeDateStart" name="imeDateStart" required [(ngModel)]="dateStart"
                           (blur)="checkDate($event)" #imeDateStart="ngModel"/>
                </div>
                <div class="column">
                    <label for="imeTimeStart" [class.error]="imeTimeStart.invalid && imeTimeStart.touched && imeTimeStart?.errors?.required"><strong>Uhrzeit (Start)*</strong></label>
                    <input type="time" [class.error]="imeTimeStart.invalid && imeTimeStart.touched && imeTimeStart?.errors?.required" id="imeTimeStart" name="imeTimeStart" required [(ngModel)]="timeStart"
                           #imeTimeStart="ngModel"/>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <label for="imeDateEnd" [class.error]="imeDateEnd.invalid && imeDateEnd.touched && imeDateEnd?.errors?.required"><strong>Datum (Ende)*</strong></label>
                    <input type="date" [class.error]="imeDateEnd.invalid && imeDateEnd.touched && imeDateEnd?.errors?.required" id="imeDateEnd" name="imeDateEnd" required [(ngModel)]="dateEnd"
                           (blur)="checkDate($event)" #imeDateEnd="ngModel"/>
                </div>
                <div class="column">
                    <label for="imeTimeEnd" [class.error]="imeTimeEnd.invalid && imeTimeEnd.touched && imeTimeEnd?.errors?.required"><strong>Uhrzeit (Ende)*</strong></label>
                    <input type="time" [class.error]="imeTimeEnd.invalid && imeTimeEnd.touched && imeTimeEnd?.errors?.required" id="imeTimeEnd" name="imeTimeEnd" required [(ngModel)]="timeEnd"
                           #imeTimeEnd="ngModel"/>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <label for="imeComment">Bemerkungen</label>
                    <textarea rows="5" cols="50" id="imeComment" name="imeComment" [(ngModel)]="internalMeeting.description" #imeComment="ngModel"></textarea>
                </div>
            </div>
        </div>
        <div class="grid-item">
            <div class="row">
                <div class="column">
                    <label for="imeOwner" [class.error]="imeOwner.invalid && imeOwner.touched && imeOwner?.errors?.required"><strong>PLP Verantwortlicher*</strong></label>
                    <select id="imeOwner" [class.error]="imeOwner.invalid && imeOwner.touched && imeOwner?.errors?.required" name="imeOwner" required (change)="selectOwner($event)" [(ngModel)]="internalMeeting.owner_user_id" #imeOwner="ngModel">
                        <option [ngValue]=null>Bitte Verantwortlichen wählen</option>
                        <option *ngFor="let u of possibleOwners" value="{{u.id}}">{{u.firstname}} {{u.lastname}}</option>
                    </select>
                </div>
                <div class="column"></div>
            </div>
            <div class="row">
                <div class="column">
                    <p class="label">Teilnehmer</p>
                </div>
            </div>
            <div class="row">
                <div class="column column--checkbox">
                    <div class="checkbox-inner-column" *ngFor="let p of participants; let i = index">
                        <input type="checkbox" id="imeParticipants{{i}}" name="imeParticipants{{i}}"
                               (change)="participantsChange($event)" [value]="p.id" [checked]="checkParticipants(p.id)" />
                        <label for="imeParticipants{{i}}">{{p.firstname}} {{p.lastname}}</label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row row--full row--last">
        <div class="column">
            <button *ngIf="isCreationMode" [disabled]="!internalMeetingForm.valid" class="button" title="Termin anlegen">Termin anlegen</button>
            <button *ngIf="!isCreationMode" [disabled]="!internalMeetingForm.valid" class="button" title="Termin bearbeiten">Termin bearbeiten</button>
        </div>
    </div>
</form>