<div class="d-flex d-col flex-grow">
  <div class="card-header large-padding separator sticky-top">
    <h4 class="card-title" translate>Installed software</h4>
  </div>
  <div class="flex-grow">
    <fieldset
      id="operation-block"
      *ngIf="deviceSoftwareChangesOperation"
      class="card-block large-padding bg-gray-lighter"
    >
      <c8y-operation-details [operation]="deviceSoftwareChangesOperation"></c8y-operation-details>
    </fieldset>
    <fieldset class="card-block large-padding overflow-visible separator-bottom" *ngIf="showFilter">
      <div class="row">
        <div class="col-xs-6">
          <div class="input-group input-group-search">
            <input
              class="form-control"
              type="search"
              title="{{ 'Filter installed software…' | translate }}"
              placeholder="{{ 'Filter installed software…' | translate }}"
              [ngModel]="textFilter$ | async"
              (ngModelChange)="textFilter$.next($event)"
            />
            <span class="input-group-addon">
              <i c8yIcon="search" *ngIf="(textFilter$ | async).length === 0"></i>
              <i
                class="text-muted"
                c8yIcon="times"
                *ngIf="(textFilter$ | async).length > 0"
                (click)="textFilter$.next('')"
              ></i>
            </span>
          </div>
        </div>
        <div class="col-xs-6">
          <c8y-software-type
            [required]="false"
            [emitResultsOnly]="true"
            [showBtnInNotFoundMessage]="false"
            [allowFreeEntries]="false"
            [placeholder]="'Filter by software type…' | translate"
            [showClearSelectionOption]="true"
            (onSelectSoftware)="softwareTypeFilter$.next($event?.softwareType)"
          ></c8y-software-type>
        </div>
      </div>
    </fieldset>

    <fieldset
      id="software-list"
      class="flex-grow inner-scroll"
      [disabled]="deviceSoftwareChangesInProgress"
    >
      <!-- NOT EMPTY STATE -->
      <c8y-device-software-list
        [device]="device"
        [filterCriteria$]="filterCriteria$"
        [softwareList]="softwareList"
        [deviceSoftwareChanges]="deviceSoftwareChanges"
        (update)="updateSoftware($event)"
        (remove)="removeSoftware($event)"
        (onListEmpty)="showFilter = !$event"
        class="d-block p-l-16 p-r-16"
        container="body"
      >
        <!-- EMPTY STATE -->
        <div class="c8y-empty-state text-center m-t-16">
          <h1 class="c8y-icon c8y-icon-tools c8y-icon-duocolor"></h1>
          <p>
            <strong translate>No software installed.</strong> <br />
            <small translate>Click below to install software into this device.</small>
          </p>
        </div>
        <!-- NO SEARCH RESULTS STATE -->
        <div class="c8y-empty-state c8y-no-results-state text-center">
          <h1 class="c8y-icon c8y-icon-tools c8y-icon-duocolor"></h1>
          <p>
            <strong translate>No software matches your filter criteria.</strong> <br />
            <small translate>Try changing your search criteria.</small>
          </p>
        </div>
      </c8y-device-software-list>
    </fieldset>
  </div>
  <!-- INSTALL SOFTWARE-->
  <div
    class="card-footer large-padding separator sticky-bottom d-flex j-c-between bg-white"
    [ngClass]="{ 'visible-sm visible-xs': !supportsSoftwareOperations }"
  >
    <button
      *ngIf="supportsSoftwareOperations"
      class="btn btn-default"
      title="{{ 'Install software' | translate }}"
      (click)="installSoftware()"
      [disabled]="deviceSoftwareChangesInProgress"
    >
      <i c8yIcon="plus-circle"></i>
      {{ 'Install software' | translate }}
    </button>
    <button
      (click)="showSoftwareChanges.emit()"
      class="btn btn-clean text-primary visible-sm visible-xs"
      [title]="'Show &quot;Software changes&quot;' | translate"
    >
      <span translate>Show "Software changes"</span>
      <i c8yIcon="chevron-right"></i>
    </button>
  </div>
</div>

<ng-template #alreadyInstalledWarning let-item let-option="option">
  <i
    c8yIcon="warning"
    class="text-warning a-s-center"
    [tooltip]="
      alreadyInstalledMessage
        | translate: { name: item.body[0].value, version: option.body[0].value }
    "
  ></i>
</ng-template>

<ng-template #loading>
  <div class="p-relative d-flex m-l-auto">
    <i class="icon-spin" c8yIcon="circle-o-notch"></i>
  </div>
</ng-template>

<ng-template #softwareType>
  <c8y-software-type
    additionalFilter
    [required]="false"
    [placeholder]="'Filter by software type…' | translate"
    (onSelectSoftware)="search({ softwareType: $event?.softwareType })"
    [emitResultsOnly]="true"
    [showBtnInNotFoundMessage]="false"
    [allowFreeEntries]="false"
    [showClearSelectionOption]="true"
  ></c8y-software-type>
</ng-template>