<div
  class="d-grid grid__row--1 fit-h"
  [ngClass]="{
    'grid__col--3-6-3--md': allowChangingContext && !hideSelection,
    'grid__col--8-4--md': !allowChangingContext && !hideSelection,
    'grid__col--4-8--md': allowChangingContext && hideSelection
  }"
>
  @if (allowChangingContext) {
    <div class="d-flex d-col p-relative bg-level-1">
      <c8y-asset-selector-miller
        class="d-contents"
        [(ngModel)]="contextAsset"
        [asset]="contextAsset"
        (onSelected)="selectionChanged($event)"
        [container]="''"
        [config]="{
          view: 'miller',
          groupsSelectable: true,
          columnHeaders: true,
          showChildDevices: true,
          showUnassignedDevices: true,
          singleColumn: true,
          search: allowSearch,
          showFilter: true
        }"
      ></c8y-asset-selector-miller>
    </div>
  }

  <div class="bg-component inner-scroll">
    <c8y-asset-property-tabs
      class="bg-component d-contents"
      [asset]="assetSelection | async"
      [config]="config"
      [selectedProperties]="selectedProperties"
      [hiddenTabs]="hiddenTabs"
      [showSearch]="true"
      (selectedPropertiesChange)="onSelectedProperties($event)"
    ></c8y-asset-property-tabs>
  </div>

  @if (!hideSelection) {
    <div class="inner-scroll bg-level-1">
      <p
        class="text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate"
        [title]="'Selected properties' | translate"
      >
        {{ 'Selected properties' | translate }}
      </p>
      @if (selectedProperties?.length) {
        <div class="d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16">
          @for (selectedProp of selectedProperties; track selectedProp.label) {
            <div
              [ngClass]="{
                'c8y-datapoint-pill': selectedProp.computed && selectedProp.config,
                'c8y-alarm-pill': !(selectedProp.computed && selectedProp.config)
              }"
            >
              <button
                class="c8y-alarm-pill__btn"
                [title]="'Remove' | translate"
                type="button"
                (click)="propertyRemoved(selectedProp)"
              >
                <i
                  class="icon-14"
                  c8yIcon="remove"
                ></i>
              </button>
              @if (selectedProp.computed && selectedProp.config) {
                <button
                  class="c8y-datapoint-pill__btn"
                  title="{{ 'Configure' | translate }}"
                  (click)="editProperty(selectedProp)"
                >
                  <i [c8yIcon]="'cog'"></i>
                </button>
              }
              @let label =
                selectedProp.label || selectedProp.title || selectedProp.name | translate;
              <div
                class="c8y-alarm-pill__label"
                [title]="selectedProp | c8yAssetPropertyLabel"
              >
                <button
                  class="btn-clean m-r-4"
                  [attr.aria-label]="selectedProp | c8yAssetPropertyIconTooltip"
                  tooltip="{{ selectedProp | c8yAssetPropertyIconTooltip }}"
                  container="body"
                  type="button"
                  [delay]="500"
                >
                  <i [c8yIcon]="selectedProp | c8yAssetPropertyIcon"></i>
                </button>
                <span class="text-truncate">
                  <span class="text-truncate">{{ label }}</span>
                  @if (selectedProp.config) {
                    <small
                      class="text-muted"
                      title="{{ selectedProp.config | json }}"
                      >{{ selectedProp.config | json }}</small
                    >
                  }
                </span>
              </div>
            </div>
          }
        </div>
      }

      @if (!selectedProperties || !selectedProperties.length) {
        <div class="p-r-8">
          <c8y-ui-empty-state
            [icon]="'c8y-data-points'"
            [title]="'No properties to display' | translate"
            [subtitle]="
              'Select the asset, then on the available properties list, select desired property.'
                | translate
            "
            [horizontal]="true"
          ></c8y-ui-empty-state>
        </div>
      }
    </div>
  }
</div>