{% extends "base.html" %}

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

{% block content %}
<div class="max-w-4xl mx-auto">
    <!-- Header -->
    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-6 mb-6">
        <div class="flex items-center space-x-4">
            <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center">
                <i class="fas fa-info-circle text-white text-xl"></i>
            </div>
            <div>
                <h1 class="text-2xl font-bold text-slate-900 dark:text-white">System-Information</h1>
                <p class="text-slate-600 dark:text-slate-400">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="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-tag mr-2 text-blue-500"></i>
                Version & Umgebung
            </h2>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-slate-600 dark:text-slate-400">Version:</span>
                    <span class="font-medium text-slate-900 dark:text-white">{{ system.version }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-600 dark:text-slate-400">Umgebung:</span>
                    <span class="px-2 py-1 rounded text-xs font-medium {{ 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300' if system.environment == 'production' else 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300' }}">
                        {{ system.environment.title() }}
                    </span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-600 dark:text-slate-400">Status:</span>
                    <span class="flex items-center text-green-600 dark:text-green-400">
                        <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></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 %}