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

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

{% block content %}
<div class="max-w-2xl mx-auto mt-8">
  <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="p-6 border-b border-gray-100 bg-gray-50">
      <h2 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
        <i data-lucide="refresh-cw" class="w-5 h-5 text-blue-600"></i>
        Sync from Meta
      </h2>
    </div>
    <div class="p-6">
      <p class="text-gray-600 mb-6 leading-relaxed">
        This will fetch the latest blocked users list directly from Meta and update your local database. 
        Depending on the size of your blocklist (up to 64,000 users), this may take some time as we fetch them in batches of 100.
      </p>
      
      <form method="post" action="{% url 'django_meta_whatsapp:blocked_sync' %}">
        {% csrf_token %}
        <div class="flex items-center gap-3">
          <button type="submit" class="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors">
            <i data-lucide="play" class="w-4 h-4"></i> Start Sync
          </button>
          <a href="{% url 'django_meta_whatsapp:blocked_list' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors">
            Cancel
          </a>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}