<h2 class="!mb-1">{{ ref.data.operationId }} - {{ ref.data.ordinanceType }}</h2>
<div class="mb-2 flex">
  <div class="flex flex-col w-1/2 text-gray-600 text-sm">
    <span class="font-medium">Startzeit</span>
    <span>
      {{ ref.data.startDate | date: 'HH:mm' }} Uhr
      {{ ref.data.startDate | date: 'dd.MM.yyyy' }}
    </span>
  </div>
  <div class="flex flex-col w-1/2 text-gray-600 text-sm">
    @if (ref.data.createdAt) {
      <span class="font-medium">Erstellt am</span>
    }
    <span>
      {{ ref.data.createdAt | date: 'HH:mm' }} Uhr
      {{ ref.data.createdAt | date: 'dd.MM.yyyy' }}
    </span>
  </div>
</div>
<mat-divider></mat-divider>
@if (ref.data.driverName || ref.data.codriverName || ref.data.carName) {
  <div
    class="flex flex-wrap md:flex-nowrap p-2"
    >
    @if (ref.data.carName) {
      <div
        class="w-full md:w-1/3 flex flex-col pb-1 md:pb-0"
        >
        <span class="font-semibold pb-1">Fahrzeug</span>
        {{ ref.data.carName }}
      </div>
    }
    @if (ref.data.driverName) {
      <div
        class="w-full md:w-1/3 flex flex-col pb-1 md:pb-0"
        >
        <span class="font-semibold pb-1">Fahrer</span>
        <span>{{ ref.data.driverName }}</span>
      </div>
    }
    @if (ref.data.codriverName) {
      <div class="w-full md:w-1/3 flex flex-col">
        <span class="font-semibold pb-1">Beifahrer</span>
        <span>{{ ref.data.codriverName }}</span>
      </div>
    }
  </div>
}
<div class="flex flex-col p-2">
  <span class="font-semibold pb-1">Patient</span>
  <span>{{ ref.data.patientName }} {{ ref.data.patientSurname }}</span>
  <span>{{ ref.data.patientStreet }}</span>
  <span>{{ ref.data.patientZip }} {{ ref.data.patientCity }}</span>
</div>
<div class="flex flex-wrap md:flex-nowrap p-2">
  <div class="w-full md:w-1/2 flex flex-col pb-1 md:pb-0">
    <span class="font-semibold pb-1">Start</span>
    <span>{{ ref.data.startInstitution }}</span>
    <span>{{ ref.data.startStreet }}</span>
    <span>{{ ref.data.startZip }} {{ ref.data.startCity }}</span>
  </div>
  <div class="w-full md:w-1/2 flex flex-col">
    <span class="font-semibold pb-1">Ziel</span>
    <span>{{ ref.data.targetInstitution }}</span>
    <span>{{ ref.data.targetStreet }}</span>
    <span>{{ ref.data.targetZip }} {{ ref.data.targetCity }}</span>
  </div>
</div>
