<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'bookmark'"></i>
    <div
      class="h4"
      id="modal-title"
      translate
    >
      Bookmarks
    </div>
  </div>
  <div
    class="inner-scroll"
    id="modal-body"
  >
    <div class="p-16 text-center separator-bottom sticky-top bg-component">
      <p class="text-medium text-16">
        {{ 'Reorder, edit or delete bookmarks.' | translate }}
      </p>
    </div>
    @if (bookmarks.length) {
      <c8y-list-group
        class="cdk-droplist no-border-last"
        cdkDropList
        (cdkDropListDropped)="drop($event)"
        [cdkDropListDisabled]="bookmarks.length < 2"
      >
        @for (bookmark of bookmarks; track bookmark.id) {
          <c8y-li cdkDrag>
            <c8y-li-drag-handle
              title="{{ 'Drag to reorder' | translate }}"
              cdkDragHandle
            >
              <i c8yIcon="drag-reorder"></i>
            </c8y-li-drag-handle>
            @if (bookmark.icon) {
              <c8y-li-icon
                class="a-s-stretch"
                [style.padding-left]="bookmarks.length < 2 ? '16px !important' : null"
              >
                <c8y-change-icon
                  [currentIcon]="bookmark.icon"
                  (onButtonClick)="changeBookmarkIcon(bookmark)"
                ></c8y-change-icon>
              </c8y-li-icon>
            }

            <div class="d-flex gap-8 a-i-center">
              <div class="flex-grow">
                <c8y-input-group-editable
                  [ariaLabel]="'Bookmark label' | translate"
                  formGroupClass="m-b-0"
                  [placeholder]="'e.g. My bookmark' | translate"
                  [maxLength]="50"
                  [ngModel]="bookmark.label"
                  (ngModelChange)="onLabelSaved(bookmark, $event)"
                ></c8y-input-group-editable>
              </div>
              <c8y-popover-confirm
                class="d-block"
                [title]="'Delete bookmark' | translate"
                [placement]="'left'"
                [outsideClick]="true"
                [adaptivePosition]="true"
                [container]="''"
                #poConfirm
              >
                <button
                  class="btn btn-dot btn-dot--danger m-l-auto"
                  title="{{ 'Delete' | translate }}"
                  type="button"
                  (click)="removeBookmark(poConfirm, bookmark)"
                >
                  <i c8yIcon="minus-circle"></i>
                </button>
              </c8y-popover-confirm>
            </div>
          </c8y-li>
        }
      </c8y-list-group>
    } @else {
      <c8y-ui-empty-state
        [icon]="'bookmark'"
        [title]="'No bookmarks yet' | translate"
        [subtitle]="
          'Navigate to the desired page, open the right drawer and click the &quot;Add current page&quot; button.'
            | translate
        "
        [horizontal]="true"
      ></c8y-ui-empty-state>
    }
  </div>
  <div class="modal-footer">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      (click)="close()"
    >
      {{ 'Close' | translate }}
    </button>
  </div>
</div>