<div class="separator-top p-t-8 m-t-auto c8y-right-drawer__item sticky-top">
  <i c8yIcon="bookmark"></i>
  <span class="text-bold">{{ 'Bookmarks' | translate }}</span>
  <button
    class="btn-dot m-l-auto"
    [attr.aria-label]="'Edit bookmarks' | translate"
    [tabindex]="(drawerOpen$ | async) ? '0' : '-1'"
    tooltip="{{ 'Edit bookmarks' | translate }}"
    placement="left"
    container="body"
    type="button"
    [adaptivePosition]="false"
    [delay]="500"
    (click)="editBookmarks()"
  >
    <i
      class="text-14 m-0"
      c8yIcon="cog"
    ></i>
  </button>
</div>
@if (bookmarks?.length) {
  <div class="c8y-right-drawer__item p-t-0 p-b-8">
    <button
      class="btn btn-default btn-sm"
      [tabindex]="(drawerOpen$ | async) ? '0' : '-1'"
      type="button"
      (click)="addBookmark()"
    >
      <i
        class="m-t-0 m-b-0 text-14"
        c8yIcon="plus-circle-o"
      ></i>
      <span>{{ addButtonText | translate }}</span>
    </button>
  </div>
}
@if (bookmarks?.length) {
  @for (bookmark of bookmarks; track bookmark.url) {
    <button
      class="c8y-right-drawer__link"
      title="{{ bookmark.label }}"
      [tabindex]="(drawerOpen$ | async) ? '0' : '-1'"
      type="button"
      (click)="openUrl(bookmark.url)"
    >
      @if (bookmark.icon) {
        <i [c8yIcon]="bookmark.icon"></i>
      }
      <span class="text-truncate">{{ bookmark.label }}</span>
    </button>
  }
}

<div class="p-t-8 p-b-8">
  @if (!bookmarks?.length) {
    <span class="c8y-right-drawer__item text-muted text-bold text-14 p-b-0">
      {{ emptyMessageHeader | translate }}
    </span>
    <span class="c8y-right-drawer__item text-12 p-t-0">
      <span class="text-muted">{{ emptyMessageBody | translate }}</span>
    </span>
    <div class="c8y-right-drawer__item">
      <button
        class="btn btn-default btn-sm"
        [tabindex]="(drawerOpen$ | async) ? '0' : '-1'"
        type="button"
        (click)="addBookmark()"
      >
        <i
          class="m-t-0 m-b-0 text-14"
          c8yIcon="plus-circle-o"
        ></i>
        <span>{{ addButtonText | translate }}</span>
      </button>
    </div>
  }
</div>