{% extends "admin/layout.twig" %}

{% block title %}Administração - {% if event %}Editar{% else %}Novo{% endif %} Evento{% endblock %}

{% block header_title %}{% if event %}Editar Evento{% else %}Criar Novo Evento{% endif %}{% endblock %}

{% block global_actions %}
    <a href="/admin/events" class="btn btn-secondary">&larr; Voltar para Eventos</a>
{% endblock %}

{% block extra_css %}
        .content-container { max-width: 800px; margin: 0 auto; }
        .cover-preview { width: 100%; max-height: 200px; object-fit: cover; margin-bottom: 10px; border-radius: 4px; }
{% endblock %}

{% block content %}
<div class="content-container">
    <form method="POST" action="{% if event %}/admin/events/{{ event.id }}/edit{% else %}/admin/events/create{% endif %}" enctype="multipart/form-data">
        
        <div class="form-group">
            <label for="title">Título do Evento</label>
            <input type="text" id="title" name="title" value="{{ event.title ?? '' }}" required>
        </div>

        <div class="form-group">
            <label for="description">Descrição</label>
            <textarea id="description" name="description">{{ event.description ?? '' }}</textarea>
        </div>

        <div class="form-group">
            <label for="event_date">Data e Hora do Evento</label>
            <input type="datetime-local" id="event_date" name="event_date" value="{{ event.event_date ?? '' }}">
        </div>

        <div class="form-group">
            <label for="location">Local do Evento</label>
            <input type="text" id="location" name="location" value="{{ event.location ?? '' }}">
        </div>

        <div class="form-group">
            <label for="status">Status</label>
            <select id="status" name="status">
                <option value="DRAFT" {% if (event.status ?? '') == 'DRAFT' %}selected{% endif %}>Rascunho</option>
                <option value="ACTIVE" {% if (event.status ?? 'ACTIVE') == 'ACTIVE' %}selected{% endif %}>Ativo</option>
                <option value="FINISHED" {% if (event.status ?? '') == 'FINISHED' %}selected{% endif %}>Concluído</option>
            </select>
        </div>

        <div class="form-row" style="display: flex; gap: 15px; margin-bottom: 15px;">
            <div class="form-group" style="flex: 1; margin-bottom: 0;">
                <label for="badge_width_cm">Largura do Crachá (cm)</label>
                <input type="number" step="0.1" min="1" id="badge_width_cm" name="badge_width_cm" value="{{ event.badge_width_cm ?? '8.0' }}" required>
            </div>
            <div class="form-group" style="flex: 1; margin-bottom: 0;">
                <label for="badge_height_cm">Altura do Crachá (cm)</label>
                <input type="number" step="0.1" min="1" id="badge_height_cm" name="badge_height_cm" value="{{ event.badge_height_cm ?? '4.0' }}" required>
            </div>
        </div>

        <div class="form-group">
            <label for="cover_image">Imagem de Capa</label>
            {% if event.cover_image_url %}
                <div>
                    <img src="{{ event.cover_image_url }}" alt="Capa Atual" class="cover-preview">
                </div>
            {% endif %}
            <input type="file" id="cover_image" name="cover_image" accept="image/*">
            <small>Deixe em branco se não quiser alterar a imagem atual.</small>
        </div>

        <div style="margin-top: 20px;">
            <button type="submit" class="btn">Salvar Evento</button>
            <a href="/admin/events" class="btn btn-secondary">Cancelar</a>
        </div>
    </form>

    {% if event %}
    <form method="POST" action="/admin/events/{{ event.id }}/delete" style="margin-top: 20px;" onsubmit="return confirm('Tem certeza que deseja deletar este evento? Esta ação não pode ser desfeita.');">
        <button type="submit" class="btn" style="background-color: #dc3545; color: white; border-color: #dc3545;">Deletar Evento</button>
    </form>
    {% endif %}
</div>
{% endblock %}