<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EcoCharge — Dashboard Admin</title>
    <style>
        /* ── Variables de couleur ── */
        :root {
            --vert:  #2ecc71;
            --bleu:  #1a1a2e;
            --gris:  #16213e;
            --blanc: #f0f4f8;
            --muted: #7f8c8d;
        }

        /* ── Reset simple ── */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: var(--bleu);
            font-family: 'Segoe UI', sans-serif;
            color: var(--blanc);
            min-height: 100vh;
            padding: 40px 20px;
        }

        /* ── Conteneur principal centré ── */
        .conteneur {
            max-width: 640px;
            margin: 0 auto;
        }

        /* ── En-tête de la page ── */
        .entete {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 36px;
        }

        .entete-titre {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .entete-titre span {
            font-size: 36px;
        }

        .entete-titre h1 {
            font-size: 24px;
            color: var(--vert);
            letter-spacing: 2px;
        }

        .entete-titre p {
            font-size: 13px;
            color: var(--muted);
            margin-top: 2px;
        }

        /* ── Lien de déconnexion ── */
        .deconnexion {
            color: var(--muted);
            text-decoration: none;
            font-size: 14px;
            border: 1px solid #2c3e50;
            padding: 8px 14px;
            border-radius: 8px;
            transition: color 0.2s, border-color 0.2s;
        }

        .deconnexion:hover {
            color: #e74c3c;
            border-color: #e74c3c;
        }

        /* ── Carte blanche contenant le formulaire ── */
        .carte {
            background-color: var(--gris);
            border-radius: 16px;
            padding: 36px 32px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        }

        .carte h2 {
            font-size: 17px;
            color: var(--blanc);
            margin-bottom: 6px;
        }

        .carte > p {
            color: var(--muted);
            font-size: 14px;
            margin-bottom: 32px;
        }

        /* ── Séparateur entre les champs ── */
        .separateur {
            border: none;
            border-top: 1px solid #2c3e50;
            margin: 28px 0;
        }

        /* ── Chaque groupe label + input + description ── */
        .champ {
            margin-bottom: 28px;
        }

        .champ-entete {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin-bottom: 6px;
        }

        .champ label {
            color: var(--blanc);
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Petite description sous le label */
        .champ-info {
            color: var(--muted);
            font-size: 12px;
        }

        /* Ligne input + unité */
        .input-ligne {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .champ input {
            flex: 1;
            padding: 12px 16px;
            border-radius: 8px;
            border: 1px solid #2c3e50;
            background-color: #0f3460;
            color: var(--blanc);
            font-size: 16px;
            outline: none;
            transition: border-color 0.2s;
        }

        .champ input:focus {
            border-color: var(--vert);
        }

        /* Unité affichée à droite (%, °C, W) */
        .unite {
            color: var(--muted);
            font-size: 15px;
            min-width: 24px;
        }

        /* ── Bouton Sauvegarder ── */
        .bouton {
            width: 100%;
            padding: 14px;
            background-color: var(--vert);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: 1px;
            margin-top: 8px;
            transition: background-color 0.2s;
        }

        .bouton:hover {
            background-color: #27ae60;
        }

        /* ── Message de confirmation Flask/Jinja ── */
        .succes {
            background-color: rgba(46, 204, 113, 0.15);
            border: 1px solid var(--vert);
            color: var(--vert);
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 14px;
            margin-bottom: 24px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="conteneur">

        <!-- ── En-tête avec titre et bouton déconnexion ── -->
        <div class="entete">
            <div class="entete-titre">
                <span>⚡</span>
                <div>
                    <h1>ECOCHARGE</h1>
                    <p>Panneau d'administration</p>
                </div>
            </div>
            <!-- Lien vers la route Flask /admin/logout -->
            <a class="deconnexion" href="/admin/logout">🚪 Déconnexion</a>
        </div>

        <!-- ── Carte principale ── -->
        <div class="carte">

            <h2>Seuils d'alerte</h2>
            <p>Modifiez les valeurs puis cliquez sur "Sauvegarder".</p>

            <!-- Formulaire — action vers la route Flask /admin/dashboard -->
            <form method="POST" action="/admin/dashboard">

                <!-- ── Champ 1 : batterie minimum ── -->
                <div class="champ">
                    <div class="champ-entete">
                        <label for="min_battery">🔋 Tension batterie minimum</label>
                    </div>
                    <p class="champ-info">Alerte si la tension de la batterie descend sous ce seuil.</p>
                    <br>
                    <div class="input-ligne">
                        <input
                            type="number"
                            id="min_battery"
                            name="min_battery"
                            value="{{ settings.min_battery }}"
                            min="0"
                            required
                        >
                        <span class="unite">V</span>
                    </div>
                </div>

                <hr class="separateur">

                <!-- ── Champ 2 : température maximum ── -->
                <div class="champ">
                    <div class="champ-entete">
                        <label for="max_temp">🌡️ Température maximum</label>
                    </div>
                    <p class="champ-info">Alerte si la température dépasse cette valeur.</p>
                    <br>
                    <div class="input-ligne">
                        <input
                            type="number"
                            id="max_temp"
                            name="max_temp"
                            value="{{ settings.max_temp }}"
                            min="0"
                            max="100"
                            required
                        >
                        <span class="unite">°C</span>
                    </div>
                </div>

                <hr class="separateur">

                <!-- ── Champ 3 : puissance minimum ── -->
                <div class="champ">
                    <div class="champ-entete">
                        <label for="min_power">☀️ Puissance minimum</label>
                    </div>
                    <p class="champ-info">Alerte si la production solaire descend sous ce seuil.</p>
                    <br>
                    <div class="input-ligne">
                        <input
                            type="number"
                            id="min_power"
                            name="min_power"
                            value="{{ settings.min_power }}"
                            min="0"
                            required
                        >
                        <span class="unite">W</span>
                    </div>
                </div>

                <button class="bouton" type="submit">💾 Sauvegarder</button>

            </form>
        </div>

    </div>

</body>
</html>
