{% comment %}Empty state when no assets match. Expects: query (optional){% endcomment %}

<div class="flex flex-col items-center justify-center py-20 text-center">
  <!-- Illustration -->
  <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 or filters.</p>
    <a href="{% url 'media_library:index' workspace_id=workspace.id %}"
       class="btn-surface-1 inline-flex items-center gap-1.5 px-4 py-2 text-sm font-semibold rounded-full border transition-colors"
       style="border-color: var(--border, var(--color-stone-200)); color: var(--text-secondary, var(--color-stone-600));">
      Clear search
    </a>
  {% else %}
    <h3 class="text-base font-semibold mb-1" style="color: var(--text-primary, var(--color-stone-900));">No media uploaded yet</h3>
    <p class="text-sm max-w-xs mb-5" style="color: var(--text-secondary, var(--color-stone-600));">Upload images and videos to organize and reuse across your posts.</p>
    <button @click="$refs.fileInput.click()"
            class="inline-flex items-center gap-1.5 px-4 py-1.5 text-sm font-semibold text-orange-600 bg-orange-50 border border-orange-200 rounded-full hover:bg-orange-100 hover:border-orange-300 active:bg-orange-100 transition-all duration-150 cursor-pointer">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
      Upload media
    </button>
  {% endif %}
</div>