{#
/**
 * @file
 * Template for the content finder overlay.
 *
 * Available variables:
 * - attributes: HTML attributes for the overlay container.
 */
#}
<div{{ attributes.addClass('content-finder-overlay') }}>
  <div class="content-finder-backdrop"></div>
  <div class="content-finder-dialog">
    <div class="content-finder-header">
      <input type="text" 
             class="content-finder-search" 
             placeholder="{{ 'Search content by title...'|t }}"
             autocomplete="off"
             autofocus>
      <button class="content-finder-close" aria-label="{{ 'Close'|t }}">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="content-finder-results">
      <div class="content-finder-loading">{{ 'Searching...'|t }}</div>
      <div class="content-finder-empty">{{ 'No results found'|t }}</div>
      <ul class="content-finder-list" role="listbox"></ul>
    </div>
    <div class="content-finder-footer">
      <span class="content-finder-hint">
        <kbd>↑↓</kbd> {{ 'to navigate'|t }}
        <kbd>↵</kbd> {{ 'to view'|t }}
        <kbd>Ctrl+↵</kbd> {{ 'to edit'|t }}
        <kbd>Esc</kbd> {{ 'to close'|t }}
      </span>
    </div>
  </div>
</div>