<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    title="{{ 'Reload' | translate }}"
    (click)="getDeviceProfilesAndUpdateProfileItems()"
  >
    <i c8yIcon="refresh" [ngClass]="{ 'icon-spin': reloading }"></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-white">
      <div class="card-header separator">
        <h4 class="card-title" translate>Device profile</h4>
      </div>
      <div class="p-16">
        <form #deviceProfileForm="ngForm">
          <div class="input-group">
            <c8y-typeahead
              class="flex-grow"
              name="selectProfile"
              [(ngModel)]="selectedProfile"
              placeholder="{{ 'Select device profile' | translate }}"
              (onSearch)="setPipe($event)"
              [allowFreeEntries]="false"
            >
              <c8y-li
                *c8yFor="let profile of deviceProfiles; pipe: filterPipe"
                class="p-l-8 p-r-8 c8y-list__item--link"
                (click)="selectProfile(profile); setPipe('')"
              >
                <c8y-highlight
                  [text]="profile.name || '&#45;&#45;'"
                  [pattern]="pattern"
                ></c8y-highlight>
              </c8y-li>
            </c8y-typeahead>
            <div class="input-group-btn">
              <button
                class="btn btn-primary"
                (click)="createOperation()"
                title="{{ 'Assign device profile' | translate }}"
                [disabled]="!selectedProfile?.id"
                translate
              >
                Assign device profile
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- INSTALL PROFILE OPERATION -->
    <div class="bg-gray-white">
      <div class="card-header separator">
        <h4 class="card-title" translate>Currently installed</h4>
      </div>
      <div class="card-block">
        <c8y-operation-details [operation]="operation"></c8y-operation-details>
      </div>
    </div>
  </div>
  <div class="card--grid__inner-scroll flex-col no-align-items">
    <div class="d-contents">
      <!-- FIRMWARE -->
      <c8y-device-tab-profile-detail
        [sectionTitle]="'Firmware' | translate"
        [sectionIcon]="'c8y-firmware'"
        [emptyStateText]="'No firmware to display.' | translate"
        [emptyStateDetails]="'No firmware assigned.' | translate"
        [isProfileSelected]="!!selectedProfile"
        [items]="firmwareItems"
        [isEmpty]="!selectedProfile?.c8y_DeviceProfile?.firmware?.name"
        class="d-contents"
      ></c8y-device-tab-profile-detail>
    </div>
    <div class="d-contents">
      <!-- SOFTWARE -->
      <c8y-device-tab-profile-detail
        [sectionTitle]="'Software' | translate"
        [sectionIcon]="'c8y-tools'"
        [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
        "
        class="d-contents"
      ></c8y-device-tab-profile-detail>
    </div>
    <div class="d-contents">
      <!-- CONFIGURATION -->
      <c8y-device-tab-profile-detail
        [sectionTitle]="'Configuration' | translate"
        [sectionIcon]="'gears'"
        [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
        "
        [showTextLabel]="false"
        class="d-contents"
      ></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-white"></div>
      <div class="bg-gray-white"></div>
    </div>
  </div>
</div>