@if (detail(); as d) {
  <nav class="breadcrumb" aria-label="Kruimelpad">
    <a routerLink="/">Werkvoorraad</a>
    <span aria-hidden="true"> / </span>
    <span class="mono">{{ referenceOf(d) }}</span>
  </nav>

  <div class="case-header">
    <div>
      <h2>{{ d.surname }}, {{ d.initials }}</h2>
      <p class="mono case-header__ref">{{ referenceOf(d) }}</p>
    </div>
    <div class="case-header__badges">
      <span class="badge" [class.badge--legacy]="d.origin === 'Legacy'" [class.badge--owned]="d.origin === 'Owned'">{{ d.origin }}</span>
      @if (d.processStatus) {
        <span class="badge badge--status">{{ d.processStatus }}</span>
      }
    </div>
  </div>

  <div class="case-grid">
    <div class="case-grid__main">
      <section class="card" [class]="sourceAccentClass(d.seams['aanvrager'])">
        <h3>Aanvrager</h3>
        <p class="card__source">bron: {{ d.seams['aanvrager'] ?? 'onbekend' }}</p>
        <dl>
          <dt>BSN</dt>
          <dd class="mono">{{ 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 class="card" [class]="sourceAccentClass(d.seams['aanvrager'])">
        <h3>Diploma</h3>
        <p class="card__source">bron: {{ d.seams['aanvrager'] ?? 'onbekend' }}</p>
        <dl>
          <dt>Code</dt>
          <dd class="mono">{{ 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 class="card" [class]="sourceAccentClass(d.seams['procestijdlijn'])">
          <h3>Beoordeling</h3>
          <p class="card__source">bron: {{ d.seams['procestijdlijn'] ?? 'onbekend' }}</p>
          <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 class="card">
        <h3>Gegevens wijzigen</h3>
        <app-edit-applicant-details
          [actionLink]="d.actions.editApplicantDetails"
          [initial]="toApplicantDetailsRequest(d)"
          (saved)="reload()"
        />
      </section>
    </div>

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

      <section class="card card--diagnostic">
        <h3>Herkomst</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 class="mono">{{ seam.value ?? 'n.v.t.' }}</dd>
          }
        </dl>
      </section>
    </div>
  </div>
} @else {
  <p class="loading">Laden...</p>
}