{% extends "sidebar.html" %}

{% block title %}AstraOS — Maintenance Management{% endblock %}

{% block head %}
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
    /* Toggle Switch Styles */
    .switch { position: relative; display: inline-block; width: 60px; height: 34px; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4a5568; transition: .4s; border-radius: 34px; }
    .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
    input:checked + .slider { background-color: #8b5cf6; }
    input:checked + .slider:before { transform: translateX(26px); }
</style>
{% endblock %}

{% block content %}
<main class="flex-1 p-8 space-y-10" id="mainContent">
    <!-- HEADER -->
    <header class="flex justify-between items-center mb-10">
        <h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Maintenance Management</h2>
    </header>

    <!-- SETTINGS FORM -->
    <div class="bg-black/40 rounded-xl backdrop-blur-lg p-8
                {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <form action="{{ url_for('update_maintenance') }}" method="POST" class="space-y-8">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

            <!-- Maintenance Mode Toggle -->
            <div class="flex items-center justify-between p-4 bg-gray-900/50 rounded-lg">
                <div>
                    <h3 class="text-xl font-semibold {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Wartungsmodus</h3>
                    <p class="text-gray-400 text-sm mt-1">Aktiviert den Wartungsmodus und sperrt den Zugang für normale Benutzer.</p>
                </div>
                <label class="switch">
                    <input type="checkbox" name="maintenance_enabled" {% if maint_info.enabled %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
            </div>

            <!-- Maintenance Details -->
            <div class="space-y-6">
                <div>
                    <label for="status_message" class="block text-sm font-medium text-gray-300">Wartungsnachricht</label>
                    <input type="text" name="status_message" id="status_message" value="{{ maint_info.status if maint_info.status and maint_info.status != 'Keine' else 'Wir führen gerade Wartungsarbeiten durch.' }}"
                           class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}"
                           placeholder="z.B. Wir führen gerade Wartungsarbeiten durch.">
                    <p class="text-xs text-gray-500 mt-1">Diese Nachricht wird auf der Wartungsseite angezeigt.</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="maintenance_time" class="block text-sm font-medium text-gray-300">Geplante Startzeit</label>
                        <input type="datetime-local" name="maintenance_time" id="maintenance_time" value="{{ maint_info.time_local_str if maint_info.time_local_str else '' }}"
                               class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}"
                               style="color-scheme: dark;">
                        <p class="text-xs text-gray-500 mt-1">Leer lassen für unbestimmte Zeit.</p>
                    </div>
                    <div>
                        <label for="duration_minutes" class="block text-sm font-medium text-gray-300">Dauer (in Minuten)</label>
                        <input type="number" name="duration_minutes" id="duration_minutes" value="{{ maint_info.duration_minutes if maint_info.duration_minutes else '' }}"
                               class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}"
                               placeholder="z.B. 60">
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end pt-4">
                <button type="submit" class="px-6 py-2 text-white font-semibold rounded-lg transition
                                           {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
                    Einstellungen speichern
                </button>
            </div>
        </form>
    </div>
</main>
{% endblock %}