{% extends "django_meta_whatsapp/base.html" %}
{% block title %}Catalog Products{% endblock %}
{% block page_title %}Catalog Products{% endblock %}
{% block topbar_actions %}
<a href="{% url 'django_meta_whatsapp:catalog_sync' %}" 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="refresh-cw" class="w-4 h-4"></i> Sync from Meta
</a>
<a href="{% url 'django_meta_whatsapp:catalog_create' %}" class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors ml-2">
  <i data-lucide="plus" class="w-4 h-4"></i> Add Product
</a>
{% endblock %}
{% block content %}
<div class="space-y-4">
  <form method="get" class="flex gap-3">
    <div class="relative flex-1 max-w-sm">
      <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
      <input name="q" value="{{ search_q }}" placeholder="Search products..." class="w-full pl-9 pr-4 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500"/>
    </div>
    <button type="submit" class="hidden">Search</button>
  </form>
  
  <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 w-16">Image</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Product Name</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Price</th>
          <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Retailer ID</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-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-50">
        {% for product in products %}
        <tr class="hover:bg-gray-50">
          <td class="px-4 py-3">
            {% if product.image_url %}
            <img src="{{ product.image_url }}" alt="{{ product.name }}" class="w-10 h-10 object-cover rounded shadow-sm border border-gray-100">
            {% else %}
            <div class="w-10 h-10 bg-gray-100 rounded flex items-center justify-center border border-gray-200 text-gray-400">
              <i data-lucide="image" class="w-4 h-4"></i>
            </div>
            {% endif %}
          </td>
          <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ product.name }}</td>
          <td class="px-4 py-3 text-sm text-gray-500">{{ product.price|default:"-" }}</td>
          <td class="px-4 py-3 text-sm text-gray-500 font-mono">{{ product.retailer_id }}</td>
          <td class="px-4 py-3">
            {% if product.is_active %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">Active</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-600">Inactive</span>
            {% endif %}
          </td>
          <td class="px-4 py-3 text-right">
            <div class="flex items-center justify-end gap-2">
              <a href="{% url 'django_meta_whatsapp:catalog_update' product.pk %}" class="text-gray-400 hover:text-blue-600" title="Edit"><i data-lucide="pencil" class="w-4 h-4"></i></a>
              <a href="{% url 'django_meta_whatsapp:catalog_delete' product.pk %}" class="text-gray-400 hover:text-red-600" title="Delete"><i data-lucide="trash-2" class="w-4 h-4"></i></a>
            </div>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="6" class="px-4 py-8 text-center text-sm text-gray-500">
            <div class="flex flex-col items-center justify-center">
              <i data-lucide="shopping-bag" class="w-8 h-8 text-gray-300 mb-2"></i>
              <p>No products found.</p>
              <a href="{% url 'django_meta_whatsapp:catalog_sync' %}" class="text-emerald-600 hover:underline mt-1 font-medium">Sync from Meta</a>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% if is_paginated %}
    <div class="px-4 py-3 border-t border-gray-100 flex items-center justify-between text-sm text-gray-500 bg-gray-50">
      <div>Showing page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</div>
      <div class="flex gap-2">
        {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}{% if search_q %}&q={{ search_q }}{% endif %}" class="hover:text-emerald-600">Previous</a>
        {% endif %}
        {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}{% if search_q %}&q={{ search_q }}{% endif %}" class="hover:text-emerald-600">Next</a>
        {% endif %}
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}