<layout name="admin" />

<div class="section">
    <h2>{{ title }}</h2>

    <!-- Connection Status -->
    <div class="stats-grid">
        <div class="stat-card">
            <h3>Connection Status</h3>
            <p><strong>Status:</strong> {{ redis.status }}</p>
            <p><strong>Connected:</strong> {{ redis.is_connected }}</p>
        </div>
    </div>

    <!-- TODO: Conditional sections will work once ForProcessor/IfProcessor are fixed -->
    <div class="stat-card">
        <h3>Debug Information</h3>
        <p><strong>Has Basic Info:</strong> {{ redis.has_basic_info }}</p>
        <p><strong>Has Error:</strong> {{ redis.has_error }}</p>
        <p><strong>Has Databases:</strong> {{ redis.has_databases }}</p>
        <p><strong>Has Cache Patterns:</strong> {{ redis.has_cache_patterns }}</p>
    </div>
</div>

<style>
.redis-section {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.redis-section h3 {
    margin: 0 0 16px 0;
    color: var(--gray-900);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 8px;
}

.key-detail, .slow-log-entry, .cache-pattern, .database-item {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
}

.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-connected { background-color: var(--success); }
.status-error { background-color: var(--danger); }
</style>

<script>
// Auto-refresh der Seite alle 30 Sekunden
setTimeout(() => {
    window.location.reload();
}, 30000);
</script>