<div
  class="responsive-grid-table-wrapper--300 responsive-grid-table-wrapper--striped inner-scroll separator-top"
  style="max-height: 300px"
>
  @let keys = keys$ | async;
  @let resolvedAssets = resolvedAssets$ | async;
  @let allMappings = mappings$ | async;
  @if (!keys?.length) {
    <div class="p-24">
      <c8y-ui-empty-state
        icon="code"
        [title]="emptyStateTitle() | translate"
        [subtitle]="emptyStateSubtitle() | translate"
      ></c8y-ui-empty-state>
    </div>
  } @else {
    @for (key of keys; track key) {
      @let mapping = allMappings?.[key];
      @let property = mapping?.assetProperty;
      @let asset = resolvedAssets?.get(property?.asset?.id);
      <div
        class="responsive-grid-table responsive-grid-table__body responsive-grid-table--condensed responsive-grid-table--separator p-l-16"
      >
        @if (showLabels()) {
          <div
            [class]="'col-' + row1ColumnSpans.label"
            [attr.aria-label]="'Label' | translate"
          >
            <div class="fit-w">
              <p class="text-label-small">{{ 'Label' | translate }}</p>
              @if (allowRelabellingMappings()) {
                <c8y-input-group-editable
                  name="label-{{ key }}"
                  size="sm"
                  formGroupClass="m-b-0"
                  [ariaLabel]="'Label' | translate"
                  [ngModel]="mapping?.label || key"
                  [validators]="getLabelValidators(key)"
                  (ngModelChange)="saveLabel(key, $event)"
                >
                  <c8y-message
                    name="label-already-used"
                    [text]="'Label already used. Use a different one.' | translate"
                  ></c8y-message>
                </c8y-input-group-editable>
              } @else {
                <span class="tag tag--default text-bold">{{ mapping?.label || key }}</span>
              }
            </div>
          </div>
        }
        @if (showNames()) {
          <div
            [class]="'col-' + row1ColumnSpans.name"
            [attr.aria-label]="'Name' | translate"
          >
            <div class="fit-w">
              <p class="text-label-small">{{ 'Name' | translate }}</p>
              @if (allowRenamingMappings()) {
                <c8y-input-group-editable
                  class="text-bold"
                  name="name-{{ key }}"
                  size="sm"
                  formGroupClass="m-b-0"
                  [ariaLabel]="'Name' | translate"
                  [ngModel]="key"
                  [validators]="getNameValidators(key)"
                  (ngModelChange)="saveName(key, $event)"
                >
                  <c8y-message
                    name="key-already-used"
                    [text]="'Name already used. Use a different one.' | translate"
                  ></c8y-message>
                  <c8y-message
                    name="key-invalid-format"
                    [text]="mappingNameFormatErrorMessage() | translate"
                  ></c8y-message>
                </c8y-input-group-editable>
              } @else {
                {{ key }}
              }
            </div>
          </div>
        }
        <div [class]="'showOnHover col-' + actionsColumnSpan()">
          <div class="col-actions fit-w min-width-0">
            <button
              class="btn-dot btn-sm m-0"
              [attr.aria-label]="'Copy mapping to clipboard' | translate"
              tooltip="{{ 'Copy mapping to clipboard' | translate }}"
              type="button"
              [delay]="500"
              (click)="copyMappingToClipboard(key, mapping!)"
            >
              <i
                class="icon-14"
                c8yIcon="clipboard"
                aria-hidden="true"
              ></i>
            </button>
            @if (allowEditingMappings() && !mapping?.assetProperty) {
              <button
                class="btn-dot btn-sm m-0"
                [attr.aria-label]="'Assign property' | translate"
                tooltip="{{ 'Assign property' | translate }}"
                type="button"
                [delay]="500"
                [disabled]="isDrawerOpen()"
                (click)="editMapping(key, mapping!)"
              >
                <i
                  class="icon-14"
                  c8yIcon="pencil"
                  aria-hidden="true"
                ></i>
              </button>
            }
            @if (allowEditingMappings() && mapping?.assetProperty) {
              <button
                class="btn-dot btn-sm m-0"
                [attr.aria-label]="'Clear mapping' | translate"
                tooltip="{{ 'Clear mapping' | translate }}"
                type="button"
                [delay]="500"
                (click)="clearMapping(key)"
              >
                <i
                  class="icon-14"
                  c8yIcon="remove-property"
                  aria-hidden="true"
                ></i>
              </button>
            }
            @if (allowRemovingMappings()) {
              <button
                class="btn-dot btn-sm btn-dot--danger m-0"
                [attr.aria-label]="'Remove mapping' | translate"
                tooltip="{{ 'Remove mapping' | translate }}"
                type="button"
                [delay]="500"
                (click)="removeMapping(key)"
              >
                <i
                  class="icon-14"
                  c8yIcon="minus-circle"
                  aria-hidden="true"
                ></i>
              </button>
            }
          </div>
        </div>
        @if (showAssets()) {
          <div
            [class]="'p-b-16 col-' + row2ColumnSpans.asset"
            [attr.aria-label]="'Asset' | translate"
          >
            <div class="min-width-0">
              <p class="text-label-small">{{ 'Asset' | translate }}</p>
              {{ mapping?.assetProperty?.asset?.name || mapping?.assetProperty?.asset?.id || '—' }}
            </div>
          </div>
        }
        @if (showProperties()) {
          <div
            [class]="'p-b-16 col-' + row2ColumnSpans.property"
            [attr.aria-label]="'Property' | translate"
          >
            <div class="min-width-0">
              <p class="text-label-small">{{ 'Property' | translate }}</p>
              {{ property?.label || property?.name || '—' }}
            </div>
          </div>
        }
        @if (showValues()) {
          <div
            [class]="'p-b-16 col-' + row2ColumnSpans.value"
            [attr.aria-label]="'Value' | translate"
          >
            <div class="min-width-0">
              <p class="text-label-small">{{ 'Value' | translate }}</p>
              @if (property && asset) {
                @let value = (property | c8yAssetPropertyValue: asset | async) ?? '—';
                <samp
                  class="text-truncate min-width-0"
                  title="{{ value }}"
                >
                  {{ value }}
                </samp>
              }
            </div>
          </div>
        }
      </div>
    }
  }
</div>
@if (allowAddingNewMappings() || (allowRemovingMappings() && (keys$ | async)?.length)) {
  <div class="p-16 separator-top d-flex j-c-between a-i-center">
    @if (allowAddingNewMappings()) {
      <button
        class="btn btn-default btn-sm"
        type="button"
        [disabled]="isDrawerOpen()"
        (click)="addMappings()"
      >
        <i
          c8yIcon="plus-circle"
          aria-hidden="true"
        ></i>
        {{ 'Add mappings' | translate }}
      </button>
    }
    @if (allowRemovingMappings() && (keys$ | async)?.length) {
      <button
        class="btn btn-danger btn-sm"
        type="button"
        [disabled]="isDrawerOpen()"
        (click)="removeAllMappings()"
      >
        <i
          c8yIcon="minus-circle"
          aria-hidden="true"
        ></i>
        {{ 'Remove all mappings' | translate }}
      </button>
    }
  </div>
}

<c8y-widget-config-feedback>
  <span class="tag tag--info chip text-12 m-4">
    {{ feedbackMessage() | translate: { count: keys?.length ?? 0 } }}
  </span>
</c8y-widget-config-feedback>