<form class="custom-form" [formGroup]="planningForm" (ngSubmit)="onFormSubmit()">
  <h2 class="heading heading--sm">
    <span class="d-block pb-3" *ngIf="email && isAdminView" @toggleVertically>
      Harmonogram przypisany do: {{ email }}
    </span>
    Szczegóły zgłoszenia
  </h2>

  <!-- api notifications -->
  <app-notifications></app-notifications>

  <!-- institution -->
  <div
    class="form-group"
    [ngClass]="{
      'form-group-invalid': planningForm.controls.institution.invalid && planningForm.controls.institution.touched,
    }">
    <label for="institution" class="font-weight-bold small">
      Ministerstwo (Instytucja)
      <span class="font-weight-normal"> (pole wymagane) </span>
    </label>

    <div
      class="dropdown"
      *ngIf="institutions"
      role="combobox"
      aria-haspopup="listbox"
      [attr.aria-owns]="isInstitutionDropdownExpanded ? 'schedule-custom-dropdown-institution' : null"
      [attr.aria-expanded]="isInstitutionDropdownExpanded"
      aria-label="Ministerstwo (instytucja)">
      <input
        type="text"
        *ngIf="!planningForm.controls.institution.disabled || !planningForm.controls.institution.value"
        autocomplete="off"
        class="form-control"
        id="institution"
        placeholder="Wpisz nazwę"
        formControlName="institution"
        aria-autocomplete="list"
        [attr.aria-controls]="isInstitutionDropdownExpanded ? 'schedule-custom-dropdown-institution' : null"
        appScheduleCustomDropdown
        [dropdownId]="'schedule-custom-dropdown-institution'"
        [dropdownItems]="institutions"
        [dropdownItemsDisplayedProperty]="'title'"
        (dropdownItemSelected)="onCustomDropdownItemSelected($event, 'institution')"
        (isDropdownExpanded)="isInstitutionDropdownExpanded = $event"
        (keydown.enter)="$event.preventDefault()" />
    </div>

    <!-- selected value as text -->
    <p
      class="bg-custom p-2 pl-3"
      *ngIf="planningForm.controls.institution.disabled && planningForm.controls.institution.value">
      {{ planningForm.controls.institution.value }}
    </p>

    <!-- required error -->
    <small
      class="form-text text-danger"
      id="institution_required_error"
      role="alert"
      aria-live="polite"
      *ngIf="planningForm.controls.institution.invalid && planningForm.controls.institution.touched"
      @toggleVertically>
      Pole "Ministerstwo (instytucja)" jest wymagane.
    </small>
  </div>

  <!-- institution_unit -->
  <div class="form-group">
    <label
      for="institution_unit"
      *ngIf="
        !planningForm.controls.institution_unit.disabled ||
        (planningForm.controls.institution_unit.disabled && planningForm.controls.institution_unit.value)
      ">
      Jednostka podległa / nadzorowana
    </label>

    <div
      class="dropdown"
      *ngIf="institutions && !planningForm.controls.institution_unit.disabled"
      role="combobox"
      aria-haspopup="listbox"
      [attr.aria-owns]="isInstitutionUnitDropdownExpanded ? 'schedule-custom-dropdown-institution_unit' : null"
      [attr.aria-expanded]="isInstitutionUnitDropdownExpanded"
      aria-label="Jednostka podległa / nadzorowana">
      <input
        type="text"
        *ngIf="!planningForm.controls.institution_unit.disabled || !planningForm.controls.institution_unit.value"
        autocomplete="off"
        class="form-control"
        id="institution_unit"
        placeholder="Wpisz nazwę"
        formControlName="institution_unit"
        aria-autocomplete="list"
        [attr.aria-controls]="isInstitutionUnitDropdownExpanded ? 'schedule-custom-dropdown-institution_unit' : null"
        appScheduleCustomDropdown
        [dropdownId]="'schedule-custom-dropdown-institution_unit'"
        [dropdownItems]="institutions"
        [dropdownItemsDisplayedProperty]="'title'"
        (dropdownItemSelected)="onCustomDropdownItemSelected($event, 'institution_unit')"
        (isDropdownExpanded)="isInstitutionUnitDropdownExpanded = $event"
        (keydown.enter)="$event.preventDefault()" />
    </div>

    <!-- selected value as text -->
    <p
      class="bg-custom p-2 pl-3"
      *ngIf="planningForm.controls.institution_unit.disabled && planningForm.controls.institution_unit.value">
      {{ planningForm.controls.institution_unit.value }}
    </p>
  </div>

  <!-- dataset_title -->
  <div
    class="form-group"
    [ngClass]="{
      'form-group-invalid': planningForm.controls.dataset_title.invalid && planningForm.controls.dataset_title.touched,
    }">
    <label for="dataset_title">
      Zasoby danych
      <span class="font-weight-normal"> (pole wymagane) </span>
    </label>

    <input
      type="text"
      *ngIf="!planningForm.controls.dataset_title.disabled"
      autocomplete="off"
      class="form-control"
      id="dataset_title"
      placeholder="Wpisz tytuł"
      formControlName="dataset_title"
      [attr.aria-describedby]="'dataset_title_required_error'"
      [attr.aria-invalid]="planningForm.controls.dataset_title.invalid && planningForm.controls.dataset_title.touched"
      (keydown.enter)="$event.preventDefault()" />

    <!-- selected value as text -->
    <p
      class="bg-custom p-2 pl-3"
      *ngIf="planningForm.controls.dataset_title.disabled && planningForm.controls.dataset_title.value">
      {{ planningForm.controls.dataset_title.value }}
    </p>

    <!-- dataset_title - required error -->
    <small
      class="form-text text-danger"
      id="dataset_title_required_error"
      role="alert"
      aria-live="polite"
      *ngIf="planningForm.controls.dataset_title.invalid && planningForm.controls.dataset_title.touched"
      @toggleVertically>
      Pole "Zasoby danych" jest wymagane
    </small>
  </div>

  <!-- format, is_new -->
  <div class="row">
    <div class="col-lg-6">
      <!-- format -->
      <div
        class="form-group"
        [ngClass]="{
          'form-group-invalid': planningForm.controls.format.invalid && planningForm.controls.format.touched,
        }">
        <label for="format" class="font-weight-bold small">
          Format danych
          <span class="font-weight-normal"> (pole wymagane) </span>
        </label>

        <div
          class="dropdown"
          *ngIf="formats"
          role="combobox"
          aria-haspopup="listbox"
          [attr.aria-owns]="isFormatDropdownExpanded ? 'schedule-custom-dropdown-format' : null"
          [attr.aria-expanded]="isFormatDropdownExpanded"
          aria-label="Format danych">
          <input
            type="text"
            *ngIf="!planningForm.controls.format.disabled || !planningForm.controls.format.value"
            autocomplete="off"
            class="form-control"
            id="format"
            placeholder="Wpisz nazwę"
            formControlName="format"
            aria-autocomplete="list"
            [attr.aria-controls]="isFormatDropdownExpanded ? 'schedule-custom-dropdown-format' : null"
            appScheduleCustomDropdown
            [dropdownId]="'schedule-custom-dropdown-format'"
            [dropdownItems]="formats"
            [dropdownItemsDisplayedProperty]="'title'"
            (dropdownItemSelected)="onCustomDropdownItemSelected($event, 'format')"
            (isDropdownExpanded)="isFormatDropdownExpanded = $event"
            (keydown.enter)="$event.preventDefault()"
            @toggleVertically />
        </div>

        <!-- selected value as text -->
        <p
          class="bg-custom p-2 pl-3"
          *ngIf="planningForm.controls.format.disabled && planningForm.controls.format.value">
          {{ planningForm.controls.format.value }}
        </p>

        <!-- required error -->
        <small
          class="form-text text-danger"
          id="format_required_error"
          role="alert"
          aria-live="polite"
          *ngIf="planningForm.controls.format.invalid && planningForm.controls.format.touched"
          @toggleVertically>
          Pole "Format danych" jest wymagane.
        </small>
      </div>
    </div>
    <div class="col-lg-6">
      <!-- is_new -->
      <div
        class="form-group"
        [ngClass]="{
          'form-group-invalid': planningForm.controls.is_new.invalid && planningForm.controls.is_new.touched,
        }">
        <label for="is_new" class="font-weight-bold small">
          Nowy zasób
          <span class="font-weight-normal"> (pole wymagane) </span>
        </label>

        <select
          class="form-select"
          *ngIf="!planningForm.controls.is_new.disabled"
          id="is_new"
          formControlName="is_new"
          (change)="checkIsNewValue()"
          [attr.aria-describedby]="'is_new_required_error'"
          [attr.aria-invalid]="planningForm.controls.is_new.invalid && planningForm.controls.is_new.touched">
          <option [ngValue]="null">Wybierz</option>
          <ng-container *ngFor="let item of yes_no">
            <option [ngValue]="item.value">
              {{ item.name }}
            </option>
          </ng-container>
        </select>

        <!-- selected value as text -->
        <p class="bg-custom p-2 pl-3" *ngIf="planningForm.controls.is_new.disabled">
          <ng-container *ngFor="let item of yes_no">
            <ng-container *ngIf="item.value === planningForm.controls.is_new.value">
              {{ item.name }}
            </ng-container>
          </ng-container>
        </p>

        <!-- required error -->
        <small
          class="form-text text-danger"
          id="is_new_required_error"
          role="alert"
          aria-live="polite"
          *ngIf="planningForm.controls.is_new.invalid && planningForm.controls.is_new.touched"
          @toggleVertically>
          Pole "Nowy zasób" jest wymagane.
        </small>
      </div>
    </div>
  </div>

  <!-- is_openness_score_increased, is_quality_improved -->
  <div
    class="row"
    *ngIf="
      !planningForm.controls.is_new.disabled ||
      (planningForm.controls.is_new.disabled && planningForm.controls.is_new.value === false)
    ">
    <div class="col-lg-6">
      <!-- is_openness_score_increased -->
      <div
        class="form-group"
        [ngClass]="{
          'form-group-invalid':
            planningForm.controls.is_openness_score_increased.invalid &&
            planningForm.controls.is_openness_score_increased.touched,
        }">
        <label
          [attr.for]="planningForm.controls.is_openness_score_increased.enabled ? 'is_openness_score_increased' : null"
          class="font-weight-bold small">
          Wyższy poziom otwartości
          <span class="font-weight-normal" *ngIf="planningForm.controls.is_new.value === false"> (pole wymagane) </span>
        </label>

        <select
          class="form-select"
          *ngIf="!planningForm.controls.is_openness_score_increased.disabled"
          id="is_openness_score_increased"
          formControlName="is_openness_score_increased"
          (change)="checkIsNewRelatedFieldsValidators()">
          <option [ngValue]="null">Wybierz</option>
          <ng-container *ngFor="let item of yes_no">
            <option [ngValue]="item.value">
              {{ item.name }}
            </option>
          </ng-container>
        </select>

        <!-- selected value as text -->
        <p class="bg-custom p-2 pl-3" *ngIf="planningForm.controls.is_openness_score_increased.disabled">
          <ng-container *ngFor="let item of yes_no">
            <ng-container *ngIf="item.value === planningForm.controls.is_openness_score_increased.value">
              {{ item.name }}
            </ng-container>
          </ng-container>
          <ng-container *ngIf="planningForm.controls.is_openness_score_increased.value === null">
            {{ 'Wybierz' }}
          </ng-container>
        </p>

        <!-- is_openness_score_increased OR is_quality_improved invalid-->
        <small
          class="form-text text-danger"
          id="is_openness_score_increased_error"
          role="alert"
          aria-live="polite"
          *ngIf="
            planningForm.controls.is_openness_score_increased.invalid &&
            planningForm.controls.is_openness_score_increased.touched
          "
          @toggleVertically>
          Pole "Wyższy poziom otwartości" jest wymagane.
        </small>
      </div>
    </div>
    <div class="col-lg-6">
      <!-- is_quality_improved -->
      <div
        class="form-group"
        [ngClass]="{
          'form-group-invalid':
            planningForm.controls.is_quality_improved.invalid && planningForm.controls.is_quality_improved.touched,
        }">
        <label
          [attr.for]="planningForm.controls.is_quality_improved.enabled ? 'is_quality_improved' : null"
          class="font-weight-bold small">
          Poprawiona jakość
          <span class="font-weight-normal" *ngIf="planningForm.controls.is_new.value === false"> (pole wymagane) </span>
        </label>

        <select
          class="form-select"
          *ngIf="!planningForm.controls.is_quality_improved.disabled"
          id="is_quality_improved"
          formControlName="is_quality_improved"
          (change)="checkIsNewRelatedFieldsValidators()">
          <option [ngValue]="null">Wybierz</option>
          <ng-container *ngFor="let item of yes_no">
            <option [ngValue]="item.value">
              {{ item.name }}
            </option>
          </ng-container>
        </select>

        <!-- selected value as text -->
        <p class="bg-custom p-2 pl-3" *ngIf="planningForm.controls.is_quality_improved.disabled">
          <ng-container *ngFor="let item of yes_no">
            <ng-container *ngIf="item.value === planningForm.controls.is_quality_improved.value">
              {{ item.name }}
            </ng-container>
          </ng-container>
          <ng-container *ngIf="planningForm.controls.is_openness_score_increased.value === null">
            {{ 'Wybierz' }}
          </ng-container>
        </p>

        <!-- is_openness_score_increased OR is_quality_improved invalid-->
        <small
          class="form-text text-danger"
          id="is_quality_improved_error"
          role="alert"
          aria-live="polite"
          *ngIf="planningForm.controls.is_quality_improved.invalid && planningForm.controls.is_quality_improved.touched"
          @toggleVertically>
          Pole "Poprawiona jakość" jest wymagane.
        </small>
      </div>
    </div>
  </div>

  <!-- description -->
  <div
    class="form-group"
    *ngIf="
      !planningForm.controls.description.disabled ||
      (planningForm.controls.description.disabled && planningForm.controls.description.value)
    ">
    <label
      for="description"
      *ngIf="
        !planningForm.controls.description.disabled ||
        (planningForm.controls.description.disabled && planningForm.controls.description.value)
      ">
      Uwagi
    </label>
    <textarea
      class="form-control"
      id="description"
      rows="3"
      formControlName="description"
      *ngIf="!planningForm.controls.description.disabled">
    </textarea>

    <!-- selected value as text -->
    <p
      class="bg-custom p-2 pl-3"
      *ngIf="planningForm.controls.description.disabled && planningForm.controls.description.value">
      {{ planningForm.controls.description.value }}
    </p>
  </div>

  <!-- acceptance_group -->
  <div formGroupName="acceptance_group" *ngIf="planningForm.get('acceptance_group')">
    <!-- acceptance -->
    <ul class="list-unstyled m-0" *ngIf="!planningForm.get('acceptance_group.is_accepted').disabled">
      <li
        class="d-inline-flex flex-row align-items-center"
        [ngClass]="{ 'pr-3': !isLastItem }"
        *ngFor="let item of acceptance; let i = index; let isLastItem = last">
        <input
          type="radio"
          formControlName="is_accepted"
          name="is_accepted"
          id="is_accepted-radio-{{ i }}"
          [value]="item.value"
          (change)="updateAcceptanceValidators()"
          (keydown.enter)="$event.preventDefault()" />

        <label class="pl-1 clickable" for="is_accepted-radio-{{ i }}">
          {{ item.name }}
        </label>
      </li>
    </ul>

    <!-- selected value as text -->
    <p class="bg-custom p-2 pl-3" *ngIf="planningForm.get('acceptance_group.is_accepted').disabled">
      <ng-container *ngFor="let item of acceptance">
        <ng-container *ngIf="item.value === planningForm.get('acceptance_group.is_accepted').value">
          {{ item.name }}
        </ng-container>
      </ng-container>
    </p>

    <!-- recommendation_notes -->
    <div
      class="form-group"
      [ngClass]="{
        'form-group-invalid':
          planningForm.get('acceptance_group.recommendation_notes').invalid &&
          planningForm.get('acceptance_group.recommendation_notes').touched,
      }">
      <label
        for="recommendation_notes"
        *ngIf="
          !planningForm.get('acceptance_group.recommendation_notes').disabled ||
          (planningForm.get('acceptance_group.recommendation_notes').disabled &&
            planningForm.get('acceptance_group.recommendation_notes').value)
        ">
        Komentarz:
        <small
          *ngIf="
            !planningForm.get('acceptance_group.recommendation_notes').disabled &&
            planningForm.get('acceptance_group.is_accepted').value === acceptance[1].value
          "
          @toggleVertically>
          (pole wymagane)
        </small>
      </label>

      <textarea
        class="form-control"
        id="recommendation_notes"
        rows="3"
        formControlName="recommendation_notes"
        *ngIf="!planningForm.get('acceptance_group.recommendation_notes').disabled">
      </textarea>

      <!-- recommendation_notes - required error -->
      <small
        class="form-text text-danger"
        id="recommendation_notes_error"
        role="alert"
        aria-live="polite"
        *ngIf="
          planningForm.get('acceptance_group.recommendation_notes').invalid &&
          planningForm.get('acceptance_group.recommendation_notes').touched
        "
        @toggleVertically>
        Pole "Komentarz" jest wymagane
      </small>

      <!-- selected value as text -->
      <p
        class="bg-custom p-2 pl-3"
        *ngIf="
          planningForm.get('acceptance_group.recommendation_notes').disabled &&
          planningForm.get('acceptance_group.recommendation_notes').value
        ">
        {{ planningForm.get('acceptance_group.recommendation_notes').value }}
      </p>
    </div>
  </div>

  <!-- recommendation_group -->
  <div formGroupName="recommendation_group" *ngIf="planningForm.get('recommendation_group')">
    <hr />

    <!-- recommendation -->
    <ul class="list-unstyled m-0 pt-2" *ngIf="!planningForm.get('recommendation_group.recommendation_state').disabled">
      <li
        class="d-inline-flex flex-row align-items-center"
        [ngClass]="{ 'pr-3': !isLastItem }"
        *ngFor="let item of recommendations; let i = index; let isLastItem = last">
        <input
          type="radio"
          formControlName="recommendation_state"
          name="recommendation_state"
          id="recommendation_state-radio-{{ i }}"
          [value]="item.value"
          (change)="updateRecommendationValidators()"
          (keydown.enter)="$event.preventDefault()" />

        <label class="pl-1 clickable" for="recommendation_state-radio-{{ i }}">
          {{ item.name }}
        </label>
      </li>
    </ul>

    <!-- selected value as text -->
    <p
      class="bg-custom p-2 pl-3"
      *ngIf="
        planningForm.get('recommendation_group.recommendation_state').disabled &&
        planningForm.get('recommendation_group.recommendation_state').value
      ">
      <ng-container *ngFor="let item of recommendations">
        <ng-container *ngIf="item.value === planningForm.get('recommendation_group.recommendation_state').value">
          {{ item.name }}
        </ng-container>
      </ng-container>
    </p>

    <!-- recommendation_notes -->
    <div
      class="form-group"
      [ngClass]="{
        'form-group-invalid':
          planningForm.get('recommendation_group.recommendation_notes').invalid &&
          planningForm.get('recommendation_group.recommendation_notes').touched,
      }">
      <label
        for="recommendation_notes"
        *ngIf="
          !planningForm.get('recommendation_group.recommendation_notes').disabled ||
          (planningForm.get('recommendation_group.recommendation_notes').disabled &&
            planningForm.get('recommendation_group.recommendation_notes').value)
        ">
        Komentarz:
        <small
          *ngIf="
            !planningForm.get('recommendation_group.recommendation_notes').disabled &&
            planningForm.get('recommendation_group.recommendation_state').value === recommendations[1].value
          "
          @toggleVertically>
          (pole wymagane)
        </small>
      </label>

      <textarea
        class="form-control"
        id="recommendation_notes"
        rows="3"
        formControlName="recommendation_notes"
        *ngIf="
          !planningForm.get('recommendation_group.recommendation_notes').disabled ||
          !planningForm.get('recommendation_group.recommendation_notes').value
        ">
      </textarea>

      <!-- is_resource_added_notes - required error -->
      <small
        class="form-text text-danger"
        id="recommendation_notes_error"
        role="alert"
        aria-live="polite"
        *ngIf="
          planningForm.get('recommendation_group.recommendation_notes').invalid &&
          planningForm.get('recommendation_group.recommendation_notes').touched
        "
        @toggleVertically>
        Pole "Komentarz" jest wymagane
      </small>

      <!-- selected value as text -->
      <p
        class="bg-custom p-2 pl-3"
        *ngIf="
          planningForm.get('recommendation_group.recommendation_notes').disabled &&
          planningForm.get('recommendation_group.recommendation_notes').value
        ">
        {{ planningForm.get('recommendation_group.recommendation_notes').value }}
      </p>
    </div>
  </div>

  <!-- realization_group -->
  <div formGroupName="realization_group" *ngIf="planningForm.get('realization_group')">
    <hr />

    <!-- is_resource_added -->
    <ul class="list-unstyled m-0" *ngIf="!planningForm.get('realization_group.is_resource_added').disabled">
      <li
        class="d-inline-flex flex-row align-items-center"
        [ngClass]="{ 'pr-3': !isLastItem }"
        *ngFor="let item of realization; let i = index; let isLastItem = last">
        <input
          type="radio"
          formControlName="is_resource_added"
          name="is_resource_added"
          id="is_resource_added-radio-{{ i }}"
          [value]="item.value"
          (change)="updateRealizationValidators()"
          (keydown.enter)="$event.preventDefault()" />

        <label class="pl-1 clickable" for="is_resource_added-radio-{{ i }}">
          {{ item.name }}
        </label>
      </li>
    </ul>

    <!-- selected value as text -->
    <p class="bg-custom p-2 pl-3" *ngIf="planningForm.get('realization_group.is_resource_added').disabled">
      <ng-container *ngFor="let item of realization">
        <ng-container *ngIf="item.value === planningForm.get('realization_group.is_resource_added').value">
          {{ item.name }}
        </ng-container>
      </ng-container>
    </p>

    <!-- resource_link -->
    <div
      class="form-group"
      [ngClass]="{
        'form-group-invalid':
          planningForm.get('realization_group.resource_link').invalid &&
          planningForm.get('realization_group.resource_link').touched,
      }">
      <label for="resource_link">
        Link do zasobu
        <small
          *ngIf="
            !planningForm.get('realization_group.resource_link').disabled &&
            planningForm.get('realization_group.is_resource_added').value
          "
          @toggleVertically>
          (pole wymagane)
        </small>
      </label>

      <input
        type="text"
        autocomplete="off"
        class="form-control"
        id="resource_link"
        placeholder=""
        formControlName="resource_link"
        name="resource_link"
        [attr.aria-describedby]="'resource_link_invalid_error'"
        [attr.aria-invalid]="
          planningForm.get('realization_group.resource_link').invalid &&
          planningForm.get('realization_group.resource_link').touched
        "
        (keydown.enter)="$event.preventDefault()"
        *ngIf="
          !planningForm.get('realization_group.resource_link').disabled ||
          !planningForm.get('realization_group.resource_link').value
        " />

      <!-- selected value as text -->
      <p
        class="bg-custom p-2 pl-3"
        *ngIf="
          planningForm.get('realization_group.resource_link').disabled &&
          planningForm.get('realization_group.resource_link').value
        ">
        {{ planningForm.get('realization_group.resource_link').value }}
      </p>

      <!-- resource_link errors -->
      <ng-container
        *ngIf="
          planningForm.get('realization_group.resource_link').invalid &&
          planningForm.get('realization_group.resource_link').touched
        ">
        <!-- required error -->
        <small
          class="form-text text-danger"
          role="alert"
          id="resource_link_invalid_error"
          *ngIf="planningForm.get('realization_group.resource_link').errors?.required"
          @toggleVertically>
          Niepoprawny link
        </small>

        <!-- invalid resource_link error -->
        <small
          class="form-text text-danger"
          role="alert"
          id="resource_link_invalid_error"
          *ngIf="planningForm.get('realization_group.resource_link').errors?.pattern"
          @toggleVertically>
          Niepoprawny adres strony
        </small>
      </ng-container>
    </div>

    <!-- is_resource_added_notes -->
    <div
      class="form-group"
      [ngClass]="{
        'form-group-invalid':
          planningForm.get('realization_group.is_resource_added_notes').invalid &&
          planningForm.get('realization_group.is_resource_added_notes').touched,
      }">
      <label
        for="is_resource_added_notes"
        *ngIf="
          !planningForm.get('realization_group.is_resource_added_notes').disabled ||
          (planningForm.get('realization_group.is_resource_added_notes').disabled &&
            planningForm.get('realization_group.is_resource_added_notes').value)
        ">
        Komentarz:
        <small
          *ngIf="
            !planningForm.get('realization_group.is_resource_added_notes').disabled &&
            !planningForm.get('realization_group.is_resource_added').value
          "
          @toggleVertically>
          (pole wymagane)
        </small>
      </label>
      <textarea
        class="form-control"
        id="is_resource_added_notes"
        rows="3"
        formControlName="is_resource_added_notes"
        *ngIf="!planningForm.get('realization_group.is_resource_added_notes').disabled">
      </textarea>

      <!-- is_resource_added_notes - required error -->
      <small
        class="form-text text-danger"
        id="is_resource_added_notes_error"
        role="alert"
        aria-live="polite"
        *ngIf="
          planningForm.get('realization_group.is_resource_added_notes').invalid &&
          planningForm.get('realization_group.is_resource_added_notes').touched
        "
        @toggleVertically>
        Pole "Komentarz" jest wymagane
      </small>

      <!-- selected value as text -->
      <p
        class="bg-custom p-2 pl-3"
        *ngIf="
          planningForm.get('realization_group.is_resource_added_notes').disabled &&
          planningForm.get('realization_group.is_resource_added_notes').value
        ">
        {{ planningForm.get('realization_group.is_resource_added_notes').value }}
      </p>
    </div>
  </div>

  <!-- submit form -->
  <div *ngIf="isSubmitShouldBeVisible">
    <!-- fake submit -->
    <button
      type="button"
      class="btn btn-secondary"
      aria-describedby="backend_notifications institution_required_error dataset_title_required_error format_required_error is_new_required_error is_new_related_required_error"
      *ngIf="!planningForm.valid">
      Zapisz
    </button>

    <!-- submit -->
    <button type="submit" class="btn btn-primary" *ngIf="planningForm.valid">Zapisz</button>

    <!-- cancel -->
    <button class="btn btn-outline-danger ml-2" (click)="backToList()">Anuluj</button>
  </div>
</form>

<!-- comments -->
<app-schedule-comments
  [scheduleItemId]="planningFormBlueprint.id"
  *ngIf="planningFormBlueprint"></app-schedule-comments>
