matsen-tool-fe/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html

<div class="card">
    <div class="card-body row">
        <div class="col-8">
            <h1>{{contact.firstName}} {{contact.lastName}}</h1>
            <dl>
                <dt>Position:</dt>
                <dd>{{contact.position}}</dd>
                <dt>Telefon:</dt>
                <dd>{{contact.phone}}</dd>
                <dt>E-Mail:</dt>
                <dd><a href="mailto:{{contact.email}}">{{contact.email}}</a></dd>
                <dt>Geburtstag:</dt>
                <dd>{{contact.birthday | date:'dd.MM.YYYY'}}</dd>
            </dl>
        </div>
        <div class="col-4">
            <img *ngIf="contact.imageUrl !== null" src="{{environment.basePath}}{{contact.imageUrl}}" width="247" height="94"
                 alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}" />
        </div>
    </div>
</div>

<div class="posts">
    <div class="d-flex justify-content-between align-items-start">
        <h2>Notizen</h2>
        <button>Neue Notiz</button>
    </div>
    <div class="post mb-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <p>12.10.2023</p>
                    <p>Jan Hansen</p>
                </div>
                <div>
                    <h3>Neues Tool nutzen</h3>
                    <p>Immer alles hier rein schreiben!</p>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-end">
            <a routerLink="#" class="badge bg-secondary">Kommentieren</a>
        </div>
    </div>
    <div class="post mb-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <p>01.10.2023</p>
                    <p>Jan Hansen</p>
                </div>
                <div>
                    <h3>Konditionen</h3>
                    <p>Wir gewähren immer 10% Rabatt bei Bestellungen über 20.000 €.</p>
                </div>
            </div>
        </div>
        <div class="card ms-5">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <p>02.10.2023</p>
                    <p>Daniel Knudsen</p>
                </div>
                <div>
                    <p>Achja! Gut zu wissen!</p>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-end">
            <a routerLink="#" class="badge bg-secondary">Kommentieren</a>
        </div>
    </div>
    <div class="post mb-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <p>12.09.2023</p>
                    <p>Florian Eisenmenger</p>
                </div>
                <div>
                    <h3>Ausland - Schwer erreichbar</h3>
                    <p>Peter Müller ist der Chef, aber schwer erreichbar. Am besten Mobil probieren!</p>
                </div>
            </div>
        </div>
        <div class="card ms-5">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <p>04.10.2023</p>
                    <p>Jan Hansen</p>
                </div>
                <div>
                    <p>Leider geht er mobil selten dran. Eher E-Mails schicken!</p>
                </div>
            </div>
        </div>
        <div class="card ms-5">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <p>02.10.2023</p>
                    <p>Florian Eisenmenger</p>
                </div>
                <div>
                    <p>Ich habe mit FAX die besten Erfahrungen gemacht...</p>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-end">
            <a routerLink="#" class="badge bg-secondary">Kommentieren</a>
        </div>
    </div>
    <mat-paginator class="mb-4"
                   [length]="postsLength"
                   (page)="postsHandlePageEvent($event)"
                   [pageSize]="postsPageSize"
                   [pageIndex]="postsPageIndex"
                   showFirstLastButtons>
    </mat-paginator>
</div>