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

{% block content %}
<div class="container py-5">
    <div class="mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'event_list' %}">Events</a></li>
                {% if not is_create %}
                <li class="breadcrumb-item"><a href="{% url 'event_detail' event.id %}">{{ event.name|default:event.event_type }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit</li>
                {% else %}
                <li class="breadcrumb-item active" aria-current="page">New Event</li>
                {% endif %}
            </ol>
        </nav>
        <h1 class="h2 mb-0">{% if is_create %}Create New Event{% else %}Edit Event{% endif %}</h1>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <form method="POST">
                        {% csrf_token %}
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label for="{{ form.name.id_for_label }}" class="form-label fw-bold">Event Name</label>
                                {{ form.name }}
                                {% if form.name.errors %}
                                    <div class="text-danger small">{{ form.name.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.event_type.id_for_label }}" class="form-label fw-bold">Event Type</label>
                                {{ form.event_type }}
                                {% if form.event_type.errors %}
                                    <div class="text-danger small">{{ form.event_type.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.default_volunteer_role.id_for_label }}" class="form-label fw-bold">Default Volunteer Role</label>
                                {{ form.default_volunteer_role }}
                                {% if form.default_volunteer_role.errors %}
                                    <div class="text-danger small">{{ form.default_volunteer_role.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.date.id_for_label }}" class="form-label fw-bold">Date</label>
                                {{ form.date }}
                                {% if form.date.errors %}
                                    <div class="text-danger small">{{ form.date.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.start_time.id_for_label }}" class="form-label fw-bold">Start Time</label>
                                {{ form.start_time }}
                                {% if form.start_time.errors %}
                                    <div class="text-danger small">{{ form.start_time.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.end_time.id_for_label }}" class="form-label fw-bold">End Time</label>
                                {{ form.end_time }}
                                {% if form.end_time.errors %}
                                    <div class="text-danger small">{{ form.end_time.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-12">
                                <label for="{{ form.description.id_for_label }}" class="form-label fw-bold">Description</label>
                                {{ form.description }}
                                {% if form.description.errors %}
                                    <div class="text-danger small">{{ form.description.errors }}</div>
                                {% endif %}
                            </div>

                            <hr class="my-4">
                            <h5 class="fw-bold mb-3">Location Information</h5>

                            <div class="col-md-12">
                                <label for="{{ form.location_name.id_for_label }}" class="form-label fw-bold">Location Name</label>
                                {{ form.location_name }}
                                {% if form.location_name.errors %}
                                    <div class="text-danger small">{{ form.location_name.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-12">
                                <label for="{{ form.address.id_for_label }}" class="form-label fw-bold">Street Address</label>
                                {{ form.address }}
                                {% if form.address.errors %}
                                    <div class="text-danger small">{{ form.address.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.city.id_for_label }}" class="form-label fw-bold">City</label>
                                {{ form.city }}
                                {% if form.city.errors %}
                                    <div class="text-danger small">{{ form.city.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-3">
                                <label for="{{ form.state.id_for_label }}" class="form-label fw-bold">State</label>
                                {{ form.state }}
                                {% if form.state.errors %}
                                    <div class="text-danger small">{{ form.state.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-3">
                                <label for="{{ form.zip_code.id_for_label }}" class="form-label fw-bold">Zip Code</label>
                                {{ form.zip_code }}
                                {% if form.zip_code.errors %}
                                    <div class="text-danger small">{{ form.zip_code.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.latitude.id_for_label }}" class="form-label fw-bold">Latitude</label>
                                {{ form.latitude }}
                                {% if form.latitude.errors %}
                                    <div class="text-danger small">{{ form.latitude.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.longitude.id_for_label }}" class="form-label fw-bold">Longitude</label>
                                {{ form.longitude }}
                                {% if form.longitude.errors %}
                                    <div class="text-danger small">{{ form.longitude.errors }}</div>
                                {% endif %}
                            </div>

                            <div class="col-12 mt-4 d-flex gap-3">
                                <button type="submit" class="btn btn-primary px-5 rounded-pill shadow-sm">{% if is_create %}Create Event{% else %}Save Changes{% endif %}</button>
                                <a href="{% if is_create %}{% url 'event_list' %}{% else %}{% url 'event_detail' event.id %}{% endif %}" class="btn btn-outline-secondary px-5 rounded-pill">Cancel</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}