{% extends "django_meta_whatsapp/base.html" %}
{% block title %}{% if object %}Edit Product{% else %}New Product{% endif %}{% endblock %}
{% block page_title %}{% if object %}Edit {{ object.name }}{% else %}New Product{% endif %}{% 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">
  <form method="post" class="space-y-5">
    {% csrf_token %}
    
    {% if form.non_field_errors %}
      <div class="bg-red-50 text-red-600 p-3 rounded-lg text-sm mb-4">
        {{ form.non_field_errors }}
      </div>
    {% endif %}

    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Catalog ID</label>
      <input type="text" name="catalog_id" value="{{ form.catalog_id.value|default:'' }}" required 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">
      {% if form.catalog_id.errors %}<p class="text-red-500 text-xs mt-1">{{ form.catalog_id.errors.0 }}</p>{% endif %}
      <p class="text-gray-400 text-xs mt-1">The ID of your Meta Commerce Catalog.</p>
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Product Retailer ID</label>
      <input type="text" name="retailer_id" value="{{ form.retailer_id.value|default:'' }}" required 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">
      {% if form.retailer_id.errors %}<p class="text-red-500 text-xs mt-1">{{ form.retailer_id.errors.0 }}</p>{% endif %}
      <p class="text-gray-400 text-xs mt-1">Your local SKU / ID matching the product in Meta.</p>
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Product Name</label>
      <input type="text" name="name" value="{{ form.name.value|default:'' }}" required class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 text-sm">
      {% if form.name.errors %}<p class="text-red-500 text-xs mt-1">{{ form.name.errors.0 }}</p>{% endif %}
    </div>
    
    <div class="grid grid-cols-2 gap-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Price (Optional)</label>
        <input type="text" name="price" value="{{ form.price.value|default:'' }}" placeholder="e.g. 29.99 USD" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 text-sm">
        {% if form.price.errors %}<p class="text-red-500 text-xs mt-1">{{ form.price.errors.0 }}</p>{% endif %}
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
        <div class="mt-2">
          <label class="inline-flex items-center">
            <input type="checkbox" name="is_active" class="form-checkbox h-4 w-4 text-emerald-600 rounded border-gray-300 focus:ring-emerald-500" {% if form.is_active.value or not object %}checked{% endif %}>
            <span class="ml-2 text-sm text-gray-700">Active</span>
          </label>
        </div>
      </div>
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Image URL (Optional)</label>
      <input type="url" name="image_url" value="{{ form.image_url.value|default:'' }}" placeholder="https://..." class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 text-sm">
      {% if form.image_url.errors %}<p class="text-red-500 text-xs mt-1">{{ form.image_url.errors.0 }}</p>{% endif %}
    </div>

    <div class="pt-4 border-t border-gray-100 flex justify-end">
      <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-6 rounded-lg transition-colors shadow-sm">
        Save Product
      </button>
    </div>
  </form>
</div>
{% endblock %}