<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'c8y-firmware'"></i>
    <div
      class="modal-title"
      id="addFirmwareModalTitle"
      translate
    >
      Add firmware
    </div>
  </div>
  @if (!firmwarePreselected) {
    <div class="p-16 text-center separator-bottom">
      <p
        class="text-medium text-16 m-0"
        translate
      >
        Select or create new firmware
      </p>
    </div>
  }
  <form
    class="d-contents"
    autocomplete="off"
    #firmwareForm="ngForm"
    (ngSubmit)="firmwareForm.form.valid && save()"
  >
    <div class="modal-inner-scroll">
      <div
        class="modal-body"
        id="addFirmwareModalDescription"
      >
        <div [hidden]="firmwarePreselected">
          <c8y-form-group>
            <label
              for="firmwareName"
              translate
            >
              Firmware
            </label>
            <c8y-typeahead
              placeholder="{{ 'Select or enter' | translate }}"
              name="firmwareName"
              [(ngModel)]="model.selected"
              data-cy="add-firmware-modal--input-name"
              (onSearch)="onInput.next($event)"
              [required]="true"
            >
              <c8y-li
                class="p-l-8 p-r-8 c8y-list__item--link"
                *c8yFor="
                  let firmware of firmwaresResult;
                  loadMore: 'auto';
                  notFound: notFoundTemplate
                "
                (click)="onFirmwareSelect(firmware)"
                [active]="model.selected === firmware"
              >
                <c8y-highlight
                  [text]="firmware.name || '--'"
                  [pattern]="onInput | async"
                ></c8y-highlight>
              </c8y-li>
              <ng-template #notFoundTemplate>
                @if ((onInput | async)?.length > 0) {
                  <c8y-li class="bg-level-2 p-8">
                    <span translate>No match found.</span>
                    <button
                      class="btn btn-primary btn-xs m-l-8"
                      title="{{ 'Add new`firmware`' | translate }}"
                      type="button"
                      translate
                    >
                      Add new`firmware`
                    </button>
                  </c8y-li>
                }
              </ng-template>
            </c8y-typeahead>
          </c8y-form-group>

          <c8y-form-group>
            <label
              for="firmwareDescription"
              translate
            >
              Description
            </label>
            <input
              class="form-control"
              id="firmwareDescription"
              placeholder="{{ 'e.g. Firmware for hardware revision B' | translate }}"
              name="description"
              autocomplete="off"
              data-cy="add-firmware-modal--input-description"
              [(ngModel)]="model.description"
              [disabled]="model.selected?.id"
              [required]="true"
              [pattern]="ValidationPattern.rules.noWhiteSpaceOnly.pattern"
            />
          </c8y-form-group>

          <c8y-form-group>
            <label
              class="control-label"
              for="firmwareDeviceTypeFilter"
            >
              {{ 'Device type filter' | translate }}
              <button
                class="btn-help"
                [attr.aria-label]="'Help' | translate"
                popover="{{
                  'If the filter is set, the firmware will show up for installation only for devices of that type. If no filter is set, it will be available for all devices.'
                    | translate
                }}"
                placement="right"
                triggers="focus"
                container="body"
                type="button"
              ></button>
            </label>
            <input
              class="form-control"
              id="firmwareDeviceTypeFilter"
              placeholder="{{ 'e.g.' | translate }} c8y_Linux"
              name="firmwareDeviceTypeFilter"
              data-cy="add-firmware-modal--firmwareDeviceTypeFilter"
              [(ngModel)]="model.deviceType"
              [disabled]="model.selected?.id"
              [pattern]="ValidationPattern.rules.noWhiteSpaceOnly.pattern"
            />
          </c8y-form-group>
        </div>

        <c8y-form-group>
          <label
            for="firmwareVersion"
            translate
          >
            Version
          </label>
          <input
            class="form-control"
            id="firmwareVersion"
            placeholder="{{ 'e.g.' | translate }} 1.0.0"
            name="version"
            autocomplete="off"
            data-cy="add-firmware-modal--firmwareVersion"
            [(ngModel)]="model.version"
            [required]="true"
            [pattern]="ValidationPattern.rules.noWhiteSpaceOnly.pattern"
          />
        </c8y-form-group>

        <c8y-form-group>
          <div
            class="legend form-block m-t-40"
            translate
          >
            Firmware 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-modal--cancel-btn"
        (click)="cancel()"
        [disabled]="saving"
        translate
      >
        Cancel
      </button>

      <button
        class="btn btn-primary"
        title="{{ 'Add firmware' | translate }}"
        type="submit"
        [ngClass]="{ 'btn-pending': saving }"
        [disabled]="
          !firmwareForm.form.valid ||
          firmwareForm.form.pristine ||
          saving ||
          ([null, undefined].includes(model.binary?.url) && !model.binary?.file)
        "
        [actionName]="PRODUCT_EXPERIENCE.FIRMWARE.EVENTS.REPOSITORY"
        [actionData]="{
          component: PRODUCT_EXPERIENCE.FIRMWARE.COMPONENTS.ADD_FIRMWARE_MODAL,
          result:
            firmwarePreselected || model.selected?.id
              ? PRODUCT_EXPERIENCE.FIRMWARE.RESULTS.ADD_FIRMWARE_VERSION
              : PRODUCT_EXPERIENCE.FIRMWARE.RESULTS.ADD_FIRMWARE
        }"
        translate
        c8yProductExperience
      >
        Add firmware
      </button>
    </div>
  </form>
</div>