<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->
<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
<div class="sam-text-header">
  <div class="header-buttons">
    <button class="header-btn" title="Lock" (click)="onClickLock()">
      <span class="emoji">🔒</span>
    </button>
    @if (devMode) {
      <button class="header-btn" title="Test Permission Prompt" (click)="onTestPrompt()">
        <span class="emoji">✨</span>
      </button>
    }
  </div>
  <span>Bookmarks</span>
  <button class="add-btn" title="Bookmark This Page" (click)="onBookmarkThisPage()">
    <span class="emoji">➕</span>
  </button>
</div>

<div class="bookmarks-container">
  @if (isLoading) {
    <div class="loading-state">Loading...</div>
  } @else if (bookmarks.length === 0) {
    <div class="empty-state">
      <span class="sam-text-muted">
        No bookmarks yet. Click "Bookmark This Page" to add the current page.
      </span>
    </div>
  } @else {
    @for (bookmark of bookmarks; track bookmark.id) {
      <div class="bookmark-item" (click)="openBookmark(bookmark)">
        <div class="bookmark-info">
          <span class="bookmark-title">{{ bookmark.title }}</span>
          <span class="bookmark-url">{{ getDomain(bookmark.url) }}</span>
        </div>
        <button
          class="remove-btn"
          title="Remove bookmark"
          (click)="onRemoveBookmark(bookmark); $event.stopPropagation()"
        >
          <span class="emoji">✕</span>
        </button>
      </div>
    }
  }
</div>
