{% extends "django_meta_whatsapp/base.html" %}
{% block title %}Sync Catalog Products{% endblock %}
{% block page_title %}Sync Catalog Products{% endblock %}
{% block topbar_actions %}
<a href="{% url 'django_meta_whatsapp:catalog_list' %}" class="inline-flex items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium px-4 py-2 rounded-lg transition-colors">
  <i data-lucide="arrow-left" class="w-4 h-4"></i> Back
</a>
{% endblock %}
{% block content %}
<div class="max-w-2xl bg-white rounded-xl border border-gray-100 shadow-sm p-6">
  <div class="mb-6 pb-6 border-b border-gray-100 flex items-start gap-4">
    <div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center flex-shrink-0">
      <i data-lucide="download-cloud" class="w-6 h-6"></i>
    </div>
    <div>
      <h3 class="text-lg font-semibold text-gray-900 mb-1">Pull Products from Meta</h3>
      <p class="text-gray-500 text-sm">
        This tool connects directly to the Meta Graph API using your current WhatsApp Business API credentials. It will fetch all products from your specified Commerce Catalog and save them locally so your agents can easily select them.
      </p>
    </div>
  </div>

  <form method="post" class="space-y-5">
    {% csrf_token %}
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Meta Catalog ID</label>
      <input type="text" name="catalog_id" value="{{ default_catalog_id }}" {% if not default_catalog_id %}required{% endif %} placeholder="e.g. 101010101010101" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 font-mono text-sm">
      <p class="text-gray-400 text-xs mt-1">You can find this in your Facebook Commerce Manager under Catalog Settings. {% if default_catalog_id %}Using account default.{% endif %}</p>
    </div>

    <div class="pt-4 flex justify-end">
      <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition-colors shadow-sm inline-flex items-center gap-2">
        <i data-lucide="refresh-cw" class="w-4 h-4"></i> Start Sync
      </button>
    </div>
  </form>
</div>
{% endblock %}