{% comment %}
The grid, and the only region any media interaction swaps.

`mediaChanged from:body` is the refresh contract: every mutating view returns a
204 carrying that event (apps/common/htmx.py's toast_response), so a delete or a
move re-renders the grid without the view needing to know anything about the
page it is rendered on.
{% endcomment %}
{% load media_library %}
{% comment %}
  `@container`: the columns below size against THIS element rather than the
  viewport. The grid shares its row with a folder rail and a detail panel, and
  the page now renders inside the settings column too, so the viewport says
  very little about how much room the cards actually have — at a 1300px window
  the grid gets 532px, and a viewport-keyed `xl:grid-cols-4` drew four 124px
  cards in it. Declared here rather than on the page, so the picker this markup
  is meant to serve elsewhere (see the note on the thumbnail below) gets the
  right columns wherever it is mounted.
{% endcomment %}
<div id="media-grid"
     class="@container flex-1 min-h-0"
     hx-get="{% url 'media:library' workspace_id=request.workspace.id %}?q={{ query|urlencode }}&kind={{ current_kind|urlencode }}&folder={{ current_folder|urlencode }}"
     hx-trigger="mediaChanged from:body"
     hx-swap="outerHTML">

  {% if page.object_list %}
    <div class="grid grid-cols-2 @md:grid-cols-3 @3xl:grid-cols-4 gap-3">
      {% for asset in page.object_list %}
        <button type="button" class="media-card"
                hx-get="{% url 'media:asset_detail' workspace_id=request.workspace.id asset_id=asset.id %}"
                hx-target="#media-detail"
                hx-swap="innerHTML">
          <span class="media-thumb">
            {% if asset.thumbnail %}
              {% comment %}
                Signed and session-free, which is what lets the same markup
                serve a picker mounted anywhere else in the product.
              {% endcomment %}
              <img src="{% media_url asset thumbnail=True %}" alt="{{ asset.alt_text }}" loading="lazy">
            {% else %}
              <span class="text-xs uppercase tracking-wide">{{ asset.get_kind_display }}</span>
            {% endif %}
          </span>
          <span class="media-meta">
            <span class="media-meta-name">{{ asset.title|default:asset.filename }}</span>
            {{ asset.size_display }}
          </span>
        </button>
      {% endfor %}
    </div>

    {% if page.has_other_pages %}
      <nav class="mt-4 flex items-center gap-3 text-sm" aria-label="Pagination">
        {% if page.has_previous %}
          <a href="?page={{ page.previous_page_number }}&q={{ query|urlencode }}&kind={{ current_kind|urlencode }}&folder={{ current_folder|urlencode }}">Previous</a>
        {% endif %}
        <span class="muted">Page {{ page.number }} of {{ page.paginator.num_pages }}</span>
        {% if page.has_next %}
          <a href="?page={{ page.next_page_number }}&q={{ query|urlencode }}&kind={{ current_kind|urlencode }}&folder={{ current_folder|urlencode }}">Next</a>
        {% endif %}
      </nav>
    {% endif %}

  {% else %}
    {% comment %}
      The last list in the product still hand-rolling its own empty state.
    {% endcomment %}
    <div class="empty-state">
      <p class="empty-state-title">{% if query %}Nothing matches “{{ query }}”.{% else %}No media here yet.{% endif %}</p>
      <p class="empty-state-body">
        {% if query %}Try a shorter word, or clear the filter.{% else %}Drop a picture or a file above and it is ready to use in any flow, broadcast or email.{% endif %}
      </p>
    </div>
  {% endif %}
</div>