{% extends 'base.html.twig' %}

{% block title %}SwimMonitor - Global Settings{% endblock %}

{% block header %}
    <div class="container-header">
        <h1 class="display-4">Globale Einstellungen</h1>
        <div class="container-status">
            <span class="badge bg-primary">Konfiguration</span>
        </div>
    </div>
{% endblock %}

{% block breadcrumb %}
    <i class="fas fa-cogs me-2"></i>Globale Einstellungen
{% endblock %}

{% block content %}
    <div class="container mt-4">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow border-start border-bottom">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">
                            <i class="fas fa-bell me-2"></i>E-Mail Benachrichtigungen
                        </h5>
                    </div>
                    <div class="card-body">
                        {% for message in app.flashes('success') %}
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="fas fa-check-circle me-2"></i>{{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% endfor %}

                        <form method="post" class="needs-validation">
                            <div class="mb-4">
                                <label for="emails" class="form-label">E-Mail-Adressen für Benachrichtigungen</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-envelope"></i>
                                    </span>
                                    <input type="text" 
                                           name="emails" 
                                           id="emails" 
                                           class="form-control" 
                                           value="{{ currentEmails }}" 
                                           placeholder="E-Mail-Adressen durch Komma getrennt eingeben"
                                           required>
                                </div>
                                <div class="form-text mt-2">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Geben Sie die E-Mail-Adressen durch Komma getrennt ein. Diese werden bei Warnungen oder Alarmen benachrichtigt.
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <label for="tv_carousel_duration" class="form-label">TV-Dashboard: Anzeigedauer pro Container (Sekunden)</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-tv"></i>
                                    </span>
                                    <input type="number" 
                                           name="tv_carousel_duration" 
                                           id="tv_carousel_duration" 
                                           class="form-control" 
                                           value="{{ tvSettings.carousel_duration|default(10) }}" 
                                           min="5"
                                           max="60"
                                           step="1"
                                           placeholder="10"
                                           required>
                                    <span class="input-group-text">Sekunden</span>
                                </div>
                                <div class="form-text mt-2">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Legt fest, wie lange jeder Container auf dem TV-Dashboard angezeigt wird, bevor zum nächsten gewechselt wird. (Empfohlen: 10-15 Sekunden)
                                </div>
                            </div>
                            
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-save me-2"></i>Einstellungen speichern
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

<style>
.container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.container-status {
    margin-left: 1rem;
}

.card {
    transition: transform 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
}

.card-header {
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.input-group-text {
    background-color: #f8f9fa;
    border-right: none;
}

.form-control:focus {
    border-color: #2c3e50;
    box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
}

.btn-primary {
    background-color: #2c3e50;
    border-color: #2c3e50;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #1a252f;
    border-color: #1a252f;
    transform: translateY(-1px);
}

.form-label {
    color: #2c3e50;
    font-weight: 500;
}

.input-group .form-control {
    border-left: none;
}

.input-group .form-control:focus {
    border-left: none;
}

.form-text {
    color: #6c757d;
}

.alert {
    border: none;
    border-radius: 8px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
}
</style>
{% endblock %}