@if (recorded()) {
  <p data-testid="assessment-recorded" class="banner banner--success">
    Beoordeling vastgelegd.
    @if (closurePending()) {
      <br />
      <span data-testid="closure-pending-note">Administratieve afsluiting in behandeling.</span>
    }
  </p>
} @else {
  <form (ngSubmit)="submit()">
    @if (banner()) {
      <p class="banner banner--error" data-testid="assessment-banner">{{ banner() }}</p>
    }

    <label>
      Gecontroleerde stukken (kommagescheiden)
      <input type="text" name="verifiedItems" [(ngModel)]="verifiedItemsText" />
    </label>

    <label>
      Uitzonderingsreden (alleen relevant zonder gecontroleerde stukken)
      <input type="text" name="exceptionReason" [(ngModel)]="exceptionReason" />
    </label>

    <label>
      Uitkomst
      <select name="outcome" [(ngModel)]="outcome">
        <option value="Approved">Approved</option>
        <option value="Rejected">Rejected</option>
      </select>
    </label>

    @if (outcome === 'Rejected') {
      <label>
        Afwijzingscategorie
        <input type="text" name="rejectionCategory" [(ngModel)]="rejectionCategory" />
      </label>
    }

    <label>
      Motivatie
      <textarea name="motivation" [(ngModel)]="motivation"></textarea>
    </label>

    <button type="submit" class="btn btn--primary" data-testid="record-assessment-submit" [disabled]="saving()">
      {{ saving() ? 'Bezig met vastleggen…' : 'Beoordeling vastleggen' }}
    </button>
  </form>
}