{% set manager = {"name": "System Status"} %}
{% extends 'manager/base.html' %}

{% block title %}System Status{% endblock %}

{% block content %}
<style>
    .setup-container {
        min-height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .status-badge {
        background-color: #fd7e14; /* orange */
        color: white;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 0.5rem 1rem;
    }
    .console-box {
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.85rem;
        background-color: #1a1d20;
        border-left: 4px solid #ffc107;
    }
    .cursor-blink {
        animation: blink 1s infinite;
    }
    @keyframes blink { 50% { opacity: 0; } }
</style>

<div class="container setup-container mt-4">
    <div class="col-md-10 col-lg-7">
        <div class="card border-0 shadow-lg overflow-hidden" style="border-radius: 15px;">
            
            <!-- Header -->
            <div class="text-center p-5 bg-dark text-white">
                <div class="mb-3">
                    <span class="badge rounded-pill status-badge">Configuration Mode</span>
                </div>
                <h1 class="display-6 fw-bold mb-0">System Setup</h1>
                <p class="text-muted small text-uppercase mt-2">Portal Maintenance</p>
            </div>
            <div class="card-body p-4 p-md-5">
                <div class="text-center mb-5">
                    <div class="spinner-grow text-warning mb-3" role="status" style="width: 3rem; height: 3rem;"></div>
                    <h2 class="h4 fw-bold">Connecting Resources</h2>
                </div>

                <!-- Console / System Status Output -->
                <div class="console-box text-light p-4 rounded shadow-sm">
                    <p class="text-secondary small mb-3 border-bottom border-secondary pb-1">REAL-TIME DIAGNOSTIC:</p>
                    <p class="mb-1 text-info">[INFO] Initializing repository: <span class="text-white">{{class_}}</span></p>
                    <p class="mb-1 text-danger">
                        <i class="bi bi-exclamation-triangle-fill"></i> [ERROR]  {{message}} 
                    </p>
                    
                    <p class="mb-0 text-success opacity-75">
                        [ACTION] {{action}}<span class="cursor-blink">_</span>
                    </p>
                </div>
            </div>
            <div class="card-footer border-0 py-4">
                <div class="d-flex flex-column flex-sm-row justify-content-center gap-3">
                    <button onclick="window.location.reload();" class="btn btn-primary px-5 shadow-sm">
                        <i class="bi bi-arrow-clockwise me-2"></i>Retry Connection
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}