{% extends "base.html" %}

{% block title %}{{ seiten_titel }} - Mercedes-Benz TBA Marienfelde{% endblock %}

{% block head %}
{{ super() }}
<!-- KEIN JavaScript für Steuerung - nur CSS für Styling! -->
<style>
.detail-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid #f1f5f9;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.detail-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: #0073ce;
}
.metric-card {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid #e2e8f0;
}
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
}
.status-online {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}
.status-offline {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}
.steuerung-button {
    transition: all 0.3s ease;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    margin: 0.25rem;
}
.steuerung-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.btn-einschalten {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}
.btn-ausschalten {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}
.btn-toggle {
    background: linear-gradient(135deg, #0073ce 0%, #005ba3 100%);
    color: white;
}
.btn-zurueck {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
    
    <!-- Header mit Breadcrumb -->
    <div class="relative overflow-hidden bg-gradient-to-r from-slate-900 via-blue-900 to-indigo-900 text-white rounded-3xl mx-4 mt-4">
        <div class="absolute inset-0 bg-black/20"></div>
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            
            <!-- Breadcrumb Navigation -->
            <nav class="flex mb-4" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="{{ zurueck_url }}" class="inline-flex items-center text-blue-200 hover:text-white transition-colors">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"/>
                            </svg>
                            Drucker-Übersicht
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-5 h-5 text-blue-300" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                            </svg>
                            <span class="ml-1 md:ml-2 text-white font-medium">{{ drucker.name }}</span>
                        </div>
                    </li>
                </ol>
            </nav>
            
            <!-- Header Content -->
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl md:text-4xl font-bold mb-2">{{ drucker.name }}</h1>
                    <p class="text-lg text-blue-100">{{ drucker.model }} • {{ drucker.location }}</p>
                </div>
                <div class="text-right">
                    <span class="status-badge {% if drucker.status == 'online' %}status-online{% else %}status-offline{% endif %}">
                        {{ drucker.status_icon }} {{ drucker.status_text }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Hauptinhalt -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        
        <!-- Steuerungs-Aktionen -->
        {% if benutzer_kann_steuern and drucker.kann_gesteuert_werden %}
        <div class="detail-card p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">🎮 Drucker-Steuerung</h3>
            <div class="flex flex-wrap gap-4">
                
                <!-- Toggle-Button -->
                <form method="POST" action="{{ toggle_url }}" style="display: inline;">
                    <button type="submit" class="steuerung-button btn-toggle">
                        {{ drucker.toggle_text }}
                    </button>
                </form>
                
                <!-- Separate Ein/Aus-Buttons -->
                <form method="POST" action="{{ einschalten_url }}" style="display: inline;">
                    <button type="submit" class="steuerung-button btn-einschalten"
                            {% if drucker.status == 'online' %}disabled{% endif %}>
                        🟢 Einschalten
                    </button>
                </form>
                
                <form method="POST" action="{{ ausschalten_url }}" style="display: inline;">
                    <button type="submit" class="steuerung-button btn-ausschalten"
                            {% if drucker.status == 'offline' %}disabled{% endif %}>
                        🔴 Ausschalten
                    </button>
                </form>
                
                <!-- Zurück-Button -->
                <a href="{{ zurueck_url }}" class="steuerung-button btn-zurueck">
                    ← Zurück zur Übersicht
                </a>
            </div>
        </div>
        {% endif %}
        
        <!-- Drucker-Informationen -->
        <div class="detail-card p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">📋 Drucker-Informationen</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="space-y-3">
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-600 dark:text-gray-400">Name:</span>
                        <span class="font-semibold">{{ drucker.name }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-600 dark:text-gray-400">Modell:</span>
                        <span class="font-semibold">{{ drucker.model }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-600 dark:text-gray-400">Standort:</span>
                        <span class="font-semibold">{{ drucker.location }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-600 dark:text-gray-400">Status:</span>
                        <span class="font-semibold">{{ drucker.status_text }}</span>
                    </div>
                </div>
                <div class="space-y-3">
                    {% if drucker.plug_ip %}
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-600 dark:text-gray-400">Steckdose:</span>
                        <span class="font-semibold">{{ drucker.plug_ip }}</span>
                    </div>
                    {% endif %}
                    {% if drucker.ip_address %}
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-600 dark:text-gray-400">Drucker-IP:</span>
                        <span class="font-semibold">{{ drucker.ip_address }}</span>
                    </div>
                    {% endif %}
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-600 dark:text-gray-400">Aktiv:</span>
                        <span class="font-semibold">{{ "Ja" if drucker.active else "Nein" }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-600 dark:text-gray-400">Letzte Prüfung:</span>
                        <span class="font-semibold">{{ drucker.last_checked or "Nie" }}</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Energie-Metriken -->
        <div class="detail-card p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">⚡ Energie-Monitoring</h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div class="metric-card">
                    <div class="text-2xl font-bold text-blue-600 mb-2">{{ drucker.current_power or 0 }}W</div>
                    <div class="text-sm text-gray-600">Aktuelle Leistung</div>
                </div>
                <div class="metric-card">
                    <div class="text-2xl font-bold text-green-600 mb-2">{{ drucker.daily_consumption or 0 }}kWh</div>
                    <div class="text-sm text-gray-600">Verbrauch heute</div>
                </div>
                <div class="metric-card">
                    <div class="text-2xl font-bold text-yellow-600 mb-2">{{ laufzeit_heute or "0h 0m" }}</div>
                    <div class="text-sm text-gray-600">Laufzeit heute</div>
                </div>
                <div class="metric-card">
                    <div class="text-2xl font-bold text-purple-600 mb-2">{{ geschätzte_kosten_monat or "0,00 €" }}</div>
                    <div class="text-sm text-gray-600">Kosten (Monat)</div>
                </div>
            </div>
        </div>
        
        <!-- Job-Statistiken -->
        <div class="detail-card p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">📊 Job-Statistiken</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="metric-card">
                    <div class="text-2xl font-bold text-indigo-600 mb-2">{{ jobs_heute or 0 }}</div>
                    <div class="text-sm text-gray-600">Jobs heute</div>
                </div>
                <div class="metric-card">
                    <div class="text-2xl font-bold text-pink-600 mb-2">{{ letzter_job or "Nie" }}</div>
                    <div class="text-sm text-gray-600">Letzter Job</div>
                </div>
                <div class="metric-card">
                    <div class="text-2xl font-bold text-teal-600 mb-2">{{ drucker.monthly_consumption or 0 }}kWh</div>
                    <div class="text-sm text-gray-600">Verbrauch (Monat)</div>
                </div>
            </div>
        </div>
        
        <!-- System-Info -->
        <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-6">
            <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center space-x-4">
                    <span>🔌 Tapo-Integration: {{ "✅ Verfügbar" if drucker.plug_ip else "❌ Nicht konfiguriert" }}</span>
                    <span>📡 Backend-Kontrolle: ✅ Aktiv</span>
                    <span>🚫 JavaScript: ❌ Deaktiviert</span>
                </div>
                <div class="text-right">
                    <span>Drucker-ID: {{ drucker.id }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- KEIN JavaScript - nur reines HTML/CSS/Flask! -->
{% endblock %}