<div class="card borderless">
  <div
    class="card-block p-0 bg-inherit"
    style="height: 315px"
  >
    @if (widgetConfigService.isDeviceTypeDashboard$ | async) {
      <div class="alert alert-info m-4">
        <span translate>
          This widget is used within a dashboard template, so the asset selector is unavailable. The
          widget automatically inherits the asset from the context in which the dashboard is
          displayed.
        </span>

        @if (!isRequired) {
          <div class="p-t-8">
            <p translate>Asset selection is optional for this widget.</p>
            @if (!selectedDevice) {
              <button
                class="btn btn-primary btn-sm m-t-8 text-truncate"
                (click)="selectCurrentContext()"
                ngNonBindable
                translate
                [translateParams]="{
                  deviceName:
                    (widgetConfigService.currentConfig$ | async)?.settings?.context?.name ||
                    (deviceWithIdTpl
                      | translate
                        : {
                            id: (widgetConfigService.currentConfig$ | async)?.settings?.context?.id
                          })
                }"
              >
                Use context asset "{{ deviceName }}"
              </button>
            }
            @if (selectedDevice) {
              <button
                class="btn btn-default btn-sm m-t-8 text-truncate"
                (click)="selectedDevice = null; updateConfig(null)"
                ngNonBindable
                translate
                [translateParams]="{
                  deviceName:
                    selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id })
                }"
              >
                Use without asset "{{ deviceName }}"
              </button>
            }
          </div>
        }
      </div>
    }
    @if (!(widgetConfigService.isDeviceTypeDashboard$ | async) && assetSelectorConfig) {
      <c8y-asset-selector-miller
        class="d-block bg-inherit p-relative"
        name="configAsset"
        (onSelected)="selectionChanged($event)"
        [config]="assetSelectorConfig"
        [asset]="(widgetConfigService.currentConfig$ | async).settings?.context"
        [(ngModel)]="selectedDevice"
        [required]="isRequired"
      ></c8y-asset-selector-miller>
    }

    <c8y-widget-config-feedback>
      <span
        class="tag chip text-12"
        [ngClass]="{
          'tag--info': selectedDevice || !isRequired,
          'tag--danger': !selectedDevice && isRequired
        }"
      >
        @if (
          selectedDevice &&
          (!(widgetConfigService.isDeviceTypeDashboard$ | async) ||
            (!isRequired && (widgetConfigService.isDeviceTypeDashboard$ | async)))
        ) {
          <button
            class="btn-clean text-12 m-r-4"
            title="{{ 'Deselect' | translate }}"
            type="button"
            (click)="selectedDevice = null; updateConfig(null)"
          >
            <i c8yIcon="times"></i>
          </button>
        }
        @if (selectedDevice) {
          <span
            class="text-truncate"
            title="{{
              selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id })
            }}"
          >
            {{ selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id }) }}
          </span>
        }
        @if (!selectedDevice) {
          <span translate>No asset selected</span>
        }
      </span>
    </c8y-widget-config-feedback>
  </div>
</div>