{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block extra_css %}
<style>
    /* System Info mit Unified CSS Variables */
    .system-card {
        background: var(--bg-card);
        border: 1px solid var(--border-primary);
        border-radius: 16px;
        box-shadow: var(--shadow-card);
        transition: all 0.3s ease;
    }
    
    .system-card:hover {
        box-shadow: var(--shadow-card-hover);
        border-color: var(--border-hover);
    }
    
    .status-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .status-online {
        background: rgba(16, 185, 129, 0.1);
        color: var(--text-success);
        border: 1px solid rgba(16, 185, 129, 0.2);
    }
    
    .status-production {
        background: rgba(16, 185, 129, 0.1);
        color: var(--text-success);
        border: 1px solid rgba(16, 185, 129, 0.2);
    }
    
    .status-development {
        background: rgba(245, 158, 11, 0.1);
        color: var(--text-warning);
        border: 1px solid rgba(245, 158, 11, 0.2);
    }
    
    .dark .status-online {
        background: rgba(16, 185, 129, 0.2);
        border-color: rgba(16, 185, 129, 0.3);
    }
    
    .dark .status-production {
        background: rgba(16, 185, 129, 0.2);
        border-color: rgba(16, 185, 129, 0.3);
    }
    
    .dark .status-development {
        background: rgba(245, 158, 11, 0.2);
        border-color: rgba(245, 158, 11, 0.3);
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <!-- Header -->
    <div class="system-card p-6 mb-6">
        <div class="flex items-center space-x-4">
            <div class="w-12 h-12 rounded-lg flex items-center justify-center" style="background: linear-gradient(135deg, var(--mb-primary) 0%, var(--mb-primary-dark) 100%);">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <div>
                <h1 class="text-2xl font-bold" style="color: var(--text-primary);">System-Information</h1>
                <p style="color: var(--text-secondary);">MYP Platform - Mercedes-Benz 3D-Druck Management</p>
            </div>
        </div>
    </div>

    <!-- System-Status -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <!-- Version Info -->
        <div class="system-card p-6">
            <h2 class="text-lg font-semibold mb-4 flex items-center" style="color: var(--text-primary);">
                <svg class="w-5 h-5 mr-2" style="color: var(--mb-primary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                </svg>
                Version & Umgebung
            </h2>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span style="color: var(--text-secondary);">Version:</span>
                    <span class="font-medium" style="color: var(--text-primary);">{{ system.version }}</span>
                </div>
                <div class="flex justify-between">
                    <span style="color: var(--text-secondary);">Umgebung:</span>
                    <span class="status-badge {{ 'status-production' if system.environment == 'production' else 'status-development' }}">
                        <div class="w-2 h-2 rounded-full" style="background: {{ 'var(--text-success)' if system.environment == 'production' else 'var(--text-warning)' }};"></div>
                        {{ system.environment.title() }}
                    </span>
                </div>
                <div class="flex justify-between">
                    <span style="color: var(--text-secondary);">Status:</span>
                    <span class="status-badge status-online">
                        <div class="w-2 h-2 rounded-full" style="background: var(--text-success);"></div>
                        Online
                    </span>
                </div>
            </div>
        </div>

        <!-- System Health -->
        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-6">
            <h2 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">
                <i class="fas fa-heartbeat mr-2 text-red-500"></i>
                System-Gesundheit
            </h2>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-slate-600 dark:text-slate-400">Datenbank:</span>
                    <span class="flex items-center text-green-600 dark:text-green-400">
                        <i class="fas fa-check-circle mr-1"></i>
                        Verbunden
                    </span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-600 dark:text-slate-400">Session Store:</span>
                    <span class="flex items-center text-green-600 dark:text-green-400">
                        <i class="fas fa-check-circle mr-1"></i>
                        Aktiv
                    </span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-600 dark:text-slate-400">Cache:</span>
                    <span class="flex items-center text-green-600 dark:text-green-400">
                        <i class="fas fa-check-circle mr-1"></i>
                        Funktional
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Funktionen -->
    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-6">
        <h2 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">
            <i class="fas fa-cogs mr-2 text-blue-500"></i>
            Verfügbare Funktionen
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for feature in system.features %}
            <div class="flex items-center space-x-3 p-3 rounded-lg border border-slate-200 dark:border-slate-600">
                <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                <span class="text-sm text-slate-700 dark:text-slate-300">{{ feature }}</span>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-6 mt-6">
        <h2 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">
            <i class="fas fa-bolt mr-2 text-yellow-500"></i>
            Quick Actions
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <a href="{{ url_for('dashboard') }}" 
               class="flex items-center justify-center space-x-2 p-3 rounded-lg border border-slate-200 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                <i class="fas fa-tachometer-alt text-blue-500"></i>
                <span class="text-sm font-medium text-slate-700 dark:text-slate-300">Dashboard</span>
            </a>
            
            <a href="{{ url_for('printers_page') }}" 
               class="flex items-center justify-center space-x-2 p-3 rounded-lg border border-slate-200 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                <i class="fas fa-print text-green-500"></i>
                <span class="text-sm font-medium text-slate-700 dark:text-slate-300">Drucker</span>
            </a>
            
            {% if current_user.is_admin %}
            <a href="{{ url_for('admin.admin_dashboard') }}" 
               class="flex items-center justify-center space-x-2 p-3 rounded-lg border border-slate-200 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                <i class="fas fa-cog text-purple-500"></i>
                <span class="text-sm font-medium text-slate-700 dark:text-slate-300">Admin</span>
            </a>
            {% endif %}
            
            <a href="{{ url_for('calendar.calendar_view') }}" 
               class="flex items-center justify-center space-x-2 p-3 rounded-lg border border-slate-200 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                <i class="fas fa-calendar text-orange-500"></i>
                <span class="text-sm font-medium text-slate-700 dark:text-slate-300">Kalender</span>
            </a>
        </div>
    </div>
</div>
{% endblock %}