{% from "_macros.html" import icon, model_avatar %}
{#
  Model picker.

  A real dropdown rather than a <select>, because a <select> cannot show an
  image, a description or capability badges -- browsers render only text in an
  <option>. The hidden input is what actually carries the value, so the control
  still behaves like a form field.

  Inside a chat it PATCHes the chat; on /chat it navigates, because there is no
  chat row to patch yet.
#}
<div class="picker" data-picker>
  <button class="picker__button" type="button" data-picker-toggle
          aria-haspopup="listbox" aria-expanded="false">
    {% if current_model %}
      {{ model_avatar(current_model, cls="picker__avatar") }}
      <span class="picker__label">{{ current_model.label }}</span>
    {% else %}
      <span class="picker__label">Choose a model</span>
    {% endif %}
    {{ icon("chevron-down", "icon--sm picker__chevron") }}
  </button>

  <div class="picker__menu" data-picker-menu role="listbox" hidden
       aria-label="Models">
    {% if models|length > 8 %}
    <div class="picker__search">
      <input class="input input--sm" type="search" data-picker-filter
             placeholder="Filter models…" aria-label="Filter models">
    </div>
    {% endif %}

    <div class="picker__list">
      {% for model in models %}
      <button class="picker__option {{ 'is-selected' if current_model and model.model_id == current_model.model_id }}"
              type="button" role="option"
              aria-selected="{{ 'true' if current_model and model.model_id == current_model.model_id else 'false' }}"
              data-picker-value="{{ model.model_id }}"
              data-picker-search="{{ model.label|lower }} {{ model.model_id|lower }}">
        {{ model_avatar(model, cls="picker__avatar") }}
        <span class="picker__option-body">
          <span class="picker__option-name">
            {{ model.label }}
            {% if model.pinned %}{{ icon("pin", "icon--sm picker__pin") }}{% endif %}
          </span>
          {% if model.description %}
          <span class="picker__option-desc">{{ model.description }}</span>
          {% endif %}
          <span class="picker__option-tags">
            {% for name, on in (model.capabilities_json or {}).items() %}
              {% if on %}<span class="tag">{{ name }}</span>{% endif %}
            {% endfor %}
          </span>
        </span>
        {% if current_model and model.model_id == current_model.model_id %}
          {{ icon("check", "icon--sm picker__tick") }}
        {% endif %}
      </button>
      {% endfor %}
    </div>
    <p class="picker__empty" data-picker-empty hidden>No model matches that.</p>
  </div>

  {% if chat %}
  {# Changing the value fires the PATCH; htmx serialises the hidden input. #}
  <form hx-patch="/api/chats/{{ chat.id }}" hx-swap="none"
        hx-trigger="change from:find input" data-picker-form>
    <input type="hidden" name="model_id" data-picker-input
           value="{{ current_model.model_id if current_model else '' }}">
  </form>
  {% else %}
  {# No chat yet: selecting navigates so the whole composer re-renders with the
     right vision warning and the right hidden model_id. #}
  <span hidden data-picker-navigate="/chat?model="></span>
  {% endif %}
</div>