{% extends "django_meta_whatsapp/base.html" %}
{% block title %}{% if object %}Edit Opt-in Link{% else %}New Opt-in Link{% endif %}{% endblock %}
{% block page_title %}{% if object %}Edit Opt-in Link{% else %}New Opt-in Link{% endif %}{% endblock %}

{% block content %}
<div class="max-w-2xl bg-white rounded-xl shadow-sm border border-gray-100 p-6">
  <form method="post" class="space-y-6">
    {% csrf_token %}
    {% if form.non_field_errors %}
      <div class="bg-red-50 text-red-600 p-4 rounded-lg text-sm mb-4">
        {{ form.non_field_errors }}
      </div>
    {% endif %}

    <div class="space-y-5">
      {% for field in form %}
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
          {{ field.label }} {% if field.field.required %}<span class="text-red-500">*</span>{% endif %}
        </label>
        
        {% if field.name == 'auto_add_to_label' %}
          <div class="relative">
            <select name="{{ field.html_name }}" id="{{ field.id_for_label }}" class="w-full appearance-none bg-white border border-gray-300 rounded-lg shadow-sm focus:border-emerald-500 focus:ring-emerald-500 px-4 py-2">
              {% for choice in field.field.choices %}
                <option value="{{ choice.0 }}" {% if field.value|stringformat:"s" == choice.0|stringformat:"s" %}selected{% endif %}>{{ choice.1 }}</option>
              {% endfor %}
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-500">
              <i data-lucide="chevron-down" class="w-4 h-4"></i>
            </div>
          </div>
        {% elif field.name == 'signup_message' or field.name == 'confirmation_message' %}
          <textarea name="{{ field.html_name }}" id="{{ field.id_for_label }}" rows="4" class="w-full border border-gray-300 rounded-lg shadow-sm focus:border-emerald-500 focus:ring-emerald-500 px-4 py-2 text-sm">{% if field.value %}{{ field.value }}{% endif %}</textarea>
        {% else %}
          <input type="{{ field.field.widget.input_type|default:'text' }}" name="{{ field.html_name }}" id="{{ field.id_for_label }}" {% if field.value %}value="{{ field.value }}"{% endif %} class="w-full border border-gray-300 rounded-lg shadow-sm focus:border-emerald-500 focus:ring-emerald-500 px-4 py-2 text-sm" {% if field.field.required %}required{% endif %}>
        {% endif %}
        
        {% if field.help_text %}
          <p class="mt-1.5 text-xs text-gray-500">{{ field.help_text }}</p>
        {% endif %}
        {% if field.errors %}
          <p class="mt-1.5 text-sm text-red-600">{{ field.errors.0 }}</p>
        {% endif %}
      </div>
      {% endfor %}
    </div>

    <div class="flex justify-end gap-3 pt-6 border-t border-gray-100">
      <a href="{% url 'django_meta_whatsapp:signup_list' %}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
        Cancel
      </a>
      <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-emerald-600 rounded-lg hover:bg-emerald-700 transition-colors shadow-sm">
        {% if object %}Save Changes{% else %}Create Link{% endif %}
      </button>
    </div>
  </form>
</div>
{% endblock %}