<div [hidden]="isEditMode">
    <h3>Notiz Detail</h3>
    <p>Erstellt am {{creationDate}} von {{customerNote.creation_user_firstname}}
        {{customerNote.creation_user_lastname}}</p>
    <div class="grid">
        <div class="grid-item">
            <dl>
                <dt>Datum:</dt>
                <dd>{{noteDate}}</dd>
                <dt>Betreff:</dt>
                <dd>{{customerNote.title}}</dd>
                <dt *ngIf="customerNote.lastname">Gesprächspartner:</dt>
                <dd *ngIf="customerNote.lastname"><span *ngIf="customerNote.gender == 'male'">Herr </span>
                    <span *ngIf="customerNote.gender == 'female'">Frau </span>
                    <span *ngIf="customerNote.gender == 'diverse'">Divers </span>{{customerNote.firstname}} {{customerNote.lastname}}</dd>
                <dt *ngIf="customerNote.department">Abteilung:</dt>
                <dd *ngIf="customerNote.department">{{customerNote.department}}</dd>
                <dt *ngIf="customerNote.email">E-Mail:</dt>
                <dd *ngIf="customerNote.email"><a href="mailto:{{customerNote.email}}">{{customerNote.email}}</a></dd>
                <dt *ngIf="customerNote.phone_no">Telefon:</dt>
                <dd *ngIf="customerNote.phone_no"><a href="tel:{{customerNote.phone_no}}">{{customerNote.phone_no}}</a></dd>
                <dt *ngIf="customerNote.mobile_no">Mobil:</dt>
                <dd *ngIf="customerNote.mobile_no"><a href="tel:{{customerNote.mobile_no}}">{{customerNote.mobile_no}}</a></dd>
                <dt *ngIf="customerNote.fax_no">Fax:</dt>
                <dd *ngIf="customerNote.fax_no">{{customerNote.fax_no}}</dd>
                <dt *ngIf="customerNote.comment && customerNote.comment != ''">Notiz:</dt>
                <dd class="pre-wrap" *ngIf="customerNote.comment && customerNote.comment != ''">{{customerNote.comment}}</dd>
            </dl>
        </div>
    </div>
    <div class="form">
        <div class="row row--last" *ngIf="hasSalesRights && appService.getAppUser().id === customerNote.creation_user_id">
            <div class="column">
                <div class="button button--inline" (click)="editEntry()">Eintrag bearbeiten</div>
                <div class="button button--inline" (click)="deleteEntry()">Eintrag löschen</div>
            </div>
        </div>
    </div>
</div>
<div [hidden]="!isEditMode">
    <div id="customer-note-edit-modal">
        <app-customer-note-edit #customerNoteEdit (editNote)="editCustomerNoteFunction($event)"></app-customer-note-edit>
    </div>
</div>
