{% extends "layout.html" %}

{% set active_nav = 'dashboard' %}

{% block extra_css %}
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 24px;
        margin-bottom: 32px;
    }

    .stat-card {
        padding: 24px;
        position: relative;
    }

    .stat-card .icon {
        position: absolute;
        right: 24px;
        top: 24px;
        font-size: 1.5rem;
        color: var(--primary);
        opacity: 0.8;
    }

    .stat-card .label {
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-muted);
        letter-spacing: 0.05em;
        margin-bottom: 8px;
    }

    .stat-card .value {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .stat-card .trend {
        font-size: 0.85rem;
        font-weight: 500;
    }

    .trend.up { color: var(--success); }
    .trend.down { color: var(--error); }
    .trend.neutral { color: var(--text-muted); }

    /* Recent Logs Table */
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .section-title {
        font-size: 1.25rem;
        font-weight: 700;
    }

    .view-all {
        font-size: 0.85rem;
        color: var(--primary);
        text-decoration: none;
        font-weight: 600;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
    }

    .data-table th {
        text-align: left;
        padding: 12px 16px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border);
    }

    .data-table td {
        padding: 16px;
        font-size: 0.9rem;
        border-bottom: 1px solid var(--border);
    }

    .badge {
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .badge-info { background-color: #e0f2fe; color: #0369a1; }
    .badge-warn { background-color: #fef3c7; color: #b45309; }
    .badge-error { background-color: #fee2e2; color: #b91c1c; }
    .badge-success { background-color: #dcfce7; color: #15803d; }

    .status-text {
        font-weight: 600;
        font-family: monospace;
    }

    .status-200 { color: var(--success); }
    .status-422 { color: var(--error); }
    .status-latency { color: var(--warning); }

    /* Quick Actions */
    .quick-actions {
        margin-top: 32px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
    }

    .action-card {
        display: flex;
        gap: 20px;
        padding: 24px;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .action-card:hover {
        transform: translateY(-2px);
    }

    .action-icon {
        width: 48px;
        height: 48px;
        background-color: #f1f5f9;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        font-size: 1.25rem;
    }

    .action-title {
        font-weight: 700;
        margin-bottom: 4px;
    }

    .action-desc {
        font-size: 0.85rem;
        color: var(--text-muted);
    }
{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">System Overview</h1>
    <p class="page-subtitle">Real-time status of your FastAPI environment</p>
</div>

<div class="stats-grid">
    {% for stat in stats %}
    <div class="card stat-card" onclick="location.href='/admin/{{ stat.model_name }}'" style="cursor: pointer;">
        <div class="label">{{ stat.name }}</div>
        <div class="value">{{ stat.count }}</div>
        <div class="trend {% if stat.has_date_field %}up{% else %}neutral{% endif %}">
            <i class="fas {% if stat.has_date_field %}fa-clock{% else %}fa-exclamation-triangle{% endif %}"></i> 
            {% if stat.has_date_field %}
                {{ stat.recent_count }} new in last 24h
            {% else %}
                Set date_field for 24h stats
            {% endif %}
        </div>
        <div class="icon"><i class="fas fa-layer-group"></i></div>
    </div>
    {% endfor %}
    
    {% if not stats %}
    <div class="card stat-card">
        <div class="label">System</div>
        <div class="value">0</div>
        <div class="trend">No models registered</div>
        <div class="icon"><i class="fas fa-info-circle"></i></div>
    </div>
    {% endif %}
</div>

<div class="section-header">
    <h2 class="section-title">{{ logs_config.title }}</h2>
    {% if logs %}
    <a href="#" class="view-all">View All Logs</a>
    {% endif %}
</div>

<div class="card" style="padding: 0; overflow: hidden;">
    <table class="data-table">
        <thead>
            <tr>
                {% for col in logs_config.columns %}
                <th>{{ col|capitalize }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for log in logs %}
            <tr>
                {% for col in logs_config.columns %}
                <td>
                    {% if col == 'level' %}
                        {% set level = log[col]|upper %}
                        <span class="badge {% if level == 'INFO' %}badge-info{% elif level == 'ERROR' %}badge-error{% elif level == 'WARN' %}badge-warn{% else %}badge-success{% endif %}">
                            {{ level }}
                        </span>
                    {% else %}
                        {{ log[col] }}
                    {% endif %}
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
            
            {% if not logs %}
            <tr>
                <td colspan="100%" style="text-align: center; padding: 48px; color: var(--text-muted);">
                    <i class="fas fa-clipboard-list" style="font-size: 2rem; margin-bottom: 12px; display: block; opacity: 0.5;"></i>
                    No recent logs to display
                </td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

{% endblock %}