<fieldset class="c8y-fieldset bg-level-1 overflow-hidden p-0">
  <legend class="m-l-16">{{ 'Properties column settings (drag to reorder)' | translate }}</legend>
  <c8y-list-group
    class="inner-scroll bg-inherit d-block no-border-last separator-top"
    style="max-height: 300px"
    role="list"
    data-cy="selected-properties"
    cdkDropList
    (cdkDropListDropped)="onColumnDrop($event)"
  >
    @for (column of columns; track trackByColumnName($index, column)) {
      @if (!column.positionFixed) {
        <c8y-li
          role="listitem"
          cdkDrag
          cdkDragLockAxis="y"
          [ngClass]="{ 'empty-actions': !column.isOperation }"
        >
          <c8y-li-drag-handle
            title="{{ 'Drag to reorder' | translate }}"
            [attr.aria-label]="'Drag to reorder' | translate"
            cdkDragHandle
          >
            <i
              c8yIcon="drag-reorder"
              style="font-size: 0.7em"
            ></i>
          </c8y-li-drag-handle>
          @if (column.__origin !== 'status') {
            <c8y-li-checkbox
              class="a-s-stretch"
              title="{{ (column.header | translate) || column.name }} {{
                column.custom ? (customLabel | translate) : ''
              }}"
              [attr.aria-label]="'Show/hide column' | translate"
              [(ngModel)]="column.visible"
              (ngModelChange)="toggleColumnVisibility(column)"
              c8yProductExperience
              [attr.data-cy]="'data-grid--custom-column-header-' + column.header"
            ></c8y-li-checkbox>
          } @else {
            <c8y-li-checkbox class="a-s-stretch no-pointer invisible"></c8y-li-checkbox>
          }
          <div class="content-flex-32 p-t-4 p-b-4">
            <div class="col-6">
              @if (column.__origin !== 'status') {
                <c8y-input-group-editable
                  required
                  size="sm"
                  formGroupClass="m-b-0"
                  [ariaLabel]="'Column header' | translate"
                  [placeholder]="'Column header' | translate"
                  [(ngModel)]="column.header"
                  (save)="updateColumnNames(column)"
                ></c8y-input-group-editable>
              } @else {
                <p class="text-12 p-t-4 p-b-4">{{ column.header | translate }}</p>
              }
            </div>
            <div class="col-6">
              <div class="d-flex a-i-center gap-8 p-t-4 p-b-4">
                <!-- Filters button -->
                @if (column.filteringConfig) {
                  <div class="d-flex a-i-center gap-4 flex-no-shrink">
                    <div
                      class="dropdown d-flex"
                      container="body"
                      dropdown
                      [insideClick]="true"
                      c8yDropdownFocusTrap
                      #gridHeaderDropdown="bs-dropdown"
                    >
                      <button
                        class="dropdown-toggle btn btn-icon btn-default btn-xs c8y-dropdown"
                        [attr.aria-label]="'Filter' | translate"
                        tooltip="{{ 'Filter' | translate }}"
                        placement="top"
                        container="body"
                        [attr.aria-haspopup]="true"
                        [attr.aria-expanded]="gridHeaderDropdown.isOpen"
                        type="button"
                        [delay]="500"
                        [ngClass]="{ active: isColumnFiltered(column) }"
                        dropdownToggle
                      >
                        <i c8yIcon="filter"></i>
                      </button>
                      <div
                        class="dropdown-menu"
                        (click)="$event.stopPropagation()"
                        *dropdownMenu
                      >
                        <formly-form
                          class="p-16 d-block"
                          style="min-width: 250px"
                          [form]="column.filteringConfig.formGroup"
                          [fields]="column.filteringConfig.fields"
                          [model]="column.filteringConfig.model"
                        ></formly-form>
                        <div class="p-16 fit-w d-flex separator-top">
                          <button
                            class="btn btn-default btn-sm m-r-8 grow"
                            title="{{ 'Reset' | translate }}"
                            (click)="resetFilter(column, gridHeaderDropdown)"
                            translate
                          >
                            Reset
                          </button>
                          <button
                            class="btn btn-primary btn-sm grow"
                            title="{{ 'Apply' | translate }}"
                            (click)="applyFilter(column, gridHeaderDropdown)"
                            translate
                          >
                            Apply
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                }
                <!-- Sort button -->
                <div class="d-flex a-i-center gap-4 flex-no-shrink">
                  <button
                    class="btn btn-icon btn-default btn-xs"
                    [attr.aria-label]="'Sort order' | translate"
                    tooltip="{{ 'Sort order' | translate }}"
                    placement="top"
                    type="button"
                    [delay]="500"
                    (click)="changeSortOrder(column)"
                  >
                    @if (column.sortOrder === 'asc') {
                      <i c8yIcon="long-arrow-up"></i>
                    } @else if (column.sortOrder === 'desc') {
                      <i c8yIcon="long-arrow-down"></i>
                    } @else {
                      <i
                        c8yIcon="exchange"
                        style="transform: rotate(90deg)"
                      ></i>
                    }
                  </button>
                </div>
                <!-- Column type dropdown -->
                @if (!column.isOperation && column.__origin !== 'status') {
                  <div
                    class="d-flex a-i-center gap-4 flex-no-shrink"
                    [ngClass]="{ 'no-pointer invisible': column.__origin === 'status' }"
                  >
                    <div
                      class="dropdown d-flex"
                      container="body"
                      dropdown
                      c8yDropdownFocusTrap
                      #columnTypeDropdown="bs-dropdown"
                    >
                      <button
                        class="btn btn-default btn-xs dropdown-toggle c8y-dropdown"
                        [attr.aria-label]="'Select render type' | translate"
                        tooltip="{{ 'Render type' | translate }}"
                        placement="top"
                        container="body"
                        [attr.aria-haspopup]="true"
                        [attr.aria-expanded]="columnTypeDropdown.isOpen"
                        type="button"
                        [attr.data-cy]="'column-settings--render-type-dropdown--' + column.name"
                        [delay]="500"
                        dropdownToggle
                      >
                        {{ column.type | translate | humanize }}
                        <i c8yIcon="caret-down"></i>
                      </button>
                      <div
                        class="dropdown-menu"
                        *dropdownMenu
                      >
                        <c8y-list-group role="list">
                          @if (column.type === 'computed' || column.computedConfig) {
                            <c8y-li
                              tabindex="0"
                              role="listitem"
                              (keydown.enter)="
                                applyColumnType('computed', column); $event.preventDefault()
                              "
                              (keydown.space)="
                                applyColumnType('computed', column); $event.preventDefault()
                              "
                              (click)="applyColumnType('computed', column)"
                              [active]="column.type === 'computed'"
                            >
                              {{ 'Computed' | translate }}
                            </c8y-li>
                            <c8y-li
                              tabindex="0"
                              role="listitem"
                              data-cy="icon-render-type-option"
                              (click)="applyColumnType('icon', column)"
                              (keydown.enter)="
                                applyColumnType('icon', column); $event.preventDefault()
                              "
                              (keydown.space)="
                                applyColumnType('icon', column); $event.preventDefault()
                              "
                              [active]="column.type === 'icon'"
                            >
                              {{ 'Icon' | translate }}
                            </c8y-li>
                          } @else {
                            <c8y-li
                              tabindex="0"
                              role="listitem"
                              (click)="applyColumnType('default', column)"
                              (keydown.enter)="
                                applyColumnType('default', column); $event.preventDefault()
                              "
                              (keydown.space)="
                                applyColumnType('default', column); $event.preventDefault()
                              "
                              [active]="column.type === 'default'"
                            >
                              {{ 'Default' | translate }}
                            </c8y-li>
                            <c8y-li
                              tabindex="0"
                              role="listitem"
                              data-cy="date-render-type-option"
                              (click)="applyColumnType('date', column)"
                              (keydown.enter)="
                                applyColumnType('date', column); $event.preventDefault()
                              "
                              (keydown.space)="
                                applyColumnType('date', column); $event.preventDefault()
                              "
                              [active]="column.type === 'date'"
                            >
                              {{ 'Date' | translate }}
                            </c8y-li>
                            <c8y-li
                              tabindex="0"
                              role="listitem"
                              data-cy="icon-render-type-option"
                              (click)="applyColumnType('icon', column)"
                              [active]="column.type === 'icon'"
                              (keydown.enter)="
                                applyColumnType('icon', column); $event.preventDefault()
                              "
                              (keydown.space)="
                                applyColumnType('icon', column); $event.preventDefault()
                              "
                            >
                              {{ 'Icon' | translate }}
                            </c8y-li>
                          }
                        </c8y-list-group>
                      </div>
                    </div>
                  </div>
                }
              </div>
            </div>
          </div>
          @if (column.isOperation) {
            <ng-container>
              @if (true) {
                <c8y-li-action
                  icon="edit1"
                  [attr.aria-label]="'Edit' | translate"
                  label="Edit"
                  (click)="editOperationColumn(column)"
                ></c8y-li-action>
              }
              @if (true) {
                <c8y-li-action
                  icon="delete"
                  [attr.aria-label]="'Delete' | translate"
                  label="Delete"
                  (click)="deleteColumn(column)"
                ></c8y-li-action>
              }
            </ng-container>
          }
        </c8y-li>
      }
    }
    @if (columns.length === 0) {
      <c8y-ui-empty-state
        [icon]="'list'"
        [title]="'No properties selected.' | translate"
        [subtitle]="'Select from the list which columns to display.' | translate"
        [horizontal]="true"
      ></c8y-ui-empty-state>
    }
  </c8y-list-group>
  <div class="m-b-16 p-t-16 p-l-24 p-r-16 fit-w separator-top">
    <button
      class="btn btn-default btn-sm m-r-8"
      type="button"
      (click)="selectAssetAndProperty()"
    >
      {{ 'Select properties' | translate }}
    </button>
    <div
      class="dropdown"
      container="body"
      dropdown
      c8yDropdownFocusTrap
      #customActionsDropdown="bs-dropdown"
    >
      <button
        class="btn btn-default btn-sm dropdown-toggle c8y-dropdown"
        [title]="'Add action' | translate"
        [attr.aria-haspopup]="true"
        [attr.aria-expanded]="customActionsDropdown.isOpen"
        type="button"
        data-cy="asset-table-column-settings--add-action-btn"
        dropdownToggle
      >
        <i c8yIcon="cog"></i>
        <span>{{ 'Add action' | translate }}</span>
        <span class="caret"></span>
      </button>
      <ul
        class="dropdown-menu"
        *dropdownMenu
      >
        <li>
          <button
            class="dropdown-item"
            type="button"
            data-cy="asset-table-column-settings--create-operation"
            (click)="onCreateOperation()"
          >
            {{ 'Create operation' | translate }}
          </button>
        </li>
        <li>
          <button
            class="dropdown-item"
            type="button"
            data-cy="asset-table-column-settings--toggle-maintenance"
            (click)="onToggleMaintenanceMode()"
            [disabled]="hasMaintenanceColumn"
          >
            {{ 'Toggle maintenance mode' | translate }}
          </button>
        </li>
      </ul>
    </div>
  </div>
</fieldset>