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

<div class="card card--grid--fullpage card--grid--fullpage card--grid grid__row--2-10--md">
  <div class="card--grid grid__col--6-6--md">
    <!-- AVAILABLE PROFILES -->
    <div class="bg-level-0">
      <div class="card-header separator">
        <div
          class="card-title"
          translate
        >
          Device profile
        </div>
      </div>
      <div class="p-16">
        <form #deviceProfileForm="ngForm">
          <div class="input-group">
            <c8y-typeahead
              class="flex-grow"
              placeholder="{{ 'Select device profile' | translate }}"
              name="selectProfile"
              data-cy="device-tab-profile--select-device-profile"
              [(ngModel)]="selectedProfile"
              (onSearch)="pattern$.next($event)"
              [allowFreeEntries]="false"
            >
              <c8y-li
                class="p-l-8 p-r-8 c8y-list__item--link"
                *c8yFor="let profile of deviceProfiles$; pipe: filterPipe"
                (click)="selectProfile(profile); pattern$.next('')"
              >
                <c8y-highlight
                  [text]="profile.name || '&#45;&#45;'"
                  [pattern]="pattern$.value"
                ></c8y-highlight>
              </c8y-li>
            </c8y-typeahead>
            <div class="input-group-btn">
              <button
                class="btn btn-primary"
                title="{{ 'Assign device profile' | translate }}"
                type="button"
                (click)="createOperation()"
                data-cy="device-tab-profile--Assign-device-profile-button"
                [disabled]="!selectedProfile?.id"
                c8yProductExperience
                inherit
                [actionData]="{ action: PRODUCT_EXPERIENCE.ACTIONS.ASSIGN_DEVICE_PROFILE }"
              >
                <span>{{ 'Assign device profile' | translate }}</span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- INSTALL PROFILE OPERATION -->
    <div class="bg-level-1">
      <div class="card-header separator">
        <div
          class="card-title"
          translate
        >
          Currently installed
        </div>
      </div>
      <div class="card-block">
        <c8y-operation-details
          [operation]="operation"
          c8yProductExperience
          inherit
          suppressDataOverriding
        ></c8y-operation-details>
      </div>
    </div>
  </div>
  <div class="card--grid__inner-scroll d-col no-align-items">
    <div class="d-contents">
      <!-- FIRMWARE -->
      <c8y-device-tab-profile-detail
        class="d-contents"
        [sectionIcon]="'c8y-firmware'"
        [sectionTitle]="'Firmware' | translate"
        [emptyStateText]="'No firmware to display.' | translate"
        [emptyStateDetails]="'No firmware assigned.' | translate"
        [isProfileSelected]="!!selectedProfile"
        [items]="firmwareItems"
        [isEmpty]="!selectedProfile?.c8y_DeviceProfile?.firmware?.name"
      ></c8y-device-tab-profile-detail>
    </div>
    <div class="d-contents">
      <!-- SOFTWARE -->
      <c8y-device-tab-profile-detail
        class="d-contents"
        [sectionIcon]="'c8y-tools'"
        [sectionTitle]="'Software' | translate"
        [emptyStateText]="'No software to display.' | translate"
        [emptyStateDetails]="'No software assigned.' | translate"
        [isProfileSelected]="!!selectedProfile"
        [items]="softwareItems"
        [isEmpty]="
          !selectedProfile?.c8y_DeviceProfile?.software ||
          selectedProfile?.c8y_DeviceProfile?.software?.length === 0
        "
      ></c8y-device-tab-profile-detail>
    </div>
    <div class="d-contents">
      <!-- CONFIGURATION -->
      <c8y-device-tab-profile-detail
        class="d-contents"
        [sectionIcon]="'gears'"
        [sectionTitle]="'Configuration' | translate"
        [emptyStateText]="'No configuration to display' | translate"
        [emptyStateDetails]="'No configuration assigned' | translate"
        [isProfileSelected]="!!selectedProfile"
        [items]="configurationItems"
        [isEmpty]="
          !selectedProfile?.c8y_DeviceProfile?.configuration ||
          selectedProfile?.c8y_DeviceProfile?.configuration?.length === 0
        "
      ></c8y-device-tab-profile-detail>
    </div>
    <!-- fill in the remanining vertical space when empty -->
    <div class="card--grid grid__col--6-6--md flex-grow">
      <div class="bg-level-0"></div>
      <div class="bg-level-1"></div>
    </div>
  </div>
</div>