{% extends 'ups_manager/base.html' %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card shadow-lg">
            <div class="card-header bg-info text-white">
                <h2 class="mb-0">{% if object %}编辑{% else %}添加{% endif %}联系人</h2>
            </div>
            <div class="card-body">
                <form method="post" class="needs-validation" novalidate>
                    {% csrf_token %}
                    
                    <div class="row g-4">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="{{ form.name.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.name.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.name }}
                                {% if form.name.errors %}
                                    {% for error in form.name.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="{{ form.phone.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.phone.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.phone }}
                                {% if form.phone.errors %}
                                    {% for error in form.phone.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="{{ form.email.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.email.label }}
                                </label>
                                {{ form.email }}
                                {% if form.email.errors %}
                                    {% for error in form.email.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-5 d-flex justify-content-end gap-3">
                        <a href="{% url 'contact_list' %}" class="btn btn-secondary px-6">
                            <i class="fas fa-arrow-left mr-2"></i>取消
                        </a>
                        <button type="submit" class="btn btn-info px-6">
                            <i class="fas fa-save mr-2"></i>保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .form-control:focus {
        border-color: #0dcaf0;
        box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
    }
    .card {
        border-radius: 12px;
    }
    .card-header {
        border-radius: 12px 12px 0 0 !important;
    }
    .font-weight-semibold {
        font-weight: 600;
    }
</style>

{% endblock %}