{% load static %}
{% if references %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="references-grid">
  {% for ref in references %}
  <div class="cur-card bg-white border border-stone-200 rounded-xl p-4 shadow-sm hover:shadow-md transition">
    <div class="flex items-center justify-between mb-2">
      <span class="text-xs font-semibold uppercase tracking-wider text-stone-500">{{ ref.source_type }}</span>
      <span class="text-xs text-stone-400">{{ ref.observed_at|date:"d/m/Y H:i" }}</span>
    </div>
    <div class="font-medium text-stone-900 mb-1">
      {% if ref.author_handle %}@{{ ref.author_handle }}{% else %}Sem autor{% endif %}
    </div>
    <p class="text-sm text-stone-600 line-clamp-3 mb-3">{{ ref.caption }}</p>
    <div class="flex flex-wrap gap-1 mb-3">
      {% for membership in ref.folder_memberships.all %}
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-stone-100 text-stone-700">
        {{ membership.folder.name }}
      </span>
      {% empty %}
      <span class="text-xs text-stone-400 italic">Sem pasta</span>
      {% endfor %}
    </div>
    <div class="flex items-center justify-between pt-2 border-t border-stone-100 text-xs">
      <a href="{{ ref.permalink }}" target="_blank" rel="noopener noreferrer" class="text-orange-600 hover:text-orange-700 font-medium inline-flex items-center gap-1">
        Ver original &rarr;
      </a>
      <form method="post" action="{% url 'curation:reference_archive' workspace_id=workspace.id reference_id=ref.id %}">
        {% csrf_token %}
        <button type="submit" class="text-stone-400 hover:text-red-600 transition" title="Arquivar referência">
          Arquivar
        </button>
      </form>
    </div>
  </div>
  {% endfor %}
</div>
{% if references.has_other_pages %}
<nav class="flex items-center justify-between border-t border-stone-200 px-4 py-3 sm:px-6 mt-6" aria-label="Paginação de referências">
  <div class="hidden sm:block">
    <p class="text-sm text-stone-700">
      Página <span class="font-medium">{{ references.number }}</span> de <span class="font-medium">{{ references.paginator.num_pages }}</span>
    </p>
  </div>
  <div class="flex flex-1 justify-between sm:justify-end gap-2">
    {% if references.has_previous %}
    <a href="?tab=references{% if current_folder %}&folder={{ current_folder|urlencode }}{% endif %}{% if query %}&q={{ query|urlencode }}{% endif %}&page={{ references.previous_page_number }}" class="inline-flex items-center px-3 py-1.5 border border-stone-300 rounded-md text-xs font-medium text-stone-700 bg-white hover:bg-stone-50 transition">
      &larr; Anterior
    </a>
    {% endif %}
    {% for p in references.paginator.page_range %}
      {% if p == references.number %}
      <span class="inline-flex items-center px-3 py-1.5 border border-orange-500 bg-orange-50 text-xs font-medium text-orange-600 rounded-md">
        {{ p }}
      </span>
      {% elif p >= references.number|add:"-2" and p <= references.number|add:"2" %}
      <a href="?tab=references{% if current_folder %}&folder={{ current_folder|urlencode }}{% endif %}{% if query %}&q={{ query|urlencode }}{% endif %}&page={{ p }}" class="inline-flex items-center px-3 py-1.5 border border-stone-300 rounded-md text-xs font-medium text-stone-700 bg-white hover:bg-stone-50 transition">
        {{ p }}
      </a>
      {% endif %}
    {% endfor %}
    {% if references.has_next %}
    <a href="?tab=references{% if current_folder %}&folder={{ current_folder|urlencode }}{% endif %}{% if query %}&q={{ query|urlencode }}{% endif %}&page={{ references.next_page_number }}" class="inline-flex items-center px-3 py-1.5 border border-stone-300 rounded-md text-xs font-medium text-stone-700 bg-white hover:bg-stone-50 transition">
      Próxima &rarr;
    </a>
    {% endif %}
  </div>
</nav>
{% endif %}
{% else %}
<div class="text-center py-12 bg-stone-50 rounded-xl border border-dashed border-stone-200">
  <p class="text-sm text-stone-500 font-medium">Nenhuma referência salva encontrada.</p>
  <p class="text-xs text-stone-400 mt-1">Adicione links de postagens estratégicas como referências.</p>
</div>
{% endif %}