{% extends "base.html" %}
{% load static %}

{% block title %}{{ title }}{% endblock %}
{% block page_title %}{{ title }}{% endblock %}

{% block content %}
{% include "partials/breadcrumb.html" %}
<div class="card max-w-2xl">
    <form method="post" id="customer-form" class="space-y-4" novalidate>
        {% csrf_token %}
        {% for field in form %}
        {% if field.name == 'whatsapp_number' %}
        <div>
            <div class="flex flex-wrap items-center justify-between gap-2 mb-1">
                <label class="block text-sm font-medium text-slate-700" for="{{ field.id_for_label }}">{{ field.label }}</label>
                <button type="button" id="same-as-mobile-btn" class="btn-secondary text-sm py-2 px-3">Same as Mobile</button>
            </div>
            {{ field }}
            {% if field.errors %}<p class="text-red-600 text-xs mt-1">{{ field.errors.0 }}</p>{% endif %}
        </div>
        {% elif field.name == 'mobile_number' or field.name == 'alternate_number' %}
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1" for="{{ field.id_for_label }}">{{ field.label }}{% if field.field.required %} *{% endif %}</label>
            {{ field }}
            {% if field.errors %}<p class="text-red-600 text-xs mt-1">{{ field.errors.0 }}</p>{% endif %}
        </div>
        {% else %}
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1" for="{{ field.id_for_label }}">{{ field.label }}{% if field.field.required %} *{% endif %}</label>
            {{ field }}
            {% if field.errors %}<p class="text-red-600 text-xs mt-1">{{ field.errors.0 }}</p>{% endif %}
        </div>
        {% endif %}
        {% endfor %}
        <div class="flex gap-3 pt-2">
            <button type="submit" class="btn-primary">Save</button>
            <a href="{% url 'customers:list' %}" class="btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/customer_form.js' %}"></script>
{% endblock %}