<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>VCF Dashboard - Variant Analysis</title>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
        <style>
            .dashboard-header {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                padding: 2rem 0;
                margin-bottom: 2rem;
            }
            .stat-card {
                border: none;
                border-radius: 15px;
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                transition: transform 0.2s;
            }
            .stat-card:hover {
                transform: translateY(-5px);
            }
            .chart-container {
                background: white;
                border-radius: 15px;
                padding: 20px;
                margin-bottom: 20px;
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            }
            .variant-table {
                font-size: 0.9em;
            }
            .search-box {
                max-width: 400px;
            }
            .loading {
                display: none;
                text-align: center;
                padding: 2rem;
            }
            .analysis-selector {
                max-width: 300px;
            }
        </style>
    </head>
    <body>
        <div class="dashboard-header">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h1><i class="fas fa-dna me-2"></i>VCF Dashboard</h1>
                        <p class="lead mb-0">Interactive genetic variant visualization</p>
                    </div>
                    <div class="col-md-4">
                        <select id="analysisSelector" class="form-select analysis-selector">
                            <option value="">Loading analyses...</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div id="loading" class="loading">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Loading data...</p>
            </div>

            <div id="mainStats" class="row mb-4" style="display: none;">
                <div class="col-md-3">
                    <div class="card stat-card bg-primary text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 id="totalVariants" class="card-title">0</h4>
                                    <p class="card-text">Total Variants</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-barcode fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stat-card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 id="chromosomesCount" class="card-title">0</h4>
                                    <p class="card-text">Chromosomes</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-chromosome fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stat-card bg-warning text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 id="variantTypesCount" class="card-title">0</h4>
                                    <p class="card-text">Variant Types</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-code-branch fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stat-card bg-info text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 id="memoryUsage" class="card-title">0 MB</h4>
                                    <p class="card-text">Memory Usage</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-memory fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title"><i class="fas fa-search me-2"></i>Variant Search</h5>
                            <div class="input-group search-box">
                                <input type="text" id="searchInput" class="form-control" placeholder="Search by chromosome, ID, reference...">
                                <button class="btn btn-primary" onclick="searchVariants()">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="chart-container">
                        <h5>Chromosome Distribution</h5>
                        <canvas id="chromosomeChart" width="400" height="300"></canvas>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="chart-container">
                        <h5>Variant Types</h5>
                        <canvas id="variantTypeChart" width="400" height="300"></canvas>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title"><i class="fas fa-table me-2"></i>Variants</h5>
                            <div class="table-responsive">
                                <table class="table table-striped table-hover variant-table">
                                    <thead>
                                        <tr>
                                            <th>Chromosome</th>
                                            <th>Position</th>
                                            <th>ID</th>
                                            <th>Reference</th>
                                            <th>Alternative</th>
                                            <th>Gene</th>
                                            <th>Type</th>
                                        </tr>
                                    </thead>
                                    <tbody id="variantsTable">
                                    </tbody>
                                </table>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <span id="paginationInfo">Page 1 of 1</span>
                                </div>
                                <div>
                                    <button id="prevPage" class="btn btn-sm btn-outline-primary" onclick="changePage(-1)">Previous</button>
                                    <button id="nextPage" class="btn btn-sm btn-outline-primary ms-2" onclick="changePage(1)">Next</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
        <script src="{{ url_for('static', filename='dashboard.js') }}"></script>
    </body>
    </html>