{% load static %}
{% if profiles %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="profiles-grid">
  {% for prof in profiles %}
  <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">{{ prof.platform }}</span>
      <span class="text-xs text-stone-400">Rev. {{ prof.base_revision }}</span>
    </div>
    <div class="flex items-center gap-3 mb-3">
      {% if prof.avatar_url %}
      <img src="{{ prof.avatar_url }}" alt="@{{ prof.handle }}" class="w-10 h-10 rounded-full object-cover border border-stone-200">
      {% else %}
      <div class="w-10 h-10 rounded-full bg-orange-100 text-orange-700 flex items-center justify-center font-bold text-sm">
        {{ prof.handle|slice:":2"|upper }}
      </div>
      {% endif %}
      <div class="min-w-0">
        <h4 class="font-semibold text-stone-900 text-sm truncate">{% if prof.name %}{{ prof.name }}{% else %}@{{ prof.handle }}{% endif %}</h4>
        <p class="text-xs text-stone-500 truncate">@{{ prof.handle }}</p>
      </div>
    </div>
    {% if prof.bio %}
    <p class="text-xs text-stone-600 line-clamp-2 mb-3">{{ prof.bio }}</p>
    {% endif %}
    {% if prof.notes %}
    <div class="bg-stone-50 p-2 rounded text-xs text-stone-600 mb-3 border border-stone-100">
      <span class="font-medium text-stone-700">Notas:</span> {{ prof.notes }}
    </div>
    {% endif %}
    <div class="flex flex-wrap gap-1 mb-3">
      {% for membership in prof.category_memberships.all %}
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-50 text-orange-700 border border-orange-100">
        {{ membership.category.name }}
      </span>
      {% empty %}
      <span class="text-xs text-stone-400 italic">Sem categoria</span>
      {% endfor %}
    </div>
    <div class="flex items-center justify-between pt-2 border-t border-stone-100 text-xs">
      {% if prof.normalized_url %}
      <a href="{{ prof.normalized_url }}" target="_blank" rel="noopener noreferrer" class="text-orange-600 hover:text-orange-700 font-medium inline-flex items-center gap-1">
        Ver perfil &rarr;
      </a>
      {% else %}
      <span></span>
      {% endif %}
      <form method="post" action="{% url 'curation:profile_archive' workspace_id=workspace.id profile_id=prof.id %}">
        {% csrf_token %}
        <button type="submit" class="text-stone-400 hover:text-red-600 transition" title="Arquivar perfil">
          Arquivar
        </button>
      </form>
    </div>
  </div>
  {% endfor %}
</div>
{% if profiles.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 perfis">
  <div class="hidden sm:block">
    <p class="text-sm text-stone-700">
      Página <span class="font-medium">{{ profiles.number }}</span> de <span class="font-medium">{{ profiles.paginator.num_pages }}</span>
    </p>
  </div>
  <div class="flex flex-1 justify-between sm:justify-end gap-2">
    {% if profiles.has_previous %}
    <a href="?tab=profiles{% if current_category %}&category={{ current_category|urlencode }}{% endif %}{% if query %}&q={{ query|urlencode }}{% endif %}&page={{ profiles.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 profiles.paginator.page_range %}
      {% if p == profiles.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 >= profiles.number|add:"-2" and p <= profiles.number|add:"2" %}
      <a href="?tab=profiles{% if current_category %}&category={{ current_category|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 profiles.has_next %}
    <a href="?tab=profiles{% if current_category %}&category={{ current_category|urlencode }}{% endif %}{% if query %}&q={{ query|urlencode }}{% endif %}&page={{ profiles.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">Nenhum perfil de referência salvo.</p>
  <p class="text-xs text-stone-400 mt-1">Cadastre criadores e perfis concorrentes ou inspiracionais.</p>
</div>
{% endif %}