{% extends 'common/base_v2.html' %}

{% block summary %}
<!-- Validation Summary Dashboard -->
<section class="report-section">
    <h2 class="section-title">Validation Summary</h2>

    <div class="metric-grid">
        <div class="metric-card">
            <div class="metric-label">Total Tests</div>
            <div class="metric-value">{{ summary.total_tests }}</div>
        </div>

        <div class="metric-card">
            <div class="metric-label">Tests Passed</div>
            <div class="metric-value text-success">{{ summary.total_passed }}</div>
        </div>

        <div class="metric-card">
            <div class="metric-label">Tests Failed</div>
            <div class="metric-value text-danger">{{ summary.total_failed }}</div>
        </div>

        <div class="metric-card">
            <div class="metric-label">Pass Rate</div>
            <div class="metric-value">{{ summary.pass_rate_formatted }}</div>
            <div class="metric-progress">
                <div class="metric-progress-bar"
                     style="width: {{ summary.pass_rate }}%;
                            background-color: {% if summary.pass_rate >= 80 %}var(--success){% elif summary.pass_rate >= 60 %}var(--warning){% else %}var(--danger){% endif %};">
                </div>
            </div>
        </div>
    </div>

    <!-- Overall Status Alert -->
    {% if summary.has_issues %}
    <div class="alert alert-{{ summary.overall_status }} mt-4">
        <strong>{{ summary.status_message }}</strong>
        <p class="mt-2">Review the test results and recommendations below to address detected issues.</p>
    </div>
    {% else %}
    <div class="alert alert-success mt-4">
        <strong>{{ summary.status_message }}</strong>
        <p class="mt-2">Your panel data model has passed all validation tests.</p>
    </div>
    {% endif %}
</section>
{% endblock %}

{% block content %}
<!-- Tab Navigation -->
<div class="tab-container" id="validation-tabs">
    <div class="tab-buttons">
        <button class="tab-button active" data-tab="overview-tab">
            Overview
        </button>
        <button class="tab-button" data-tab="results-tab">
            Test Results
        </button>
        <button class="tab-button" data-tab="charts-tab">
            Visualizations
        </button>
        {% if recommendations %}
        <button class="tab-button" data-tab="recommendations-tab">
            Recommendations
            <span class="badge badge-warning">{{ recommendations|length }}</span>
        </button>
        {% endif %}
        <button class="tab-button" data-tab="methodology-tab">
            Methodology
        </button>
    </div>

    <!-- Tab Contents -->
    <div class="tab-contents">

        <!-- Overview Tab -->
        <div id="overview-tab" class="tab-content active">
            {% include 'validation/interactive/partials/overview.html' %}
        </div>

        <!-- Test Results Tab -->
        <div id="results-tab" class="tab-content">
            {% include 'validation/interactive/partials/test_results.html' %}
        </div>

        <!-- Charts Tab -->
        <div id="charts-tab" class="tab-content">
            {% include 'validation/interactive/partials/charts.html' %}
        </div>

        <!-- Recommendations Tab -->
        {% if recommendations %}
        <div id="recommendations-tab" class="tab-content">
            {% include 'validation/interactive/partials/recommendations.html' %}
        </div>
        {% endif %}

        <!-- Methodology Tab -->
        <div id="methodology-tab" class="tab-content">
            {% include 'validation/interactive/partials/methodology.html' %}
        </div>

    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        PanelBoxTabs.init('validation-tabs');
    });
</script>
{% endblock %}