{% extends 'admins/adminbase.html' %}
{% load static %}
{% block contents %}

<div class="container-fluid fade-in">
    <div class="row g-4">

        <!-- Metrics Table -->
        <div class="col-lg-12">
            <div class="glass-panel p-4 h-100">
                <div
                    class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom border-secondary border-opacity-25">
                    <h4 class="text-white fw-bold m-0"><i class="fas fa-flask text-primary me-2"></i> Model Performance
                    </h4>
                    <span class="text-muted small">Comparative Analysis</span>
                </div>

                {% if error %}
                <div class="alert alert-danger bg-transparent border-danger text-danger">
                    <i class="fas fa-exclamation-circle me-2"></i> {{ error }}
                </div>
                {% endif %}

                <div class="table-responsive">
                    <table class="table text-white align-middle" style="border-color: rgba(255,255,255,0.05);">
                        <!-- The 'results' context variable typically renders raw HTML table rows/headers,
                             so we wrap it in a cleaner container style. If 'results' contains <table> tags,
                             this wrapper might need adjustment in the backend, but assuming it renders content: -->
                        {{ results|safe }}
                    </table>
                </div>

                <style>
                    /* Result Table Overrides for dark theme compatibility */
                    .dataframe {
                        width: 100%;
                        border: none;
                    }

                    .dataframe thead th {
                        background: rgba(59, 130, 246, 0.2);
                        color: white;
                        border: none;
                        padding: 12px;
                    }

                    .dataframe tbody td {
                        padding: 12px;
                        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                        color: #cbd5e1;
                    }

                    .dataframe tbody tr:hover {
                        background: rgba(255, 255, 255, 0.02);
                    }
                </style>
            </div>
        </div>

        <!-- Metric Visualization -->
        <div class="col-lg-12">
            <div class="glass-panel p-4 h-100">
                <div
                    class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom border-secondary border-opacity-25">
                    <h4 class="text-white fw-bold m-0"><i class="fas fa-chart-bar text-secondary me-2"></i>
                        Visualization</h4>
                    <span class="text-muted small">Accuracy Comparison Graph</span>
                </div>

                {% if graph_url %}
                <div class="text-center p-3" style="background: rgba(0,0,0,0.2); border-radius: 12px;">
                    <img src="{{ graph_url }}" alt="Metrics Graph"
                        class="img-fluid rounded border border-secondary border-opacity-25 shadow-lg">
                </div>
                {% else %}
                <div class="text-center py-5 text-muted opacity-50">
                    <i class="fas fa-chart-area fs-1 mb-3"></i>
                    <p>No visualization generated. Please initiate model training.</p>
                </div>
                {% endif %}
            </div>
        </div>

    </div>
</div>

{% endblock %}