<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'c8y-firmware'"></i>
    <h4 translate>
      Add firmware
    </h4>
  </div>
  <div class="p-16 text-center separator-bottom" *ngIf="!firmwarePreselected">
    <p class="lead 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">
        <div [hidden]="firmwarePreselected">
          <c8y-form-group>
            <label for="firmwareName" translate>Firmware</label>
            <c8y-typeahead
              [(ngModel)]="model.selected"
              name="firmwareName"
              placeholder="{{ 'Select or enter' | translate }}"
              (onSearch)="onInput.next($event)"
              [required]="true"
            >
              <c8y-li
                *c8yFor="
                  let firmware of firmwaresResult;
                  loadMore: 'auto';
                  notFound: notFoundTemplate
                "
                class="p-l-8 p-r-8 c8y-list__item--link"
                (click)="onFirmwareSelect(firmware)"
                [active]="model.selected === firmware"
              >
                <c8y-highlight
                  [text]="firmware.name || '--'"
                  [pattern]="onInput | async"
                ></c8y-highlight>
              </c8y-li>
              <ng-template #notFoundTemplate>
                <c8y-li class="bg-gray-lighter p-8" *ngIf="(onInput | async)?.length > 0">
                  <span translate>No match found.</span>
                  <button
                    title="{{ 'Add new`firmware`' | translate }}"
                    type="button"
                    class="btn btn-primary btn-xs m-l-8"
                    translate
                  >
                    Add new`firmware`
                  </button>
                </c8y-li>
              </ng-template>
            </c8y-typeahead>
          </c8y-form-group>

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

          <c8y-form-group>
            <label class="control-label" for="firmwareDeviceTypeFilter">
              {{ 'Device type filter' | translate }}
              <button
                class="btn btn-clean text-primary"
                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
                }}"
                triggers="focus"
                container="body"
                placement="right"
              >
                <i [c8yIcon]="'question-circle-o'"></i>
              </button>
            </label>
            <input
              id="firmwareDeviceTypeFilter"
              class="form-control"
              name="firmwareDeviceTypeFilter"
              [(ngModel)]="model.deviceType"
              placeholder="{{ 'e.g.' | translate }} c8y_Linux"
              [disabled]="model.selected?.id"
            />
          </c8y-form-group>
        </div>

        <c8y-form-group>
          <label for="firmwareVersion" translate>Version</label>
          <input
            id="firmwareVersion"
            class="form-control"
            autocomplete="off"
            name="version"
            [(ngModel)]="model.version"
            placeholder="{{ 'e.g.' | translate }} 1.0.0"
            [required]="true"
          />
        </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)" [fileUrlPopover]="textForFirmwareUrlPopover">
          </c8y-file-picker>
        </c8y-form-group>
      </div>
    </div>
    <div class="modal-footer">
      <button
        title="{{ 'Cancel' | translate }}"
        class="btn btn-default"
        type="button"
        (click)="cancel()"
        [disabled]="saving"
        translate
      >
        Cancel
      </button>

      <button
        title="{{ 'Add firmware' | translate }}"
        class="btn btn-primary"
        type="submit"
        [ngClass]="{ 'btn-pending': saving }"
        [disabled]="
          !firmwareForm.form.valid ||
          firmwareForm.form.pristine ||
          saving ||
          (!model.binary?.url && !model.binary?.file)
        "
        translate
      >
        Add firmware
      </button>
    </div>
  </form>
</div>