@if (detail(); as d) {
  <h2>{{ d.surname }}, {{ d.initials }} ({{ d.origin }})</h2>

  <section>
    <h3>Aanvrager</h3>
    <dl>
      <dt>BSN</dt>
      <dd>{{ d.bsn }}</dd>
      <dt>E-mail</dt>
      <dd>{{ d.email ?? 'n.v.t.' }}</dd>
      <dt>Telefoon</dt>
      <dd>{{ d.phone ?? 'n.v.t.' }}</dd>
      <dt>Voorkeurskanaal</dt>
      <dd>{{ d.preferredChannel }}</dd>
      @if (d.address; as address) {
        <dt>Adres</dt>
        <dd>{{ address.street }} {{ address.number }}, {{ address.postalCode }} {{ address.city }}</dd>
      }
    </dl>
  </section>

  <section>
    <h3>Diploma</h3>
    <dl>
      <dt>Code</dt>
      <dd>{{ d.diplomaCode }}</dd>
      <dt>Land van uitgifte</dt>
      <dd>{{ d.diplomaCountryOfIssue }}</dd>
      <dt>Uitgegeven op</dt>
      <dd>{{ d.diplomaIssuedOn }}</dd>
      <dt>Ontvangen op</dt>
      <dd>{{ d.receivedOn }}</dd>
      <dt>Processtatus</dt>
      <dd>{{ d.processStatus ?? 'n.v.t.' }}</dd>
    </dl>
  </section>

  @if (d.assessment; as assessment) {
    <section>
      <h3>Beoordeling</h3>
      <dl>
        <dt>Uitkomst</dt>
        <dd>{{ assessment.outcome }}</dd>
        <dt>Motivatie</dt>
        <dd>{{ assessment.motivation }}</dd>
        <dt>Gecontroleerde stukken</dt>
        <dd>{{ assessment.verifiedItems.join(', ') || 'geen' }}</dd>
        <dt>Beslist op</dt>
        <dd>{{ assessment.decidedOn }}</dd>
      </dl>
    </section>
  }

  <section>
    <h3>Seams</h3>
    <p class="seam-note">Toont welk backend elk onderdeel van deze pagina levert.</p>
    <dl>
      @for (seam of d.seams | keyvalue; track seam.key) {
        <dt>{{ seam.key }}</dt>
        <dd>{{ seam.value ?? 'n.v.t.' }}</dd>
      }
    </dl>
  </section>

  <section>
    <h3>Gegevens wijzigen</h3>
    <app-edit-applicant-details
      [actionLink]="d.actions.editApplicantDetails"
      [initial]="toApplicantDetailsRequest(d)"
      (saved)="reload()"
    />
  </section>

  <section>
    <h3>Acties</h3>
    @if (banner(); as message) {
      <p class="banner" data-testid="ownership-banner">{{ message }}</p>
    }
    <app-case-actions
      [actions]="d.actions"
      (savedRequested)="reload()"
      (takeOwnershipRequested)="onTakeOwnership($event)"
      (releaseOwnershipRequested)="onReleaseOwnership($event)"
    />
  </section>
} @else {
  <p>Laden...</p>
}