{% extends "django_meta_whatsapp/base.html" %}

{% block title %}Blocked Users | Meta WhatsApp{% endblock %}
{% block page_title %}Blocked Users{% endblock %}

{% block topbar_actions %}
<a href="{% url 'django_meta_whatsapp:blocked_sync' %}" class="inline-flex items-center gap-2 bg-blue-50 text-blue-700 hover:bg-blue-100 text-sm font-medium px-4 py-2 rounded-lg transition-colors border border-blue-200">
  <i data-lucide="refresh-cw" class="w-4 h-4"></i> Sync from Meta
</a>
{% endblock %}

{% block content %}
<div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
  <table class="w-full">
    <thead class="bg-gray-50 border-b border-gray-100">
      <tr>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Phone Number</th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Blocked At</th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Blocked By</th>
        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Reason</th>
        <th class="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-50">
      {% for bu in blocked_users %}
      <tr class="hover:bg-gray-50">
        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ bu.phone_number }}</td>
        <td class="px-4 py-3">
          {% if bu.is_active %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Blocked</span>
          {% else %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Unblocked</span>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-sm text-gray-500">{{ bu.blocked_at|date:"Y-m-d H:i" }}</td>
        <td class="px-4 py-3 text-sm text-gray-500">{{ bu.blocked_by|default:"—" }}</td>
        <td class="px-4 py-3 text-sm text-gray-500 truncate max-w-xs">{{ bu.reason|default:"—" }}</td>
        <td class="px-4 py-3 text-right">
          {% if bu.is_active %}
          <form action="{% url 'django_meta_whatsapp:contact_unblock' bu.phone_number %}" method="post" class="inline-block">
            {% csrf_token %}
            <button type="submit" class="text-emerald-600 hover:text-emerald-900 text-sm font-medium">Unblock</button>
          </form>
          {% else %}
          <form action="{% url 'django_meta_whatsapp:contact_block' bu.phone_number %}" method="post" class="inline-block">
            {% csrf_token %}
            <button type="submit" class="text-red-600 hover:text-red-900 text-sm font-medium">Block</button>
          </form>
          {% endif %}
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="6" class="px-4 py-12 text-center text-sm text-gray-400">
          No blocked users found.
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  {% if is_paginated %}
  <div class="px-4 py-3 border-t border-gray-100 flex items-center justify-between sm:px-6">
    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
      <div>
        <p class="text-sm text-gray-700">
          Showing page <span class="font-medium">{{ page_obj.number }}</span> of <span class="font-medium">{{ page_obj.paginator.num_pages }}</span>
        </p>
      </div>
      <div>
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
          {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
              <span class="sr-only">Previous</span>
              <i data-lucide="chevron-left" class="h-4 w-4"></i>
            </a>
          {% endif %}
          {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
              <span class="sr-only">Next</span>
              <i data-lucide="chevron-right" class="h-4 w-4"></i>
            </a>
          {% endif %}
        </nav>
      </div>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}