enerport-web-app/src/app/pages/project-details/project-details.html

<div class="flex flex-wrap items-center justify-between gap-4">
    <div class="flex items-center gap-2">
        <div class="mb-5">
            <h1 >Projekt Details</h1>
            <h4>{{ projectDetailsDTO.name }}</h4>
            <p class="my-4 text-lg text-gray-500">Erstellt: {{ projectDetailsDTO.createdAt | date: 'dd.MM.yyyy HH:mm' }}</p>
        </div>
    </div>
    <p-button label="Bearbeiten" class="p-button-outlined">
        <span class="flex items-center gap-2">
            <span class="material-icons !text-base">edit_document</span>
        </span>
    </p-button>
</div>


<div class="grid grid-cols-12 gap-8 mb-8">
    <div class="col-span-12 lg:col-span-6 xl:col-span-6">
        <!-- project information -->
        <p-panel class="mb-8">
            <ng-template #header>
                <div class="flex items-center gap-2">
                    <span class="material-icons !text-md">apartment</span>
                    <span class="font-bold text-2xl">Projektinformationen</span>
                </div>
            </ng-template>


            <div class="grid grid-cols-12 gap-8">
                <div class="col-span-12 lg:col-span-6 xl:col-span-6">
                    <div class="mb-8">
                        <span class="font-bold">Projektname</span>
                        <p>{{ projectDetailsDTO?.name }}</p>
                    </div>

                    <div class="mb-8">
                        <span class="font-bold">Status</span>
                        <p>{{ projectDetailsDTO?.status }}</p>
                    </div>

                    <div class="mb-8">
                        <span class="font-bold">Beantragte Summe</span>
                        <p>{{ projectDetailsDTO?.amountRequested | currency: 'EUR' }}</p>
                    </div>

                    <div class="mb-8">
                        <span class="font-bold">Startdatum</span>
                        <p><span class="material-icons !text-base">calendar_today</span> {{ projectDetailsDTO?.startDate | date }}</p>
                    </div>
                </div>

                <div class="col-span-12 lg:col-span-6 xl:col-span-6">
                    <div class="mb-8">
                        <span class="font-bold">Vorgangsnummer</span>
                        <p>{{ projectDetailsDTO?.eventNumber }}</p>
                    </div>

                    <div class="mb-8">
                        <span class="font-bold">Projekt Typ</span>
                        <p>{{ projectDetailsDTO?.projectType }}</p>
                    </div>

                    <div class="mb-8">
                        <span class="font-bold">Gebäude</span>
                        <p><span class="material-icons !text-base">location_on</span> {{ projectDetailsDTO?.address }}</p>
                    </div>

                    <div class="mb-8">
                        <span class="font-bold">Enddatum</span>
                        <p><span class="material-icons !text-base">calendar_today</span> {{ projectDetailsDTO?.endDate | date }}</p>
                    </div>
                </div>
            </div>

            <p-divider />

            <div>
                <p class="font-bold">Beschreibung</p>
                <p class="m-0" [innerHTML]="projectDetailsDTO?.description | safeHtml"></p>
            </div>

        </p-panel>

        <!-- notes and documents -->
        <p-panel class="mb-8">
            <ng-template #header>
                <div class="flex items-center gap-2">
                    <span class="material-icons !text-md">apartment</span>
                    <span class="font-bold text-2xl">Notizen & Dokumente</span>
                </div>
            </ng-template>

            <p-panel>
                Hier können Projektnotizen und Dokumente verwaltet werden.
            </p-panel>
        </p-panel>

        <!-- maps -->
        <p-panel>
            <iframe
                [src]="getMapUrl(projectDetailsDTO.address) | safeUrl"
                width="600"
                height="450"
                style="border:0;"
                allowfullscreen=""
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </p-panel>
    </div>

    <div class="col-span-12 lg:col-span-6 xl:col-span-6">
        <!-- timeline -->
        <div class="card">
            <p-timeline [value]="projectDetailsDTO?.timelineEvents" align="alternate" class="customized-timeline">
                <ng-template #marker let-event>
                    <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" [style]="{ 'background-color': event.timelineEventType.color }">
                        @if (event.timelineEventType.icon != null && event.timelineEventType.icon != "") {
                            <i [class]="event.timelineEventType.icon"></i>
                        }
                        @if (event.timelineEventType.icon == null) {
                            <i class="pi pi-check"></i>
                        }


                    </span>
                </ng-template>
                <ng-template #content let-event>
                    <p-card [header]="event?.title" [subheader]="(event.date | date:'dd.MM.yyyy \'um\' H:mm') ?? undefined">
                        @if (event?.description) {
                        <p>{{ event?.description }}</p>
                        }

                        @if (event?.documents.length > 0) {
                            <p-button label="Dokument ansehen" size="small" class="p-button-outlined">
                                <span class="flex items-center gap-2">
                                    <span class="material-icons !text-base">search</span>
                                </span>
                            </p-button>
                        }
                    </p-card>
                </ng-template>
            </p-timeline>
        </div>
    </div>

</div>