{% extends "base.html" %}

{% block title %}XAURA — Experiments{% endblock %}
{% block nav_experiments %}active{% endblock %}

{% block content %}
<!-- ── Page Header ─────────────────────────────────────────── -->
<section class="page-header">
    <h1 class="page-title">Experiment Log</h1>
    <p class="page-subtitle">
        Browse, compare, and export all your model runs.
    </p>
</section>

<!-- ── Toolbar ─────────────────────────────────────────────── -->
<section class="experiments-toolbar">
    <div class="toolbar-left">
        <!-- Search -->
        <div class="search-box">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2" class="search-icon">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
            <input type="text" id="search-input" class="search-input"
                   placeholder="Search by model name…">
        </div>

        <!-- Task Type Filter -->
        <select id="filter-task" class="config-select toolbar-select">
            <option value="">All Tasks</option>
            <option value="classification">Classification</option>
            <option value="regression">Regression</option>
            <option value="clustering">Clustering</option>
        </select>
    </div>

    <div class="toolbar-right">
        <button class="btn btn-secondary" id="compare-btn" disabled>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2">
                <line x1="18" y1="20" x2="18" y2="10"></line>
                <line x1="12" y1="20" x2="12" y2="4"></line>
                <line x1="6" y1="20" x2="6" y2="14"></line>
            </svg>
            Compare Selected
        </button>
        <button class="btn btn-secondary" id="export-csv-btn">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="7 10 12 15 17 10"></polyline>
                <line x1="12" y1="15" x2="12" y2="3"></line>
            </svg>
            Export CSV
        </button>
    </div>
</section>

<!-- ── Experiments Table ───────────────────────────────────── -->
<section class="experiments-table-section">
    <div class="card">
        <table class="data-table" id="experiments-table">
            <thead>
                <tr>
                    <th class="col-check"><input type="checkbox" id="select-all"></th>
                    <th class="col-sortable" data-sort="model_name">Model</th>
                    <th class="col-sortable" data-sort="task_type">Task</th>
                    <th class="col-sortable" data-sort="created_at">Date</th>
                    <th>Key Metrics</th>
                    <th class="col-sortable" data-sort="duration_seconds">Duration</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="experiments-tbody">
                <!-- Populated by JS -->
            </tbody>
        </table>

        <!-- Empty state -->
        <div class="table-empty" id="table-empty" style="display: none;">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="1.5" opacity="0.3">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
            </svg>
            <p>No experiments yet. Run a model to get started.</p>
        </div>

        <!-- Loading state -->
        <div class="loading-overlay" id="table-loading">
            <div class="spinner"></div>
            <p>Loading experiments…</p>
        </div>
    </div>
</section>

<!-- ── Comparison Modal ───────────────────────────────────── -->
<div class="modal-overlay" id="compare-modal" style="display: none;">
    <div class="modal-card">
        <div class="modal-header">
            <h3>Run Comparison</h3>
            <button class="modal-close" id="modal-close">&times;</button>
        </div>
        <div class="modal-body" id="compare-body">
            <!-- Populated by JS -->
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/experiments.js"></script>
{% endblock %}