<div [hidden]="isEditMode">
    <h3>Termin mit Produzent: {{production.name}}</h3>
    <h4>{{date}} {{timeStart}} Uhr bis {{timeEnd}} Uhr</h4>
    <h3>{{productionMeeting.title}}</h3>
    <h5>Erstellt von: {{creator.firstname}} {{creator.lastname}}</h5>
    <p *ngIf="productionMeeting.description">{{productionMeeting.description}}</p>
    <div class="grid">
        <div class="grid-item">
            <div class="grid-item">
                <dl>
                    <dt>Termin-Art:</dt>
                    <dd>{{meetingType.name}}</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>{{productionMeeting.street}} {{productionMeeting.street_no}}<br />
                            {{productionMeeting.zip}} {{productionMeeting.city}}
                            <ng-container *ngIf="productionMeeting.country_id != null"><br />{{config.vc_countries_by_id[productionMeeting.country_id]['name']}}</ng-container></dd>
                    </ng-container>
                    <dt>Gesprächspartner:</dt>
                    <dd><span *ngIf="productionMeeting.gender == 'male'">Herr </span>
                        <span *ngIf="productionMeeting.gender == 'female'">Frau </span>
                        <span *ngIf="productionMeeting.gender == 'diverse'">Divers </span>{{productionMeeting.firstname}} {{productionMeeting.lastname}}</dd>
                    <dt *ngIf="productionMeeting.department">Abteilung:</dt>
                    <dd *ngIf="productionMeeting.department">{{productionMeeting.department}}</dd>
                    <dt *ngIf="productionMeeting.email">E-Mail:</dt>
                    <dd *ngIf="productionMeeting.email"><a href="mailto:{{productionMeeting.email}}">{{productionMeeting.email}}</a></dd>
                    <dt *ngIf="productionMeeting.phone_no">Telefon:</dt>
                    <dd *ngIf="productionMeeting.phone_no"><a href="tel:{{productionMeeting.phone_no}}">{{productionMeeting.phone_no}}</a></dd>
                    <dt *ngIf="productionMeeting.mobile_no">Mobil:</dt>
                    <dd *ngIf="productionMeeting.mobile_no"><a href="tel:{{productionMeeting.mobile_no}}">{{productionMeeting.mobile_no}}</a></dd>
                    <dt *ngIf="reportOld != null && reportOld != ''">Report:</dt>
                    <dd *ngIf="reportOld != null && reportOld != ''">{{reportOld}}</dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="form"*ngIf="hasEditRights">
        <div class="row row--last">
            <div class="column">
                <div class="button button--inline" (click)="editEntry()" *ngIf="productionMeeting.v_is_editable">Eintrag bearbeiten</div>
                <div class="button button--inline" (click)="deleteEntry()" *ngIf="productionMeeting.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="production-meeting-edit-report" *ngIf="hasEditRights || appService.getAppUser().id == productionMeeting.owner_user_id">
        <form class="form" #productionMeetingReportForm="ngForm" (ngSubmit)="onFormSubmit(productionMeetingReportForm)" *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)]="productionMeeting.report" #cmdReport="ngModel"></textarea>
                </div>
            </div>
            <div class="row row--full row--last">
                <div class="column">
                    <button class="button" [disabled]="!productionMeetingReportForm.valid" title="Report speichern">Report speichern</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div [hidden]="!isEditMode">
    <div id="production-meeting-edit-modal">
        <app-production-meeting-edit #productionMeetingDetailEdit (editMeeting)="editProductionMeetingFunction($event)"></app-production-meeting-edit>
    </div>
</div>