{% comment %}Asset grid for shared org library. No workspace-scoped URLs. Expects: page, query{% endcomment %}

{% if page.object_list %}
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3"
     hx-get="{% url 'media_library_org:shared_index' %}?page=1&q={{ query|urlencode }}"
     hx-trigger="uploadsComplete from:body"
     hx-target="#shared-grid"
     hx-swap="innerHTML">
  {% for asset in page.object_list %}
    {% include "media_library/_shared_asset_card.html" %}
  {% endfor %}
</div>

{% if page.has_other_pages %}
<div class="flex items-center justify-center gap-2 mt-6 pb-4">
  {% if page.has_previous %}
  <a href="?page={{ page.previous_page_number }}&q={{ query|urlencode }}"
     class="px-3 py-1.5 text-xs font-semibold rounded-full border transition-colors"
     style="border-color: var(--border, var(--color-stone-200)); color: var(--text-secondary, var(--color-stone-600));"
     hx-get="{% url 'media_library_org:shared_index' %}?page={{ page.previous_page_number }}&q={{ query|urlencode }}"
     hx-target="#shared-grid"
     hx-swap="innerHTML">
    Previous
  </a>
  {% endif %}
  <span class="text-xs px-3" style="color: var(--text-tertiary, var(--color-stone-500));">
    Page {{ page.number }} of {{ page.paginator.num_pages }}
  </span>
  {% if page.has_next %}
  <a href="?page={{ page.next_page_number }}&q={{ query|urlencode }}"
     class="px-3 py-1.5 text-xs font-semibold rounded-full border transition-colors"
     style="border-color: var(--border, var(--color-stone-200)); color: var(--text-secondary, var(--color-stone-600));"
     hx-get="{% url 'media_library_org:shared_index' %}?page={{ page.next_page_number }}&q={{ query|urlencode }}"
     hx-target="#shared-grid"
     hx-swap="innerHTML">
    Next
  </a>
  {% endif %}
</div>
{% endif %}

{% else %}
<div class="flex flex-col items-center justify-center py-20 text-center">
  <div class="w-20 h-20 rounded-2xl flex items-center justify-center mb-5"
       style="background: var(--primary-soft, #FFF7ED);">
    <svg class="w-10 h-10" style="color: var(--primary, #F97316);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
    </svg>
  </div>
  {% if query %}
    <h3 class="text-base font-semibold mb-1" style="color: var(--text-primary, var(--color-stone-900));">No media matches your search</h3>
    <p class="text-sm mb-4" style="color: var(--text-secondary, var(--color-stone-600));">Try adjusting your search terms.</p>
  {% else %}
    <h3 class="text-base font-semibold mb-1" style="color: var(--text-primary, var(--color-stone-900));">No shared media yet</h3>
    <p class="text-sm" style="color: var(--text-secondary, var(--color-stone-600));">Organization admins can upload assets here for use across all workspaces.</p>
  {% endif %}
</div>
{% endif %}