@if (recorded) {
  <p data-testid="assessment-recorded" class="success">
    Beoordeling vastgelegd.
    @if (closurePending) {
      <span data-testid="closure-pending-note">Administratieve afsluiting in behandeling.</span>
    }
  </p>
} @else {
  <form (ngSubmit)="submit()">
    @if (banner) {
      <p class="banner" 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" data-testid="record-assessment-submit">Beoordeling vastleggen</button>
  </form>
}