{% extends 'base.html' %}

{% if event %}
    {% set page_title = 'Edit Event' %}
{% else %}
    {% set page_title = 'New Event' %}
{% endif %}

{% block title %}{{ page_title }} - NooK Feedback{% endblock %}

{% block content %}
<h1 class="h3 mb-3">{{ page_title }}</h1>

<form method="post" enctype="multipart/form-data" class="row g-3" autocomplete="off">
    <div class="col-12">
        <label for="name" class="form-label">Name</label>
        <input type="text" class="form-control" id="name" name="name" value="{{ event.name if event else '' }}" required autofocus>
    </div>
    <div class="col-12 col-md-4">
        <label for="feedback_count_override" class="form-label">Feedback-Anzahl überschreiben (optional)</label>
        <input
            type="number"
            class="form-control"
            id="feedback_count_override"
            name="feedback_count_override"
            min="0"
            value="{{ event.feedback_count_override if event and event.feedback_count_override is not none else '' }}"
        >
        <div class="form-text">
            Leer lassen, um die tatsächliche Zahl der nicht-legacy Feedbacks zu verwenden.
        </div>
    </div>
    <div class="col-12 col-md-4">
        <label for="color" class="form-label">Farbe für Diagramme (optional)</label>
        <input
            type="color"
            class="form-control form-control-color"
            id="color"
            name="color"
            value="{{ event.color if event and event.color else '#3498db' }}"
            title="Wähle eine Farbe für die Diagramme"
        >
        <div class="form-text">
            Diese Farbe wird in allen Balkendiagrammen für dieses Event verwendet.
        </div>
    </div>
    <div class="col-12 col-md-6">
        <label for="start" class="form-label">Event Start (optional)</label>
        <input
            type="date"
            class="form-control"
            id="start"
            name="start"
            value="{{ event.start.isoformat() if event and event.start else '' }}"
        >
    </div>
    <div class="col-12 col-md-6">
        <label for="end" class="form-label">Event Ende (optional)</label>
        <input
            type="date"
            class="form-control"
            id="end"
            name="end"
            value="{{ event.end.isoformat() if event and event.end else '' }}"
        >
    </div>
    <div class="col-12">
        <label for="base_url" class="form-label">Base URL (optional)</label>
        <input
            type="url"
            class="form-control"
            id="base_url"
            name="base_url"
            value="{{ event.base_url if event and event.base_url else '' }}"
            placeholder="https://2025.nook-luebeck.de/"
        >
    </div>
    <div class="col-12 col-md-6">
        <label for="feedback_start" class="form-label">Feedback-Zeitraum Start (optional)</label>
        <input
            type="datetime-local"
            class="form-control"
            id="feedback_start"
            name="feedback_start"
            value="{{ event.feedback_start.strftime('%Y-%m-%dT%H:%M') if event and event.feedback_start else '' }}"
        >
    </div>
    <div class="col-12 col-md-6">
        <label for="feedback_end" class="form-label">Feedback-Zeitraum Ende (optional)</label>
        <input
            type="datetime-local"
            class="form-control"
            id="feedback_end"
            name="feedback_end"
            value="{{ event.feedback_end.strftime('%Y-%m-%dT%H:%M') if event and event.feedback_end else '' }}"
        >
    </div>
    <div class="col-12">
        <label for="image" class="form-label">Header-Bild (optional)</label>
        <input
            type="file"
            class="form-control"
            id="image"
            name="image"
            accept="image/jpeg,image/png,image/webp,image/jpg"
        >
        <div class="form-text">
            Lade ein Bild hoch, das als Header auf den Feedback-Seiten angezeigt wird. Erlaubte Formate: JPG, PNG, WebP. Das Bild wird automatisch sicher umbenannt.
        </div>
        {% if event and event.image_path %}
        <div class="mt-2">
            <img src="{{ url_for('uploads.uploaded_event_file', filename=event.image_path) }}" alt="{{ event.name }}" class="img-thumbnail" style="max-height: 150px;">
            <div class="form-text">Aktuelles Bild. Lade ein neues hoch, um es zu ersetzen.</div>
        </div>
        {% endif %}
    </div>
    <div class="col-12">
        <div class="form-check">
            <input
                type="checkbox"
                class="form-check-input"
                id="finalized"
                name="finalized"
                value="1"
                {{ 'checked' if event and event.finalized else '' }}
            >
            <label class="form-check-label" for="finalized">
                Event abgeschlossen (finalisiert)
            </label>
            <div class="form-text">
                Wenn aktiviert, kann kein Feedback mehr für dieses Event, dessen Talks oder Speaker eingegeben werden.
            </div>
        </div>
    </div>
    <div class="col-12 d-flex gap-2">
        <button type="submit" class="btn btn-primary">Save</button>
        <a href="{{ url_for('events.list_events') }}" class="btn btn-secondary">Cancel</a>
    </div>
</form>
{% endblock %}