<?php
/**
 * Command-palette search dialog.
 *
 * Opened via Ctrl+K / Cmd+K or topbar search trigger.
 * Results are rendered dynamically by JS from the /admin/search/data API.
 */
?>
<dialog
  data-app-search-dialog
  data-app-component="global-search"
  data-search-endpoint="<?php e(lurl('admin/search/data')); ?>"
  data-search-results-page="<?php e(lurl('search')); ?>"
  aria-label="<?php e(t('Search')); ?>"
>
  <article class="app-dialog-lg app-search-dialog">
    <header class="app-search-dialog-header">
      <form class="app-search-dialog-form" autocomplete="off">
        <i class="bi bi-search app-search-dialog-icon" aria-hidden="true"></i>
        <input
          type="search"
          name="search-dialog-input"
          id="search-dialog-input"
          class="app-search-dialog-input"
          placeholder="<?php e(t('Search users, tenants, pages...')); ?>"
          aria-label="<?php e(t('Search')); ?>"
          aria-autocomplete="list"
          aria-controls="app-search-dialog-results"
          autocomplete="off"
        >
      </form>
      <button type="button" class="close" data-app-search-dialog-close aria-label="<?php e(t('Close')); ?>" title="<?php e(t('Close')); ?>"></button>
    </header>
    <div class="app-search-dialog-body">
      <div class="app-search-dialog-empty-state" data-search-dialog-empty data-no-results-text="<?php e(t('No results found')); ?>">
        <p class="muted"><?php e(t('Users, tenants, departments, roles and more')); ?></p>
      </div>
      <div class="app-search-dialog-loading" data-search-dialog-loading hidden>
        <p class="muted" aria-live="polite"><?php e(t('Searching...')); ?></p>
      </div>
      <div class="app-search-dialog-error" data-search-dialog-error hidden>
        <p class="muted" aria-live="assertive"><?php e(t('Search failed. Please try again.')); ?></p>
      </div>
      <ul
        id="app-search-dialog-results"
        class="app-search-dialog-results"
        data-search-dialog-results
        role="listbox"
        aria-label="<?php e(t('Search results')); ?>"
        hidden
      ></ul>
    </div>
    <footer class="app-search-dialog-footer" data-search-dialog-footer hidden>
      <a href="<?php e(lurl('search')); ?>" data-search-dialog-view-all class="app-search-dialog-view-all">
        <?php e(t('View all results')); ?>
        <i class="bi bi-arrow-right" aria-hidden="true"></i>
      </a>
      <span class="app-search-dialog-footer-hint muted" aria-hidden="true">
        <kbd>↑↓</kbd> <?php e(t('navigate')); ?>
        <kbd>↵</kbd> <?php e(t('open')); ?>
        <kbd>Esc</kbd> <?php e(t('close')); ?>
      </span>
    </footer>
  </article>
</dialog>
