<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'c8y-tools'"></i>
    <h4 translate>Add software</h4>
  </div>
  <div class="p-16 text-center separator-bottom" *ngIf="!softwarePreselected">
    <p class="lead m-0" translate>Select or create new software</p>
  </div>
  <form
    class="d-contents"
    autocomplete="off"
    #softwareForm="ngForm"
    (ngSubmit)="softwareForm.form.valid && save()"
  >
    <div class="modal-inner-scroll">
      <div class="modal-body">
        <div [hidden]="softwarePreselected">
          <c8y-form-group>
            <label for="softwareName" translate>Software</label>
            <c8y-typeahead
              [(ngModel)]="model.selected"
              name="softwareName"
              placeholder="{{ 'Select or enter' | translate }}"
              (onSearch)="onInput.next($event)"
              [required]="true"
            >
              <c8y-li
                *c8yFor="
                  let software of softwaresResult;
                  loadMore: 'auto';
                  notFound: notFoundTemplate
                "
                class="p-l-8 p-r-8 c8y-list__item--link"
                (click)="onSoftwareSelect(software)"
                [active]="model.selected === software"
              >
                <c8y-highlight
                  [text]="software.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`software`' | translate }}"
                    type="button"
                    class="btn btn-primary btn-xs m-l-8"
                    translate
                  >
                    Add new`software`
                  </button>
                </c8y-li>
              </ng-template>
            </c8y-typeahead>
          </c8y-form-group>

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

          <c8y-form-group>
            <label class="control-label" for="softwareDeviceTypeFilter">
              {{ 'Device type filter' | translate }}
              <button
                class="btn btn-clean text-primary"
                popover="{{
                  'If the filter is set, the software 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="softwareDeviceTypeFilter"
              class="form-control"
              name="softwareDeviceTypeFilter"
              [(ngModel)]="model.deviceType"
              placeholder="{{ 'e.g.' | translate }} c8y_Linux"
              [disabled]="model.selected?.id"
            />
          </c8y-form-group>

          <c8y-form-group>
            <label for="softwareType" translate>Software type</label>
            <c8y-software-type
              [softwareTypeMO]="model.softwareType"
              [disabled]="model.selected?.id"
              (onSelectSoftware)="model.softwareType = $event"
            >
            </c8y-software-type>
          </c8y-form-group>
        </div>

        <c8y-form-group>
          <label for="softwareVersion" translate>Version</label>
          <input
            id="softwareVersion"
            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>Software file</div>
          <c8y-file-picker
            [maxAllowedFiles]="1"
            (onFilesPicked)="onFile($event)"
            [fileUrlPopover]="textForSoftwareUrlPopover"
          >
          </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 software' | translate }}"
        class="btn btn-primary"
        type="submit"
        [ngClass]="{ 'btn-pending': saving }"
        [disabled]="
          !softwareForm.form.valid ||
          softwareForm.form.pristine ||
          saving ||
          (!model.binary?.url && !model.binary?.file)
        "
        translate
      >
        Add software
      </button>
    </div>
  </form>
</div>