{% extends "base.html" %}

{% block title %}Event Config{% endblock %}
{% block page_id %}event-config{% endblock %}
{% block page_title %}Event Configuration{% endblock %}
{% block eyebrow %}Settings{% endblock %}

{% block content %}
    <section class="panel-stack">
        <article class="glass-card panel-card">
            <div class="panel-header">
                <div>
                    <p class="eyebrow">Event Details</p>
                    <h3>Configure Event Information</h3>
                </div>
            </div>

            <div class="panel-body">
                <form method="post" action="{{ url_for('admin.event_config_page') }}" class="config-form">
                    <div class="form-grid">
                        <div class="field-group">
                            <label class="field-label" for="event_name">Event Name *</label>
                            <input
                                id="event_name"
                                name="event_name"
                                type="text"
                                placeholder="Enter event name"
                                value="{{ event.event_name if event else '' }}"
                                required
                            >
                        </div>

                        <div class="field-group">
                            <label class="field-label" for="event_subtitle">Event Subtitle</label>
                            <input
                                id="event_subtitle"
                                name="event_subtitle"
                                type="text"
                                placeholder="Enter event subtitle (optional)"
                                value="{{ event.event_subtitle if event else '' }}"
                            >
                        </div>

                        <div class="field-group">
                            <label class="field-label" for="venue">Venue</label>
                            <input
                                id="venue"
                                name="venue"
                                type="text"
                                placeholder="Enter venue location"
                                value="{{ event.venue if event else '' }}"
                            >
                        </div>

                        <div class="field-group">
                            <label class="field-label" for="start_date">Start Date</label>
                            <input
                                id="start_date"
                                name="start_date"
                                type="date"
                                value="{{ event.start_date.strftime('%Y-%m-%d') if event and event.start_date else '' }}"
                            >
                        </div>

                        <div class="field-group">
                            <label class="field-label" for="end_date">End Date</label>
                            <input
                                id="end_date"
                                name="end_date"
                                type="date"
                                value="{{ event.end_date.strftime('%Y-%m-%d') if event and event.end_date else '' }}"
                            >
                        </div>
                    </div>

                    <div class="form-actions">
                        <button class="primary-btn" type="submit">Save Event Configuration</button>
                    </div>
                </form>
            </div>
        </article>
    </section>
{% endblock %}

{% block scripts %}
<script>
    // Auto-save form data to prevent loss on navigation
    document.querySelector('.config-form').addEventListener('submit', function(e) {
        const submitBtn = this.querySelector('button[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.textContent = 'Saving...';
    });
</script>
{% endblock %}