{% comment %}
Command palette modal. Included from base.html for authenticated users only.
Opened by clicking the navbar brand or pressing Ctrl/Cmd+K (see command_palette.js).
Most-of-the-page on desktop; fullscreen on mobile.
{% endcomment %}
<style>
  #command-palette-modal .command-palette-dialog {
    margin-top: 6vh;
  }
  @media (min-width: 768px) {
    #command-palette-modal .command-palette-dialog {
      width: min(1000px, 92vw);
      max-width: 92vw;
    }
    #command-palette-modal .command-palette-dialog .modal-content {
      height: 84vh;
    }
  }
  #command-palette-results .cp-group-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  #command-palette-results .cp-item {
    cursor: pointer;
  }
  #command-palette-results .cp-item.active,
  #command-palette-results .cp-item:hover {
    background-color: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.25));
  }
  #command-palette-results .cp-item .cp-item-title {
    font-weight: 500;
  }
  {% comment %}
  The auto-listen explainer. Styled to look like a Bootstrap tooltip rather than being one: a real
  tooltip instance takes over the button's title attribute and has to be disposed to give it back,
  and this bubble has to sit there for several seconds without swallowing "Speak a command".
  Panel/border colors are the dark-theme surfaces from style_reference.md.
  {% endcomment %}
  #command-palette-modal .modal-header {
    position: relative;
  }
  #command-palette-mic-hint {
    position: absolute;
    top: calc(100% - 0.3rem);
    right: 2.5rem;
    z-index: 5;
    max-width: min(22rem, 80vw);
    padding: 0.4rem 0.6rem;
    border: 1px solid #444;
    border-radius: 0.375rem;
    background-color: #303030;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    font-size: 0.8rem;
    line-height: 1.3;
    animation: cp-hint-in 0.2s ease-out;
  }
  {% comment %} Arrow pointing up at the mic button. {% endcomment %}
  #command-palette-mic-hint::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 0.9rem;
    border: 0.4rem solid transparent;
    border-bottom-color: #444;
  }
  @keyframes cp-hint-in {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    #command-palette-mic-hint { animation: none; }
  }
  {% comment %} Listening state: the mic pulses so it's obvious the browser is still recording. {% endcomment %}
  .cp-mic.listening {
    color: #fff;
    background-color: #a93226;
    border-color: #a93226;
    animation: cp-mic-pulse 1.2s ease-in-out infinite;
  }
  @keyframes cp-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(169, 50, 38, 0.7); }
    50% { box-shadow: 0 0 0 0.5rem rgba(169, 50, 38, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .cp-mic.listening { animation: none; }
  }
</style>
<div class="modal fade" id="command-palette-modal" tabindex="-1" aria-labelledby="command-palette-input"
     aria-hidden="true"
     data-search-url="{% url 'command_palette' %}"
     data-log-url="{% url 'command_palette_log' %}"
     data-assist-url="{% url 'command_palette_assist' %}"
     data-execute-url="{% url 'command_palette_execute' %}"
     data-cancel-url="{% url 'command_palette_cancel' %}"
     data-report-url="{% url 'command_palette_report' %}"
     data-assist-enabled="{% if palette_assist_enabled %}1{% else %}0{% endif %}"
     data-csrf="{{ csrf_token }}">
  <div class="modal-dialog modal-dialog-scrollable modal-fullscreen-md-down command-palette-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <div class="input-group flex-grow-1">
          <span class="input-group-text bg-body border-0"><i class="bi bi-search"></i></span>
          <input type="text" id="command-palette-input"
                 class="form-control form-control-lg border-0 shadow-none"
                 placeholder="{% if palette_assist_enabled %}Search, or tell me what to do…{% else %}Search for anything…{% endif %}"
                 autocomplete="off" spellcheck="false"
                 aria-label="Search" aria-controls="command-palette-results">
          {% comment %} Hidden by default; the script removes d-none only when the browser supports speech recognition. {% endcomment %}
          {% if palette_assist_enabled %}
          <button type="button" class="btn btn-outline-secondary cp-mic d-none" id="command-palette-mic"
                  aria-pressed="false" aria-label="Speak a command" title="Speak a command">
            <i class="bi bi-mic-fill"></i>
          </button>
          {% endif %}
        </div>
        <button type="button" class="btn-close ms-2" data-bs-dismiss="modal" aria-label="Close"></button>
        {% comment %} Shown by the script only on the first couple of auto-started listens. {% endcomment %}
        {% if palette_assist_enabled %}
        <div id="command-palette-mic-hint" class="d-none text-muted" role="status">
          <i class="bi bi-mic-fill me-1"></i>Microphone automatically enabled because you used it last time
        </div>
        {% endif %}
      </div>
      <div class="modal-body pt-2" id="command-palette-results" aria-live="polite"></div>
      <div class="modal-footer py-1 justify-content-start d-none d-md-flex">
        <small class="text-muted">
          <kbd>↑</kbd> <kbd>↓</kbd> to navigate · <kbd>Enter</kbd> to {% if palette_assist_enabled %}open or run a command{% else %}open{% endif %} · <kbd>Esc</kbd> to close
        </small>
      </div>
    </div>
  </div>
</div>