<div
  class="d-flex m-b-8"
  style="margin-top: -16px"
>
  <em
    class="m-l-24 text-muted"
    translate
  >
    How to use properties in the widget
  </em>
  <button
    class="btn-help btn-help--sm"
    [attr.aria-label]="'Help' | translate"
    [popover]="helpContent"
    placement="right"
    triggers="focus"
    container="body"
    type="button"
  ></button>
</div>
<c8y-asset-property-list
  class="inner-scroll bg-inherit d-block"
  style="max-height: 450px"
  [asset]="(widgetConfigService.currentConfig$ | async).device"
  [config]="{
    selectMode: 'none',
    expansionMode: 'expandedByDefault',
    filterable: false,
    allowDragAndDrop: true
  }"
>
  <button
    class="btn-dot btn fit-h"
    [attr.aria-label]="'Copy' | translate"
    tooltip="{{ 'Copy' | translate }}"
    type="button"
    *c8yAssetPropertyAction="let context"
    [delay]="500"
    (click)="copyProperty(context)"
  >
    <i class="dlt-c8y-icon-copy"></i>
  </button>
</c8y-asset-property-list>

<ng-template #helpContent>
  <p
    class="p-b-8"
    translate
  >
    Click the copy icon next to a property, then paste it into the HTML editor below as a template
    literal.
  </p>
</ng-template>