{% extends "base.html" %}

{% block title %}Run explorer{% endblock %}

{% block description %}Positronic Dataset Viewer.{% endblock %}

{% block scripts %}
<script>
    window.API_ENDPOINT = {{ api_endpoint | tojson }};
    window.IS_GROUPED_TABLE = true;
    window.EPISODES_URL = {{ episodes_url | default('.') | tojson }};
</script>
{% endblock %}

{% block content %}
{% from "_attribution.html" import attribution_line %}
<main class="main">
    <header class="page-header">
        <div class="page-kicker">Group Explorer {{ attribution_line(attribution) }}</div>
        <h1>{{ title }}</h1>
        <p id="dataset-stats">Loading dataset information...</p>
        <div class="dataset-info">
            <div id="loading-status" class="loading-status">
                <strong>⏳ Dataset is loading...</strong>
                <br />This may take a few minutes depending on the dataset size.
            </div>
        </div>
    </header>
    <section class="controls-bar"></section>
    <section class="card card--table">
        <div id="episodes-container" class="table-wrapper table-wrapper--dense">
            <div class="overflow-wrapper">
                <div class="loading">Loading episodes...</div>
                <table class="episodes-table hidden">
                    <thead>
                        <tr>
                            <th scope="col" class="col-actions"></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </section>
</main>
{% endblock %}