<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'c8y-tools'"></i>
    <div
      class="modal-title"
      id="addSoftwareModalTitle"
      translate
    >
      Add software
    </div>
  </div>
  @if (!softwarePreselected) {
    <div class="p-16 text-center separator-bottom">
      <p
        class="text-medium text-16"
        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"
        id="addSoftwareModalDescription"
      >
        <div [hidden]="softwarePreselected">
          <c8y-form-group>
            <label
              for="softwareName"
              translate
            >
              Software
            </label>
            <c8y-typeahead
              placeholder="{{ 'Select or enter' | translate }}"
              name="softwareName"
              [(ngModel)]="model.selected"
              (onSearch)="onInput.next($event)"
              [required]="true"
            >
              <c8y-li
                class="p-l-8 p-r-8 c8y-list__item--link"
                *c8yFor="
                  let software of softwaresResult;
                  loadMore: 'auto';
                  notFound: notFoundTemplate
                "
                (click)="onSoftwareSelect(software)"
                [active]="model.selected === software"
              >
                <c8y-highlight
                  [text]="software.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`software`' | translate }}"
                      type="button"
                    >
                      {{ 'Add new`software`' | translate }}
                    </button>
                  </c8y-li>
                }
              </ng-template>
            </c8y-typeahead>
          </c8y-form-group>

          <c8y-form-group>
            <label
              for="softwareDescription"
              translate
            >
              Description
            </label>
            <input
              class="form-control"
              id="softwareDescription"
              placeholder="{{ 'e.g. Cloud connectivity software' | translate }}"
              name="description"
              autocomplete="off"
              [(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="softwareDeviceTypeFilter"
            >
              {{ 'Device type filter' | translate }}
              <button
                class="btn-help"
                [attr.aria-label]="'Help' | translate"
                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
                }}"
                placement="right"
                triggers="focus"
                container="body"
                type="button"
              ></button>
            </label>
            <input
              class="form-control"
              id="softwareDeviceTypeFilter"
              placeholder="{{ 'e.g.' | translate }} c8y_Linux"
              name="softwareDeviceTypeFilter"
              [(ngModel)]="model.deviceType"
              [disabled]="model.selected?.id"
              [pattern]="ValidationPattern.rules.noWhiteSpaceOnly.pattern"
            />
          </c8y-form-group>

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

        <c8y-form-group>
          <label
            for="softwareVersion"
            translate
          >
            Version
          </label>
          <input
            class="form-control"
            id="softwareVersion"
            placeholder="{{ 'e.g.' | translate }} 1.0.0"
            name="version"
            autocomplete="off"
            [(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
          >
            Software file
          </div>
          <c8y-file-picker
            [maxAllowedFiles]="1"
            [allowedUploadChoices]="['uploadBinary', 'uploadUrl', 'provided']"
            (onFilesPicked)="onFile($event)"
            [fileUrlPopover]="textForSoftwareUrlPopover"
          ></c8y-file-picker>
        </c8y-form-group>
      </div>
    </div>
    <div class="modal-footer">
      <button
        class="btn btn-default"
        title="{{ 'Cancel' | translate }}"
        type="button"
        (click)="cancel()"
        [disabled]="saving"
      >
        {{ 'Cancel' | translate }}
      </button>

      <button
        class="btn btn-primary"
        title="{{ 'Add software' | translate }}"
        type="submit"
        [ngClass]="{ 'btn-pending': saving }"
        [disabled]="
          !softwareForm.form.valid ||
          softwareForm.form.pristine ||
          saving ||
          (model.binary?.url == null && !model.binary?.file)
        "
        c8yProductExperience
        [actionName]="PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.REPOSITORY"
        [actionData]="{
          component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.ADD_SOFTWARE_MODAL,
          result:
            softwarePreselected || model.selected?.id
              ? PRODUCT_EXPERIENCE.SOFTWARE.RESULTS.ADD_SOFTWARE_VERSION
              : PRODUCT_EXPERIENCE.SOFTWARE.RESULTS.ADD_SOFTWARE
        }"
      >
        {{ 'Add software' | translate }}
      </button>
    </div>
  </form>
</div>