<!-- Desktop Search Modal (hidden on mobile, shown via Alpine) -->
<div
  x-cloak
  x-data="searchOverlay()"
  @keydown.escape.window="handleEscape($event)"
  @open-search.window="open()"
  class="fixed inset-0 z-50"
  :class="{ 'flex items-center justify-center': isOpen, 'hidden': !isOpen }"
  x-show="isOpen"
>
  <!-- Overlay backdrop -->
  <div
    class="absolute inset-0 bg-black/50"
    @click="close()"
    aria-hidden="true"
  ></div>

  <!-- Modal content -->
  <div
    class="relative bg-bg border-2 border-accent rounded-lg shadow-xl max-w-2xl mx-4 w-full"
    role="dialog"
    aria-labelledby="search-modal-title"
    aria-modal="true"
  >
    <!-- Header with close button -->
    <div class="flex items-center justify-between p-6 border-b border-border">
      <h2 id="search-modal-title" class="text-xl font-bold text-accent">
        {{ i18n "searchArticles" }}
      </h2>
      <button
        @click="close()"
        aria-label="Close search"
        class="p-2 rounded hover:bg-surface transition-colors focus:outline-none focus:ring-2 focus:ring-accent"
      >
        <i data-feather="x" class="w-5 h-5" aria-hidden="true"></i>
      </button>
    </div>

    <!-- Search input -->
    <div class="p-6 border-b border-border">
      <label for="search-input-desktop" class="sr-only">
        {{ i18n "searchPlaceholder" }}
      </label>
      <input
        id="search-input-desktop"
        type="text"
        :value="searchQuery"
        @input="filterArticles($el.value)"
        placeholder="{{ i18n "searchPlaceholder" }}"
        class="w-full px-4 py-3 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text"
        aria-describedby="search-results"
      />
    </div>

    <!-- Results container -->
    <div id="search-results" class="max-h-96 overflow-y-auto p-6">
      <!-- Results list -->
      <div x-show="filteredArticles.length > 0" class="space-y-3" role="region" aria-live="polite">
        <template x-for="article in filteredArticles" :key="article.url">
          <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors rounded">
            <a :href="article.url" class="block focus:outline-none focus:ring-2 focus:ring-accent rounded px-2 py-1">
              <h3 class="font-bold text-accent hover:underline" x-text="article.title"></h3>
              <p class="text-sm text-text-dim mt-1" x-text="article.date"></p>
            </a>
          </div>
        </template>
      </div>

      <!-- Empty state -->
      <div
        x-show="searchQuery && filteredArticles.length === 0"
        class="text-center py-8 text-text-dim"
        role="status"
      >
        {{ i18n "noSearchResults" }}
      </div>

      <!-- No query state -->
      <div
        x-show="!searchQuery"
        class="text-center py-8 text-text-dim"
      >
        {{ i18n "searchPlaceholder" }}
      </div>
    </div>
  </div>
</div>
