<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>
    <c8y-list-group
      class="cdk-droplist no-border-last"
      *ngIf="bookmarks.length; else emptyList"
      cdkDropList
      (cdkDropListDropped)="drop($event)"
      [cdkDropListDisabled]="bookmarks?.length < 2"
    >
      <c8y-li
        *ngFor="let bookmark of bookmarks"
        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"
          style="{{ bookmarks?.length < 2 ? 'padding-left: 16px!important' : '' }}"
          *ngIf="bookmark.icon"
        >
          <i [c8yIcon]="bookmark.icon"></i>
          <button
            class="btn btn-default btn-xs"
            [attr.aria-label]="'Change icon' | translate"
            tooltip="{{ 'Change icon' | translate }}"
            placement="top"
            container="body"
            type="button"
            [delay]="500"
            [adaptivePosition]="false"
            (click)="changeBookmarkIcon(bookmark)"
          >
            <i c8yIcon="replace"></i>
          </button>
        </c8y-li-icon>

        <div class="d-flex gap-8 a-i-center">
          <form
            class="d-flex flex-grow"
            name="bookmarksForm"
            #bookmarksForm="ngForm"
          >
            <div class="input-group input-group-editable">
              <input
                class="form-control fit-w"
                title="{{ bookmark.label }}"
                id="label"
                name="label"
                type="text"
                [(ngModel)]="bookmark.label"
                #label="ngModel"
                maxlength="50"
                [placeholder]="'e.g. My bookmark' | translate"
              />
              <span></span>
              <div class="input-group-btn">
                <button
                  class="btn btn-primary"
                  title="{{ 'Save' | translate }}"
                  type="submit"
                  (click)="updateBookmark(bookmark, 'label'); label.control.markAsPristine()"
                  [disabled]="label.invalid"
                >
                  {{ 'Save' | translate }}
                </button>
              </div>
            </div>
          </form>
          <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>
  </div>
  <div class="modal-footer">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      (click)="close()"
    >
      {{ 'Close' | translate }}
    </button>
  </div>
</div>
<ng-template #emptyList>
  <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>
</ng-template>