@if (notes()) {
  <div>
    <form [formGroup]="noteForm" class="needs-validation mt-3" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Note }" novalidate>
      <div class="form-group">
        <textarea class="form-control form-control-sm" [class.is-invalid]="newNoteError" [class.d-none]="noteView() !== NoteViewMode.Edit" [attr.aria-invalid]="newNoteError" aria-label="Note" i18n-aria-label aria-describedby="noteFeedback" rows="3" formControlName="newNote" placeholder="Enter note (Markdown is supported)" i18n-placeholder (keydown)="noteFormKeydown($event)" required></textarea>
        @if (noteView() === NoteViewMode.Preview) {
          <section class="form-control form-control-sm note-preview" aria-label="Note preview" i18n-aria-label>
            @if (noteForm.get('newNote').value) {
              <div class="note-markdown text-break text-wrap" [innerHTML]="noteForm.get('newNote').value | markdown"></div>
            } @else {
              <span class="text-muted" i18n>Nothing to preview</span>
            }
          </section>
        }
        <div id="noteFeedback" class="invalid-feedback" i18n>
          Please enter a note.
        </div>
      </div>
      <div class="form-group mt-2 d-flex justify-content-between align-items-center">
        @if (networkActive()) {
          <div class="spinner-border spinner-border-sm fw-normal me-auto" role="status"></div>
        }
        <fieldset class="btn-group btn-group-sm" aria-label="Note input mode" i18n-aria-label>
          <input type="radio" class="btn-check" id="noteViewEdit" name="noteViewMode" [checked]="noteView() === NoteViewMode.Edit" (change)="noteView.set(NoteViewMode.Edit)">
          <label class="btn btn-outline-secondary" for="noteViewEdit" i18n>Edit</label>
          <input type="radio" class="btn-check" id="noteViewPreview" name="noteViewMode" [checked]="noteView() === NoteViewMode.Preview" (change)="noteView.set(NoteViewMode.Preview)">
          <label class="btn btn-outline-secondary" for="noteViewPreview" i18n>Preview</label>
        </fieldset>
        <button type="button" class="btn btn-primary btn-sm" [disabled]="networkActive() || addDisabled()" (click)="addNote()" i18n>Add note</button>
      </div>
    </form>
    <hr>
      @for (note of notes(); track note.id) {
        <div class="card border mb-3">
          <div class="card-body text-dark">
            @if (note.format === NoteFormat.Markdown) {
              <div class="card-text note-markdown text-break text-wrap" [innerHTML]="note.note | markdown"></div>
            } @else {
              <p class="card-text">{{note.note}}</p>
            }
          </div>
          <div class="d-flex card-footer small bg-light text-primary justify-content-between align-items-center">
            <span>
              {{displayName(note)}} - {{ note.created | customDate}}
            </span>
            <button type="button" class="btn btn-link btn-sm p-0 fade" title="Delete note" i18n-title (click)="deleteNote(note.id)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Note }">
              <pngx-bs-icon name="trash"></pngx-bs-icon>
              <span class="visually-hidden" i18n>Delete note</span>
            </button>
          </div>
        </div>
      }
    </div>
  }