{% load i18n madga_studio_tags %}
{# Full picker shell. Lives in a hidden wrapper that the editor rail toggles. #}
<div class="madga-mp-modal" data-madga-mp-target="{{ picker_target }}">
  <div class="madga-mp-head">
    <strong>{% trans "Pick from the library" %}</strong>
    <button type="button" class="madga-icon-btn" data-madga-mp-close aria-label="{% trans 'Close' %}">
      {% studio_icon "x" size=16 stroke=2 %}
    </button>
  </div>
  <div class="madga-mp-toolbar">
    <input type="search"
           name="q"
           value="{{ search_q }}"
           placeholder="{% trans 'Search by filename or alt text…' %}"
           class="madga-input"
           hx-get="{% url 'madga_studio:media_picker' %}"
           hx-trigger="input changed delay:200ms, search"
           hx-target=".madga-mp-results"
           hx-include="[name='kind']"
           autofocus>
    <select name="kind" class="madga-select"
            hx-get="{% url 'madga_studio:media_picker' %}"
            hx-trigger="change"
            hx-target=".madga-mp-results"
            hx-include="[name='q']">
      <option value="image" {% if current_kind == 'image' %}selected{% endif %}>{% trans "Images" %}</option>
      <option value="video" {% if current_kind == 'video' %}selected{% endif %}>{% trans "Videos" %}</option>
      <option value="document" {% if current_kind == 'document' %}selected{% endif %}>{% trans "Documents" %}</option>
    </select>
  </div>
  <div class="madga-mp-results">
    {% include "madga/studio/components/media_picker_grid.html" %}
  </div>
  <div class="madga-mp-footer">
    <span class="madga-mp-hint">{% trans "Click a file to select it" %}</span>
    <a href="{% url 'madga_studio:media_list' %}" target="_blank" class="madga-btn madga-btn--sm madga-btn--ghost">{% studio_icon "upload" size=12 stroke=2 %} {% trans "Upload new" %}</a>
  </div>
</div>