<form class="bg-custom custom-form p-4" [formGroup]="notificationForm" (ngSubmit)="onFormSubmit()" *ngIf="!notificationSentMessage?.length">
  <!-- api notifications  -->
  <app-notifications aria-live="polite"></app-notifications>

  <!-- message -->
  <div
    class="form-group"
    [ngClass]="{ 'form-group-invalid': notificationForm.controls.message.invalid && notificationForm.controls.message.touched }"
  >
    <label for="message">
      {{ 'Hod.NotificationContent' | translate }}
      <small class="font-weight-normal"> ({{ 'Hod.MaxCharacters' | translate: { param: maxNotificationLength } }}): </small>
    </label>

    <input
      type="text"
      class="form-control"
      id="message"
      autocomplete="off"
      placeholder=""
      formControlName="message"
      [attr.aria-describedby]="'message_invalid_error'"
      [attr.aria-invalid]="notificationForm.controls.message.invalid && notificationForm.controls.message.touched"
      (keydown.enter)="$event.preventDefault()"
    />

    <!-- message errors -->
    <ng-container *ngIf="notificationForm.controls.message.invalid && notificationForm.controls.message.touched">
      <!-- empty or minlength error -->
      <small
        class="form-text text-danger"
        role="alert"
        id="message_invalid_error"
        *ngIf="notificationForm.controls.message.errors?.required || notificationForm.controls.message.errors?.minlength"
        @toggleVertically
      >
        Pole "Treść powiadomienia" nie może być puste
      </small>

      <!-- max length error -->
      <small
        class="form-text text-danger"
        role="alert"
        id="notification_invalid_error"
        *ngIf="notificationForm.controls.message.errors['maxlength']"
        @toggleVertically
      >
        {{ 'Hod.MaxLengthError' | translate }}
        {{ notificationForm.controls.message.errors.maxlength['actualLength'] - maxNotificationLength }}
      </small>
    </ng-container>
  </div>

  <!-- recipient type -->
  <div class="form-group">
    <span class="d-block font-weight-bold small"> {{ 'Hod.SendTo' | translate }}: </span>

    <ul class="list-unstyled d-sm-block m-0 p-0" *ngIf="recipientTypes">
      <li class="d-inline-flex flex-row align-items-center mr-4" *ngFor="let type of recipientTypes">
        <input
          type="radio"
          formControlName="type"
          name="type"
          id="type-radio-{{ type.value }}"
          [value]="type.value"
          (keyup.enter)="$event.preventDefault()"
        />

        <label
          class="font-weight-bold small pl-1 clickable"
          for="type-radio-{{ type.value }}"
          [ngClass]="{ 'text-primary': notificationForm.controls.type.value !== type.value }"
        >
          {{ type.name }}
        </label>
      </li>
    </ul>
  </div>

  <!-- fake submit -->
  <button
    type="button"
    class="btn btn-sm btn-secondary"
    aria-describedby="backend_notifications message_invalid_error"
    *ngIf="notificationForm.invalid"
  >
    {{ 'Hod.SendNotification' | translate }}
  </button>

  <!-- submit -->
  <button type="submit" class="btn btn-sm btn-primary" *ngIf="notificationForm.valid">{{ 'Hod.SendNotification' | translate }}</button>
</form>

<div class="alert alert-success" role="alert" aria-live="polite" *ngIf="notificationSentMessage?.length">
  <p class="p-0">
    {{ notificationSentMessage }}
  </p>
  <button class="btn btn-link btn-sm p-0" (click)="onToggleForm()">{{ 'Hod.BackToForm' | translate }}</button>
</div>
