<c8y-list-group
  class="cdk-droplist no-border-last separator-top"
  cdkDropList
  (cdkDropListDropped)="drop($event)"
  [cdkDropListDisabled]="getQuickLinks().length < 2"
>
  <form
    class="d-contents"
    [formGroup]="quickLinksForm()"
  >
    <div
      class="d-contents"
      [formArrayName]="'quickLinks'"
    >
      @for (link of quickLinksFormArray().controls; track link; let i = $index) {
        @let linkValue = link.getRawValue();

        <c8y-li
          [dense]="true"
          [formGroupName]="i"
          cdkDrag
        >
          <c8y-li-drag-handle
            title="{{ 'Drag to reorder' | translate }}"
            cdkDragHandle
          >
            <i c8yIcon="drag-reorder"></i>
          </c8y-li-drag-handle>
          <c8y-li-icon
            class="icon-24 p-relative changeIcon a-s-stretch"
            [ngClass]="{
              'm-l-16': getQuickLinks().length < 2
            }"
          >
            @if (linkValue.icon) {
              <c8y-change-icon
                [currentIcon]="linkValue.icon"
                (onButtonClick)="changeLinkIcon(link)"
              ></c8y-change-icon>
            } @else {
              <c8y-change-icon (onButtonClick)="changeLinkIcon(link)">
                <c8y-app-icon
                  [name]="linkValue.app.name"
                  [app]="linkValue.app"
                  [contextPath]="linkValue.app.contextPath"
                ></c8y-app-icon>
              </c8y-change-icon>
            }
          </c8y-li-icon>

          <div class="d-flex gap-8 a-i-center">
            <div class="input-group input-group-editable">
              <input
                class="form-control"
                formControlName="label"
                [placeholder]="'e.g. my Quick Link' | translate"
              />
              <span></span>
            </div>

            <button
              class="showOnHover btn-dot btn-dot--danger m-l-auto"
              [attr.aria-label]="'Delete' | translate"
              tooltip="{{ 'Delete' | translate }}"
              placement="top"
              type="button"
              [delay]="500"
              (click)="removeLink(i)"
            >
              <i c8yIcon="minus-circle"></i>
            </button>
          </div>
          <c8y-list-item-collapse>
            <div class="d-flex a-i-center gap-24">
              <c8y-form-group class="flex-grow">
                <label for="ql-url">{{ 'URL' | translate }}</label>
                <input
                  class="form-control"
                  id="ql-url"
                  type="text"
                  formControlName="url"
                  [placeholder]="'e.g. https://www.example.com' | translate"
                />
                <c8y-messages>
                  <c8y-message
                    name="maxlength"
                    [text]="'The URL must not exceed {{ requiredLength }} characters.' | translate"
                  ></c8y-message>
                </c8y-messages>
              </c8y-form-group>
              <div class="form-group flex-noshrink">
                <label>&nbsp;</label>
                <label
                  class="c8y-checkbox"
                  title="{{ 'Open the link in a new browser tab' | translate }}"
                >
                  <input
                    [attr.aria-label]="'Open in new tab' | translate"
                    type="checkbox"
                    formControlName="newTab"
                    checked="checked"
                  />
                  <span></span>
                  <span>{{ 'New tab' | translate }}</span>
                </label>
              </div>
            </div>
          </c8y-list-item-collapse>
        </c8y-li>
      }
    </div>
  </form>
</c8y-list-group>