<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Databrowse · {{ room_name }}</title>
        <style>
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }

            body {
                font-family:
                    system-ui,
                    -apple-system,
                    sans-serif;
                background: #111827;
                color: #f3f4f6;
                min-height: 100vh;
                padding: 1.5rem;
            }

            header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 0 1.5rem;
                border-bottom: 1px solid #374151;
                margin-bottom: 2rem;
            }

            h1 {
                font-size: 1.75rem;
                font-weight: 600;
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }

            .room-badge {
                font-size: 0.75rem;
                background: #374151;
                padding: 0.25rem 0.6rem;
                border-radius: 4px;
                color: #9ca3af;
            }

            .subtitle {
                font-size: 0.9rem;
                color: #9ca3af;
                margin-top: 0.5rem;
            }

            main {
                max-width: 1400px;
                margin: 0 auto;
            }

            .section {
                margin-bottom: 2.5rem;
            }

            .section-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 1rem;
            }

            h2 {
                font-size: 1.25rem;
                font-weight: 600;
                color: #60a5fa;
            }

            .count {
                font-size: 0.85rem;
                color: #6b7280;
            }

            /* Card Grid */
            .card-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                gap: 1rem;
            }

            .card {
                background: #1f2937;
                border-radius: 8px;
                padding: 1.25rem;
                border: 1px solid #374151;
                transition: all 0.2s;
                cursor: pointer;
            }

            .card:hover {
                background: #252f3f;
                border-color: #60a5fa;
                transform: translateY(-2px);
            }

            .card-title {
                font-size: 1.1rem;
                font-weight: 600;
                color: #f3f4f6;
                margin-bottom: 0.5rem;
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            .card-mode {
                font-size: 0.65rem;
                background: #374151;
                padding: 0.15rem 0.4rem;
                border-radius: 3px;
                color: #9ca3af;
                text-transform: uppercase;
            }

            .card-mode.sql {
                background: #065f46;
                color: #10b981;
            }

            .card-mode.api {
                background: #1e3a8a;
                color: #60a5fa;
            }

            .card-mode.graph {
                background: #581c87;
                color: #c084fc;
            }

            .card-description {
                font-size: 0.85rem;
                color: #d1d5db;
                margin-bottom: 1rem;
                line-height: 1.5;
            }

            .card-meta {
                display: flex;
                gap: 1rem;
                font-size: 0.75rem;
                color: #6b7280;
            }

            .card-meta-item {
                display: flex;
                align-items: center;
                gap: 0.3rem;
            }

            .card-meta-label {
                color: #9ca3af;
            }

            /* Empty State */
            .empty {
                text-align: center;
                color: #6b7280;
                padding: 3rem;
                font-size: 0.9rem;
                background: #1f2937;
                border-radius: 8px;
                border: 1px dashed #374151;
            }

            /* Footer */
            footer {
                margin-top: 3rem;
                padding-top: 1.5rem;
                border-top: 1px solid #374151;
                font-size: 0.75rem;
                color: #6b7280;
                display: flex;
                justify-content: space-between;
            }

            footer a {
                color: #60a5fa;
                text-decoration: none;
            }

            footer a:hover {
                text-decoration: underline;
            }

            /* Links */
            a {
                color: inherit;
                text-decoration: none;
            }

            /* Scenario specific styles */
            .scenario-card {
                border-left: 3px solid #60a5fa;
            }

            .scenario-card .card-title {
                color: #60a5fa;
            }

            .card-filters {
                margin-top: 0.75rem;
                font-size: 0.75rem;
                color: #9ca3af;
                background: #111827;
                padding: 0.5rem;
                border-radius: 4px;
            }

            .filter-item {
                display: inline-block;
                margin-right: 0.75rem;
            }
        </style>
    </head>
    <body>
        <header>
            <div>
                <h1>
                    Databrowse
                    <span class="room-badge">{{ room_name }}</span>
                </h1>
                <p class="subtitle">
                    Test-oriented data navigation for AMAR - find the right
                    user/scenario
                </p>
            </div>
        </header>

        <main>
            <!-- Views Section -->
            <section class="section">
                <div class="section-header">
                    <h2>Views</h2>
                    <span class="count">{{ views|length }} available</span>
                </div>

                {% if views|length == 0 %}
                <div class="empty">
                    No views configured. Add views to larder/views.json
                </div>
                {% else %}
                <div class="card-grid">
                    {% for view in views %}
                    <a href="/view/{{ view.slug }}" class="card">
                        <div class="card-title">
                            {{ view.title }}
                            <span class="card-mode {{ view.mode }}"
                                >{{ view.mode }}</span
                            >
                        </div>
                        <div class="card-description">
                            {{ view.description }}
                        </div>
                        <div class="card-meta">
                            <span class="card-meta-item">
                                <span class="card-meta-label">Entity:</span>
                                {{ view.entity }}
                            </span>
                            {% if view.group_by %}
                            <span class="card-meta-item">
                                <span class="card-meta-label">Group:</span>
                                {{ view.group_by }}
                            </span>
                            {% endif %}
                        </div>
                    </a>
                    {% endfor %}
                </div>
                {% endif %}
            </section>

            <!-- Scenarios Section -->
            <section class="section">
                <div class="section-header">
                    <h2>Test Scenarios</h2>
                    <span class="count">{{ scenarios|length }} defined</span>
                </div>

                {% if scenarios|length == 0 %}
                <div class="empty">
                    No scenarios defined yet. Scenarios emerge from usage and
                    conversations.
                    <br />Add them to larder/scenarios.json as you identify test
                    patterns.
                </div>
                {% else %}
                <div class="card-grid">
                    {% for scenario in scenarios %} {% if not scenario._example
                    %}
                    <a
                        href="/view/{{ scenario.view }}?scenario={{ scenario.slug }}"
                        class="card scenario-card"
                    >
                        <div class="card-title">{{ scenario.name }}</div>
                        <div class="card-description">
                            {{ scenario.description }}
                        </div>
                        <div class="card-meta">
                            <span class="card-meta-item">
                                <span class="card-meta-label">Role:</span>
                                {{ scenario.role }}
                            </span>
                            {% if scenario.priority %}
                            <span class="card-meta-item">
                                <span class="card-meta-label">Priority:</span>
                                {{ scenario.priority }}
                            </span>
                            {% endif %}
                        </div>
                        {% if scenario.filters %}
                        <div class="card-filters">
                            {% for key, value in scenario.filters.items() %}
                            <span class="filter-item"
                                >{{ key }}: {{ value }}</span
                            >
                            {% endfor %}
                        </div>
                        {% endif %}
                    </a>
                    {% endif %} {% endfor %}
                </div>
                {% endif %}
            </section>
        </main>

        <footer>
            <span>Data Browse Monitor v0.1.0</span>
            <div>
                <a href="/health">/health</a> ·
                <a href="/api/schema">/api/schema</a> ·
                <a href="/api/views">/api/views</a> ·
                <a href="/api/scenarios">/api/scenarios</a>
            </div>
        </footer>
    </body>
</html>
