<div class="search-overlay" data-search-overlay>
  <div class="search-overlay-backdrop" data-search-close></div>

  <div class="search-panel">
    <div class="search-panel-header">
      <div class="search-input-wrap">
        <i class="fa-solid fa-magnifying-glass text-[0.8rem] text-muted"></i>
        <input
          type="search"
          class="search-input"
          placeholder="Search posts..."
          autocomplete="off"
          data-search-input
        />
      </div>
      <button
        type="button"
        class="search-close"
        data-search-close
        aria-label="Close search"
      >
        <i class="fa-solid fa-xmark text-[0.8rem]"></i>
      </button>
    </div>

    <div class="search-panel-body">
      <div class="search-results" data-search-results>
        <div class="search-empty-state">
          <div class="search-empty-icon">
            <i class="fa-solid fa-magnifying-glass text-[1rem]"></i>
          </div>
          <p class="search-empty-title">Start searching</p>
          <p class="search-empty-subtitle">
            Enter keywords to search articles.
          </p>
        </div>
      </div>

      <div class="search-footer-hints">
        <div class="search-hint-key">
          <span>↑↓</span>
          <span>Navigate</span>
        </div>
        <div class="search-hint-key">
          <span>↵</span>
          <span>Select</span>
        </div>
        <div class="search-hint-key">
          <span>ESC</span>
          <span>Close</span>
        </div>
        <div class="search-hint-key search-hint-right">
          <span>Ctrl</span><span>K</span>
          <span>Shortcut</span>
        </div>
      </div>
    </div>
  </div>
</div>
