{% extends 'admin_frontend/base.html' %}
{% block title %}Profiles{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-4">
  <h1 class="text-2xl font-semibold">Profiles</h1>
  <div class="flex items-center gap-3">
    <a href="{% url 'admin_frontend:profile_create' %}" class="btn">New</a>
  </div>
  </div>

<div class="bg-white rounded shadow p-4 mb-4">
  {% load crispy_forms_tags %}
  <form method="get" class="flex items-center gap-2 ">
    {{ filter.form|crispy }}
      <button class="px-3 py-2 bg-blue-600 text-white rounded">Filter</button>
      <a href="{% url 'admin_frontend:profiles_list' %}" class="btn-outline">Reset</a>
  </form>
</div>
<div class="bg-white rounded shadow overflow-hidden">
  <table class="min-w-full divide-y divide-gray-200">
    <thead class="bg-gray-50">
      <tr>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">User</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Interests / Tags / Industry</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Verified</th>
        <th class="px-4 py-2"></th>
    </tr>
    </thead>
    <tbody class="divide-y divide-gray-200">
      {% for p in profiles %}
      <tr>
        <td class="px-4 py-2">{{ p.user.username }}</td>
        <td class="px-4 py-2">
          <div class="text-sm text-gray-700">{{ p.interests }}</div>
          <div class="mt-1 flex flex-wrap gap-1">
            {% if p.industry %}
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs bg-purple-50 text-purple-700 border border-purple-200">{{ p.industry }}</span>
            {% endif %}
            {% for t in p.tags.all %}
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-700 border border-blue-200">{{ t.name }}</span>
            {% empty %}{% endfor %}
          </div>
        </td>
        <td class="px-4 py-2">
          {% if p.is_verified %}
            <span class="inline-flex items-center gap-1 text-green-700"><span class="w-2 h-2 bg-green-600 rounded-full"></span> Verified</span>
          {% else %}
            <span class="text-gray-500">No</span>
          {% endif %}
        </td>
        <td class="px-4 py-2 text-right">
          <div class="flex gap-2 justify-end">
            <form method="post" action="{% url 'admin_frontend:profile_toggle_verify' p.pk %}">
              {% csrf_token %}
              <button class="btn-outline">Toggle</button>
            </form>
            <a class="btn-outline" href="{% url 'admin_frontend:profile_edit' p.pk %}">Edit</a>
            <form method="post" action="{% url 'admin_frontend:profile_delete' p.pk %}" onsubmit="return confirm('Delete this profile?');">
              {% csrf_token %}
              <button class="btn-outline text-red-600">Delete</button>
            </form>
          </div>
        </td>
      </tr>
      {% empty %}
      <tr><td class="px-4 py-4 text-center text-gray-500" colspan="4">No profiles found.</td></tr>
      {% endfor %}
    </tbody>
  </table>
  {% include 'admin_frontend/_pagination.html' %}
  </div>
{% endblock %}
