{% extends "base.html" %}

{% block title %}{{ title }} - AsapLoads POS{% endblock %}

{% block header_title %}{{ title }}{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h5 class="card-title mb-0">{{ title }}</h5>
    </div>
    <div class="card-body">
        <form method="post">
            {% csrf_token %}
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="{{ form.first_name.id_for_label }}" class="form-label">First Name *</label>
                    {{ form.first_name }}
                    {% if form.first_name.errors %}
                        <div class="text-danger">
                            {{ form.first_name.errors.0 }}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-6">
                    <label for="{{ form.last_name.id_for_label }}" class="form-label">Last Name *</label>
                    {{ form.last_name }}
                    {% if form.last_name.errors %}
                        <div class="text-danger">
                            {{ form.last_name.errors.0 }}
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="{{ form.email.id_for_label }}" class="form-label">Email</label>
                    {{ form.email }}
                    {% if form.email.errors %}
                        <div class="text-danger">
                            {{ form.email.errors.0 }}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-6">
                    <label for="{{ form.phone.id_for_label }}" class="form-label">Phone</label>
                    {{ form.phone }}
                    {% if form.phone.errors %}
                        <div class="text-danger">
                            {{ form.phone.errors.0 }}
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <div class="row mb-3">
                <div class="col-12">
                    <label for="{{ form.address.id_for_label }}" class="form-label">Address</label>
                    {{ form.address }}
                    {% if form.address.errors %}
                        <div class="text-danger">
                            {{ form.address.errors.0 }}
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-4">
                    <label for="{{ form.city.id_for_label }}" class="form-label">City</label>
                    {{ form.city }}
                    {% if form.city.errors %}
                        <div class="text-danger">
                            {{ form.city.errors.0 }}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-4">
                    <label for="{{ form.state.id_for_label }}" class="form-label">State/Province</label>
                    {{ form.state }}
                    {% if form.state.errors %}
                        <div class="text-danger">
                            {{ form.state.errors.0 }}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-4">
                    <label for="{{ form.postal_code.id_for_label }}" class="form-label">Postal Code</label>
                    {{ form.postal_code }}
                    {% if form.postal_code.errors %}
                        <div class="text-danger">
                            {{ form.postal_code.errors.0 }}
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="{{ form.branch.id_for_label }}" class="form-label">Branch *</label>
                    {{ form.branch }}
                    {% if form.branch.errors %}
                        <div class="text-danger">
                            {{ form.branch.errors.0 }}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-6">
                    <label for="{{ form.notes.id_for_label }}" class="form-label">Notes</label>
                    {{ form.notes }}
                    {% if form.notes.errors %}
                        <div class="text-danger">
                            {{ form.notes.errors.0 }}
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <div class="d-flex justify-content-between">
                <a href="{% url 'customer_list' %}" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}