<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'c8y-firmware'"></i>
    <h4
      id="addFirmwarePatchModalTitle"
      translate
    >
      Add firmware patch
    </h4>
  </div>
  <div
    class="p-16 text-center separator-bottom"
    id="addFirmwarePatchModalDescription"
  >
    <p
      class="text-medium text-16 m-0"
      translate
    >
      Select a firmware version
    </p>
  </div>

  <form
    class="d-contents"
    autocomplete="off"
    #firmwarePatchForm="ngForm"
    (ngSubmit)="firmwarePatchForm.form.valid && save()"
  >
    <div class="modal-inner-scroll">
      <div class="modal-body">
        <div [hidden]="firmwarePreselected">
          <c8y-form-group>
            <label
              for="firmwareName"
              translate
            >
              Firmware
            </label>
            <c8y-typeahead
              placeholder="{{ 'Select or enter' | translate }}"
              name="firmwareName"
              [ngModel]="model.selected"
              (onSearch)="firmwareInput$.next($event)"
              [allowFreeEntries]="false"
              [required]="true"
            >
              <c8y-li
                class="p-l-8 p-r-8 c8y-list__item--link"
                *c8yFor="let firmware of firmwares$ | async; loadMore: 'auto'"
                (click)="model.selected = firmware; firmwareSelected$.next(firmware)"
                [active]="model.selected === firmware"
              >
                <c8y-highlight
                  [text]="firmware.name || '--'"
                  [pattern]="firmwareInput$ | async"
                ></c8y-highlight>
              </c8y-li>
            </c8y-typeahead>
            <c8y-messages>
              <c8y-message
                name="notExisting"
                [text]="'Select one of the existing firmwares.' | translate"
              ></c8y-message>
            </c8y-messages>
          </c8y-form-group>
        </div>

        <c8y-form-group>
          <label
            class="m-r-8"
            for="patchDependency"
            translate
          >
            Version
          </label>
          <c8y-typeahead
            placeholder="{{ 'Select or enter' | translate }}"
            name="patchDependency"
            [ngModel]="model.dependency"
            data-cy="add-firmware-patch-modal--patchDependency"
            (onSearch)="patchDependencyInput$.next($event)"
            [displayProperty]="'c8y_Firmware.version'"
            [allowFreeEntries]="false"
            [disabled]="
              (baseVersions$ | async) === null || (baseVersions$ | async)?.data.length === 0
            "
            [required]="true"
          >
            <c8y-li
              class="p-l-8 p-r-8 c8y-list__item--link"
              *c8yFor="
                let baseVersion of baseVersions$;
                loadMore: 'auto';
                pipe: baseVersionsFilterPipe
              "
              (click)="model.dependency = baseVersion"
              [active]="model.dependency === baseVersion"
            >
              <c8y-highlight
                [text]="baseVersion.c8y_Firmware.version || '--'"
                [pattern]="patchDependencyInput$ | async"
              ></c8y-highlight>
            </c8y-li>
          </c8y-typeahead>
          <c8y-messages>
            <c8y-message
              name="notExisting"
              [text]="'Select one of the existing versions.' | translate"
            ></c8y-message>
          </c8y-messages>
        </c8y-form-group>

        <c8y-form-group>
          <label
            for="patchVersion"
            translate
          >
            Patch
          </label>
          <input
            class="form-control"
            id="patchVersion"
            placeholder="{{ 'e.g.' | translate }} 1.0.0"
            name="patchVersion"
            autocomplete="off"
            required
            data-cy="add-firmware-patch-modal--patchVersion"
            [(ngModel)]="model.patchVersion"
          />
        </c8y-form-group>

        <c8y-form-group>
          <div
            class="legend form-block m-t-40"
            translate
          >
            Patch file
          </div>
          <c8y-file-picker
            [maxAllowedFiles]="1"
            (onFilesPicked)="onFile($event)"
            [allowedUploadChoices]="['uploadBinary', 'uploadUrl', 'provided']"
            [fileUrlPopover]="textForFirmwareUrlPopover"
          ></c8y-file-picker>
        </c8y-form-group>
      </div>
    </div>
    <div class="modal-footer">
      <button
        class="btn btn-default"
        title="{{ 'Cancel' | translate }}"
        type="button"
        data-cy="add-firmware-patch-modal--cancel-btn"
        (click)="cancel()"
        [disabled]="saving"
        translate
      >
        Cancel
      </button>
      <button
        class="btn btn-primary"
        title="{{ 'Add firmware patch' | translate }}"
        type="submit"
        [ngClass]="{ 'btn-pending': saving }"
        [disabled]="
          !firmwarePatchForm.form.valid ||
          firmwarePatchForm.form.pristine ||
          (!model.binary?.url && !model.binary?.file && model.binary?.url !== '') ||
          saving
        "
        translate
        c8yProductExperience
        [actionName]="PRODUCT_EXPERIENCE.FIRMWARE.EVENTS.REPOSITORY"
        [actionData]="{
          component: PRODUCT_EXPERIENCE.FIRMWARE.COMPONENTS.ADD_FIRMWAR_PATCH_MODAL,
          result: PRODUCT_EXPERIENCE.FIRMWARE.RESULTS.ADD_FIRMWARE_PATCH
        }"
      >
        Add firmware patch
      </button>
    </div>
  </form>
</div>