<!-- Validated Bon Details -->
@if (store.validatedBon(); as bon) {
  <div
    class="mb-4 max-w-56"
    data-what="bon-details"
    [attr.data-which]="bon.bonNumber"
    role="region"
    aria-label="Bon Details"
  >
    <div class="flex justify-between items-center py-1">
      <span class="isa-text-body-2-regular text-isa-neutral-600"
        >Bon Datum</span
      >
      <span
        class="isa-text-body-2-bold text-isa-black"
        data-what="bon-date"
        [attr.data-which]="bon.bonNumber"
      >
        {{ bon.date | date: 'dd.MM.yyyy' }}
      </span>
    </div>

    <div class="flex justify-between items-center py-1">
      <span class="isa-text-body-2-regular text-isa-neutral-600">Summe</span>
      <span
        class="isa-text-body-2-bold text-isa-black"
        data-what="bon-total"
        [attr.data-which]="bon.bonNumber"
      >
        {{ bon.total | number: '1.2-2' : 'de-DE' }} EUR
      </span>
    </div>
  </div>
}
