<c8y-title>
  {{ (software$ | async)?.name }}
</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    label="{{ 'Management' | translate }}"
    icon="c8y-management"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    path="#/software"
    label="{{ 'Software repository' | translate }}"
    icon="c8y-tools"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    label="{{ (software$ | async)?.name }}"
    icon="c8y-tools"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    type="button"
    title="{{ 'Add software' | translate }}"
    (click)="addBaseVersion()"
    *ngIf="!(isLegacy$ | async)"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Add software' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    type="button"
    title="{{ 'Reload' | translate }}"
    (click)="reload$.next()"
  >
    <i
      c8yIcon="refresh"
      [ngClass]="{ 'icon-spin': reloading$ | async }"
    ></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-action-bar-item>

<div class="row">
  <div class="col-lg-12 col-lg-max">
    <div class="card card--fullpage">
      <div class="card-block bg-level-1 flex-no-shrink p-t-24 p-b-24 overflow-visible">
        <div class="content-flex-70">
          <div class="text-center">
            <i class="c8y-icon-duocolor icon-48 c8y-icon c8y-icon-tools"></i>
            <p>
              <small class="label label-info">Software</small>
            </p>
          </div>
          <div class="flex-grow col-10">
            <div class="row">
              <div class="col-sm-6">
                <c8y-form-group>
                  <label class="control-label">
                    {{ 'Name' | translate }}
                  </label>
                  <div class="input-group input-group-editable">
                    <input
                      #nameInput
                      type="text"
                      class="form-control"
                      [ngModel]="(software$ | async)?.name"
                      #nameModel="ngModel"
                      placeholder="{{ 'e.g. My software' | translate }}"
                      [ngStyle]="{ 'width.ch': (software$ | async)?.name?.length + 2 || 31 }"
                      required
                    />
                    <span></span>
                    <div class="input-group-btn">
                      <button
                        class="btn btn-primary"
                        type="button"
                        title="{{ 'Save' | translate }}"
                        (click)="updateSoftware$.next({ name: nameInput.value }); nameModel.reset()"
                        [disabled]="nameInput.value.length === 0"
                      >
                        {{ 'Save' | translate }}
                      </button>
                    </div>
                  </div>
                </c8y-form-group>
              </div>
              <div class="col-sm-6">
                <c8y-form-group>
                  <label class="control-label">
                    {{ 'Description' | translate }}
                  </label>
                  <div class="input-group input-group-editable">
                    <input
                      #descriptionInput
                      type="text"
                      class="form-control"
                      [ngModel]="(software$ | async)?.description"
                      #descriptionModel="ngModel"
                      placeholder="{{ 'e.g. Cloud connectivity software' | translate }}"
                      [ngStyle]="{ 'width.ch': (software$ | async)?.description?.length + 2 || 31 }"
                    />
                    <span></span>
                    <div class="input-group-btn">
                      <button
                        class="btn btn-primary"
                        type="button"
                        title="{{ 'Save' | translate }}"
                        (click)="
                          updateSoftware$.next({ description: descriptionInput.value });
                          descriptionModel.reset()
                        "
                      >
                        {{ 'Save' | translate }}
                      </button>
                    </div>
                  </div>
                </c8y-form-group>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6">
                <c8y-form-group>
                  <label class="control-label">
                    {{ 'Device type' | translate }}
                    <button
                      class="btn-help"
                      type="button"
                      [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
                      }}"
                      triggers="focus"
                      container="body"
                    >
                      <i c8yIcon="question-circle-o"></i>
                    </button>
                  </label>
                  <div class="input-group input-group-editable">
                    <input
                      #deviceTypeInput
                      type="text"
                      class="form-control"
                      [ngModel]="(software$ | async)?.c8y_Filter?.type"
                      #deviceTypeModel="ngModel"
                      placeholder="{{ 'e.g.' | translate }} c8y_Linux"
                      [ngStyle]="{ 'width.ch': (software$ | async)?.type?.length + 2 || 31 }"
                    />
                    <span></span>
                    <div class="input-group-btn">
                      <button
                        class="btn btn-primary"
                        type="button"
                        title="{{ 'Save' | translate }}"
                        (click)="
                          updateSoftware$.next({ c8y_Filter: { type: deviceTypeInput.value } });
                          deviceTypeModel.reset()
                        "
                      >
                        {{ 'Save' | translate }}
                      </button>
                    </div>
                  </div>
                </c8y-form-group>
              </div>
              <div class="col-sm-6">
                <c8y-form-group>
                  <label class="control-label">
                    {{ 'Software type' | translate }}
                  </label>
                  <div class="input-group input-group-editable">
                    <c8y-software-type
                      [softwareTypeMO]="softwareTypeObject"
                      [style]="{ 'width.ch': softwareTypeObject?.softwareType?.length + 2 || 31 }"
                      (onSelectSoftware)="onSelectSoftwareType($event)"
                    ></c8y-software-type>
                    <div class="input-group-btn">
                      <button
                        class="btn btn-primary"
                        type="button"
                        title="{{ 'Save' | translate }}"
                        [ngClass]="isSoftwareTypeChanged ? '' : 'hidden'"
                        [disabled]="softwareTypeObject?.softwareType === ''"
                        (click)="
                          updateSoftware$.next({ softwareType: softwareTypeObject.softwareType });
                          softwareType.resetInput();
                          isSoftwareTypeChanged = false
                        "
                      >
                        {{ 'Save' | translate }}
                      </button>
                    </div>
                  </div>
                </c8y-form-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="inner-scroll">
        <div class="card-header separator-top-bottom sticky-top bg-component">
          <div
            class="card-title"
            translate
          >
            Versions
          </div>
        </div>

        <div class="card-block p-t-0 p-b-24">
          <c8y-ui-empty-state
            *ngIf="(baseVersions$ | async)?.data.length === 0"
            [icon]="'c8y-tools'"
            [title]="'No versions to display.' | translate"
            [subtitle]="'Add a new version by clicking below.' | translate"
          >
            <p>
              <button
                class="btn btn-primary"
                type="button"
                title="{{ 'Add software' | translate }}"
                (click)="addBaseVersion()"
              >
                {{ 'Add software' | translate }}
              </button>
            </p>
          </c8y-ui-empty-state>

          <c8y-list-group *ngIf="(baseVersions$ | async)?.data.length > 0">
            <c8y-li
              *c8yFor="let baseVersion of baseVersions$ | async; let i = index; loadMore: 'auto'"
            >
              <c8y-li-icon>
                <i c8yIcon="c8y-tools"></i>
              </c8y-li-icon>

              <c8y-li-body class="content-flex-50">
                <div class="col-4">
                  <p
                    class="text-truncate-wrap"
                    title="{{ baseVersion.c8y_Software.version }}"
                  >
                    {{ baseVersion.c8y_Software.version }}
                  </p>
                </div>
                <div class="col-5">
                  <p class="text-truncate-wrap">
                    <span
                      class="text-label-small m-r-8"
                      translate
                    >
                      File
                    </span>
                    <ng-container
                      *ngIf="baseVersion?.c8y_Software?.url === '$PROVIDED'; else fileDownload"
                    >
                      <span title="{{ 'Provided by device' | translate }}">
                        {{ 'Provided by device' | translate }}
                      </span>
                    </ng-container>

                    <ng-template #fileDownload>
                      <span title="{{ getBinaryName$(baseVersion.c8y_Software.url) | async }}">
                        <c8y-file-download [url]="baseVersion.c8y_Software.url"></c8y-file-download>
                      </span>
                    </ng-template>
                  </p>
                </div>
                <div class="col-2 d-flex a-i-start">
                  <span
                    *ngIf="isLegacy$ | async"
                    class="label label-warning m-l-auto-sm"
                  >
                    {{ 'Legacy' | translate }}
                  </span>

                  <div
                    class="fit-h-20"
                    *ngIf="!(isLegacy$ | async)"
                  >
                    <button
                      class="btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8"
                      type="button"
                      title="{{ 'Delete' | translate }}"
                      (click)="deleteBaseVersion(baseVersion)"
                    >
                      <i c8yIcon="delete"></i>
                      {{ 'Delete' | translate }}
                    </button>
                  </div>
                </div>
                <div
                  *ngIf="!(isLegacy$ | async)"
                  class="m-l-auto fit-h-20 hidden-xs"
                >
                  <button
                    class="btn btn-dot text-danger showOnHover"
                    type="button"
                    data-cy="software-details-component--Delete-button"
                    [attr.aria-label]="'Delete' | translate"
                    tooltip="{{ 'Delete' | translate }}"
                    [delay]="500"
                    (click)="deleteBaseVersion(baseVersion)"
                  >
                    <i c8yIcon="delete"></i>
                  </button>
                </div>
              </c8y-li-body>
            </c8y-li>
          </c8y-list-group>
        </div>
      </div>
    </div>
  </div>
</div>