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

{% block title %}{{ title }} | Roster{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-body p-4 p-md-5">
                    <h2 class="fw-bold mb-4">{{ title }}</h2>
                    <form method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <div class="row g-3">
                            <!-- Basic Info -->
                            <div class="col-12">
                                <label class="form-label small fw-bold">Session Title*</label>
                                {{ form.title }}
                                {{ form.title.errors }}
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label small fw-bold">Description*</label>
                                {{ form.description }}
                                {{ form.description.errors }}
                            </div>
                            
                            <!-- Date & Time -->
                            <div class="col-md-6">
                                <label class="form-label small fw-bold">Start Date & Time*</label>
                                {{ form.start_datetime }}
                                {{ form.start_datetime.errors }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold">End Date & Time</label>
                                {{ form.end_datetime }}
                                {{ form.end_datetime.errors }}
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label small fw-bold">Timezone</label>
                                {{ form.timezone }}
                                {{ form.timezone.errors }}
                            </div>
                            
                            <!-- Location -->
                            <div class="col-md-6">
                                <label class="form-label small fw-bold">Location Name*</label>
                                {{ form.location_name }}
                                {{ form.location_name.errors }}
                            </div>
                            <div class="col-12">
                                <label class="form-label small fw-bold">Address</label>
                                {{ form.location_address }}
                                {{ form.location_address.errors }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold">City</label>
                                {{ form.city }}
                                {{ form.city.errors }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold">State</label>
                                {{ form.state }}
                                {{ form.state.errors }}
                            </div>
                            
                            <!-- Online Info -->
                            <div class="col-12 mt-4">
                                <div class="form-check form-switch">
                                    {{ form.is_online }}
                                    <label class="form-check-label small fw-bold" for="{{ form.is_online.id_for_label }}">This is an online session</label>
                                </div>
                            </div>
...
                        <div class="d-flex justify-content-between align-items-center mt-5">
                            <a href="{% if event %}{% url 'event_detail' event.id %}{% else %}{% url 'events' %}{% endif %}" class="btn btn-link text-muted text-decoration-none">Cancel</a>
                            <button type="submit" class="btn btn-primary-cg rounded-pill px-5">Save Session</button>
                        </div>

                            </div>
                            <div class="col-12">
                                <label class="form-label small fw-bold">Online Meeting URL</label>
                                {{ form.online_url }}
                                {{ form.online_url.errors }}
                            </div>
                            
                            <!-- Settings -->
                            <div class="col-md-6 mt-4">
                                <label class="form-label small fw-bold">Visibility</label>
                                {{ form.visibility }}
                                {{ form.visibility.errors }}
                            </div>
                            <div class="col-md-6 mt-4">
                                <label class="form-label small fw-bold">Capacity</label>
                                {{ form.capacity }}
                                {{ form.capacity.errors }}
                            </div>
                            
                            <div class="col-12 mt-4">
                                <label class="form-label small fw-bold">Cover Image</label>
                                {{ form.cover_image }}
                                {{ form.cover_image.errors }}
                            </div>
                            
                            <div class="col-12 mt-4">
                                <label class="form-label small fw-bold">Tags</label>
                                {{ form.tags }}
                                {{ form.tags.errors }}
                                <p class="extra-small text-muted mt-1">Hold Ctrl (or Cmd) to select multiple tags.</p>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mt-5">
                            <a href="{% if event %}{% url 'event_detail' event.id %}{% else %}{% url 'events' %}{% endif %}" class="btn btn-link text-muted text-decoration-none">Cancel</a>
                            <button type="submit" class="btn btn-primary-cg rounded-pill px-5">Save Event</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
