<h3 *ngIf="isCreationMode">Service-Dienstleister-Termin anlegen</h3>
<h3 *ngIf="!isCreationMode">Service-Dienstleister-Termin bearbeiten</h3>
<form class="form" #serviceMeetingForm="ngForm" (ngSubmit)="onFormSubmit(serviceMeetingForm)">
    <div class="row row--full">
        <div class="column">
            <p class="error" *ngIf="errorMsg != ''">{{ errorMsg }}</p>
            <p class="error-msg" *ngIf="cmeTitle.invalid && cmeTitle.touched && cmeTitle?.errors?.required">
                Betreff ist ein Pflichtfeld.
            </p>
            <p *ngIf="cmeDate.invalid && cmeDate.touched && cmeDate?.errors?.required" class="error-msg">
                Datum ist ein Pflichtfeld.
            </p>
            <p *ngIf="cmeTimeStart.invalid && cmeTimeStart.touched && cmeTimeStart?.errors?.required" class="error-msg">
                Uhrzeit (Start) ist ein Pflichtfeld.
            </p>
            <p *ngIf="cmeTimeEnd.invalid && cmeTimeEnd.touched && cmeTimeEnd?.errors?.required" class="error-msg">
                Uhrzeit (Ende) ist ein Pflichtfeld.
            </p>
            <p *ngIf="cmeMeetingType.invalid && cmeMeetingType.touched && cmeMeetingType?.errors?.required" class="error-msg">
                Termin-Art ist ein Pflichtfeld.
            </p>
            <p *ngIf="cmeOwner.invalid && cmeOwner.touched && cmeOwner?.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="cmeTitle" [class.error]="cmeTitle.invalid && cmeTitle.touched && cmeTitle?.errors?.required"><strong>Betreff*</strong></label>
                    <input type="text" [class.error]="cmeTitle.invalid && cmeTitle.touched && cmeTitle?.errors?.required" id="cmeTitle" name="cmeTitle" required [(ngModel)]="serviceMeeting.title"
                           placeholder="Betreff" #cmeTitle="ngModel"/>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <label for="cmeDate" [class.error]="cmeDate.invalid && cmeDate.touched && cmeDate?.errors?.required"><strong>Datum*</strong></label>
                    <input type="date" [class.error]="cmeDate.invalid && cmeDate.touched && cmeDate?.errors?.required" id="cmeDate" name="cmeDate" required [(ngModel)]="startDate"
                           (blur)="checkDate($event)" #cmeDate="ngModel"/>
                </div>
                <div class="column">
                    <label for="cmeTimeStart" [class.error]="cmeTimeStart.invalid && cmeTimeStart.touched && cmeTimeStart?.errors?.required"><strong>Uhrzeit (Start)*</strong></label>
                    <input type="time" [class.error]="cmeTimeStart.invalid && cmeTimeStart.touched && cmeTimeStart?.errors?.required" id="cmeTimeStart" name="cmeTimeStart" required [(ngModel)]="timeStart"
                           #cmeTimeStart="ngModel"/>
                </div>
                <div class="column">
                    <label for="cmeTimeEnd" [class.error]="cmeTimeEnd.invalid && cmeTimeEnd.touched && cmeTimeEnd?.errors?.required"><strong>Uhrzeit (Ende)*</strong></label>
                    <input type="time" [class.error]="cmeTimeEnd.invalid && cmeTimeEnd.touched && cmeTimeEnd?.errors?.required" id="cmeTimeEnd" name="cmeTimeEnd" required [(ngModel)]="timeEnd"
                           #cmeTimeEnd="ngModel"/>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <label for="cmeMeetingType" [class.error]="cmeMeetingType.invalid && cmeMeetingType.touched && cmeMeetingType?.errors?.required"><strong>Termin-Art*</strong></label>
                    <select id="cmeMeetingType" [class.error]="cmeMeetingType.invalid && cmeMeetingType.touched && cmeMeetingType?.errors?.required" name="cmeMeetingType" required (change)="selectMeetingType($event)" [(ngModel)]="serviceMeeting.meeting_type_id" #cmeMeetingType="ngModel">
                        <option [ngValue]=null>Bitte Termin-Art wählen</option>
                        <option *ngFor="let m of meetingTypes" value="{{m.id}}">{{m.name}}</option>
                    </select>
                </div>
                <div class="column">
                </div>
            </div>
            <ng-container *ngIf="serviceMeeting.meeting_type_id == 2">
                <div class="row">
                    <div class="column">
                        <label for="cmeStreet">Straße</label>
                        <input type="text" id="cmeStreet" name="cmeStreet" [(ngModel)]="serviceMeeting.street"
                               placeholder="Musterstraße" #cmeStreet="ngModel"/>
                    </div>
                    <div class="column">
                        <label for="cmeStreetNo">Hausnummer</label>
                        <input type="text" id="cmeStreetNo" name="cmeStreetNo" [(ngModel)]="serviceMeeting.street_no"
                               placeholder="1a" #cmeStreetNo="ngModel"/>
                    </div>
                </div>
                <div class="row">
                    <div class="column">
                        <label for="cmeZip">PLZ</label>
                        <input type="text" id="cmeZip" name="cmeZip" [(ngModel)]="serviceMeeting.zip"
                               placeholder="12345" #cmeZip="ngModel"/>
                    </div>
                    <div class="column">
                        <label for="cmeCity">Ort</label>
                        <input type="text" id="cmeCity" name="cmeCity" [(ngModel)]="serviceMeeting.city"
                               placeholder="Musterstadt" #cmeCity="ngModel"/>
                    </div>
                </div>
                <div class="row">
                    <div class="column">
                        <label for="cmeCountry">Land</label>
                        <select id="cmeCountry" name="cmeCountry" [(ngModel)]="serviceMeeting.country_id" #cmeCountry="ngModel">
                            <option [ngValue]=null>Land wählen</option>
                            <option *ngFor="let c of config.countries" value="{{ c.id }}">{{ c.name }}</option>
                        </select>
                    </div>
                    <div class="column"></div>
                </div>
            </ng-container>
            <div class="row">
                <div class="column">
                    <label for="cmeComment">Bemerkungen</label>
                    <textarea rows="5" cols="50" id="cmeComment" name="cmeComment" [(ngModel)]="serviceMeeting.description" #cmeComment="ngModel"></textarea>
                </div>
            </div>
        </div>
        <div class="grid-item">
            <div class="row">
                <div class="column">
                    <label for="cmeOwner" [class.error]="cmeOwner.invalid && cmeOwner.touched && cmeOwner?.errors?.required"><strong>PLP Verantwortlicher*</strong></label>
                    <select id="cmeOwner" [class.error]="cmeOwner.invalid && cmeOwner.touched && cmeOwner?.errors?.required" name="cmeOwner" required (change)="selectOwner($event)" [(ngModel)]="serviceMeeting.owner_user_id" #cmeOwner="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="cmeParticipants{{i}}" name="cmeParticipants{{i}}"
                               (change)="participantsChange($event)" [value]="p.id" [checked]="checkParticipants(p.id)" />
                        <label for="cmeParticipants{{i}}">{{p.firstname}} {{p.lastname}}</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <label for="cmeContactPerson">Gesprächspartner</label>
                    <select id="cmeContactPerson" name="cmeContactPerson" (change)="selectContact($event)" [(ngModel)]="serviceMeeting.service_contact_id">
                        <option value="-1">Kein Gesprächspartner</option>
                        <option value="0">- Individuell -</option>
                        <option *ngFor="let c of serviceContacts" value="{{c.id}}">{{c.firstname}} {{c.lastname}}</option>
                    </select>
                </div>
                <div class="column">
                    <div *ngIf="serviceMeeting.service_contact_id != -1">
                        <label for="cmeGender">Anrede</label>
                        <select id="cmeGender" name="cmeGender" [(ngModel)]="serviceMeeting.gender" #cmeGender="ngModel" [disabled]="isExistingServiceContact" >
                            <option [ngValue]=null>Anrede wählen</option>
                            <option value="male">Herr</option>
                            <option value="female">Frau</option>
                            <option value="diverse">Divers</option>
                        </select>
                    </div>
                </div>
            </div>
            <div *ngIf="serviceMeeting.service_contact_id != -1">
                <div class="row">
                    <div class="column">
                        <label for="cmeFirstname">Vorname</label>
                        <input type="text" id="cmeFirstname" name="cmeFirstname" [(ngModel)]="serviceMeeting.firstname" #cmeFirstname="ngModel"
                               placeholder="Brigitte" [disabled]="isExistingServiceContact" />
                    </div>
                    <div class="column">
                        <label for="cmeLastname">Nachname</label>
                        <input type="text" id="cmeLastname" name="cmeLastname" [(ngModel)]="serviceMeeting.lastname"
                               #cmeLastname="ngModel" placeholder="Mustermann" [disabled]="isExistingServiceContact" />
                    </div>
                </div>
                <div class="row">
                    <div class="column">
                        <label for="cmeDepartment">Abteilung</label>
                        <input type="text" id="cmeDepartment" name="cmeDepartment" [(ngModel)]="serviceMeeting.department" #cmeDepartment="ngModel"
                               placeholder="Marketing" [disabled]="isExistingServiceContact" />
                    </div>
                    <div class="column">
                        <label for="cmeEmail">E-Mail</label>
                        <input type="email" id="cmeEmail" name="cmeEmail" [(ngModel)]="serviceMeeting.email" #cmeEmail="ngModel"
                               placeholder="b.mustermann@musterfirma.de" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" [disabled]="isExistingServiceContact" />
                    </div>
                </div>
                <div class="row">
                    <div class="column">
                        <label for="cmePhoneNo">Telefon</label>
                        <input type="text" id="cmePhoneNo" name="cmePhoneNo" [(ngModel)]="serviceMeeting.phone_no" #cmePhoneNo="ngModel"
                               placeholder="040-1234567" [disabled]="isExistingServiceContact" />
                    </div>
                    <div class="column">
                        <label for="cmeMobileNo">Mobil</label>
                        <input type="text" id="cmeMobileNo" name="cmeMobileNo" [(ngModel)]="serviceMeeting.mobile_no" #cmeMobileNo="ngModel"
                               placeholder="0177-1234567" [disabled]="isExistingServiceContact" />
                    </div>
                </div>
            </div>
        </div>
    </div>

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