<div [hidden]="isEditMode">
    <h3>Termin mit Kunde: {{customer.name}}</h3>
    <h4>{{date}} {{timeStart}} Uhr bis {{timeEnd}} Uhr</h4>
    <h3>{{customerMeeting.title}}</h3>
    <h5>Erstellt von: {{creator.firstname}} {{creator.lastname}}</h5>
    <p *ngIf="customerMeeting.description">{{customerMeeting.description}}</p>
    <div class="grid">
        <div class="grid-item">
            <div class="grid-item">
                <dl>
                    <dt>Termin-Art:</dt>
                    <dd>{{meetingType.name}}
                        <em *ngIf="customerMeeting.is_option_meeting"><br />Optionstermin</em>
                    </dd>
                    <dt>PLP Verantwortlicher:</dt>
                    <dd>{{owner.firstname}} {{owner.lastname}}</dd>
                    <dt>Teilnehmer:</dt>
                    <dd>
                        <ng-container *ngFor="let p of participants">
                            {{p.firstname}} {{p.lastname}}<br />
                        </ng-container>
                    </dd> <ng-container *ngIf="meetingType.type == 'visit'">
                    <dt>Adresse:</dt>
                    <dd>{{customerMeeting.street}} {{customerMeeting.street_no}}<br />
                        {{customerMeeting.zip}} {{customerMeeting.city}}
                    <ng-container *ngIf="customerMeeting.country_id != null"><br />{{config.vc_countries_by_id[customerMeeting.country_id]['name']}}</ng-container></dd></ng-container>
                    <dt>Gesprächspartner:</dt>
                    <dd><span *ngIf="customerMeeting.gender == 'male'">Herr </span>
                        <span *ngIf="customerMeeting.gender == 'female'">Frau </span>
                        <span *ngIf="customerMeeting.gender == 'diverse'">Divers </span>{{customerMeeting.firstname}} {{customerMeeting.lastname}}</dd>
                    <dt *ngIf="customerMeeting.department">Abteilung:</dt>
                    <dd *ngIf="customerMeeting.department">{{customerMeeting.department}}</dd>
                    <dt *ngIf="customerMeeting.email">E-Mail:</dt>
                    <dd *ngIf="customerMeeting.email"><a href="mailto:{{customerMeeting.email}}">{{customerMeeting.email}}</a></dd>
                    <dt *ngIf="customerMeeting.phone_no">Telefon:</dt>
                    <dd *ngIf="customerMeeting.phone_no"><a href="tel:{{customerMeeting.phone_no}}">{{customerMeeting.phone_no}}</a></dd>
                    <dt *ngIf="customerMeeting.mobile_no">Mobil:</dt>
                    <dd *ngIf="customerMeeting.mobile_no"><a href="tel:{{customerMeeting.mobile_no}}">{{customerMeeting.mobile_no}}</a></dd>
                    <dt *ngIf="reportOld != null && reportOld != ''">Report:</dt>
                    <dd *ngIf="reportOld != null && reportOld != ''">{{reportOld}}</dd>
                </dl>
            </div>
            <dl>

            </dl>
        </div>
    </div>
    <div class="form"*ngIf="hasEditRights">
        <div class="row row--last">
            <div class="column">
                <div class="button button--inline" (click)="editEntry()" *ngIf="customerMeeting.v_is_editable">Eintrag bearbeiten</div>
                <div class="button button--inline" (click)="deleteEntry()" *ngIf="customerMeeting.v_is_editable">Eintrag löschen</div>
                <div class="button button--inline" (click)="editReport()" *ngIf="hasReportRights && !reportFormVisible">Report bearbeiten</div>
            </div>
        </div>
    </div>
    <div id="customer-meeting-edit-report" *ngIf="hasEditRights || appService.getAppUser().id == customerMeeting.owner_user_id">
        <form class="form" #customerMeetingReportForm="ngForm" (ngSubmit)="onFormSubmit(customerMeetingReportForm)" *ngIf="reportFormVisible">
            <div *ngIf="errorMsg != ''" class="row row--full">
                <p class="error">{{ errorMsg }}</p>
            </div>
            <div class="row">
                <div class="column">
                    <label for="cmdReport">Bemerkungen</label>
                    <textarea rows="5" cols="50" id="cmdReport" name="cmdReport" [(ngModel)]="customerMeeting.report" #cmdReport="ngModel"></textarea>
                </div>
            </div>
            <div class="row row--full row--last">
                <div class="column">
                    <button class="button" [disabled]="!customerMeetingReportForm.valid" title="Report speichern">Report speichern</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div [hidden]="!isEditMode">
    <div id="customer-meeting-edit-modal">
        <app-customer-meeting-edit #customerMeetingDetailEdit (editMeeting)="editCustomerMeetingFunction($event)"></app-customer-meeting-edit>
    </div>
</div>