{% extends "static/base.html" %}
{% block content %}
<header class="container">
    <hgroup>
        <h1>{{ web_title }}</h1>
        <p>{{ web_jargon }}</p>
        <nav>
            <ul>
                <li><a href="/">🏠 Home</a></li>
                <li><a href="{{ parent_url }}">🔙 Parent</a></li>
                <li><a href="/docs">💻 API Documentation</a></li>
                <li><a href="{{ ui_url }}">🆕 New Session</a></li>
                <li><a href="#" onclick="openPastSessionDialog(event)">📂 Existing Session</a></li>
            </ul>
            <ul>
                <li>{{ auth_link | safe }}</li>
            </ul>
        </nav>
    </hgroup>
</header>

<dialog id="past-session-dialog">
    <article>
        <header>
            <button aria-label="Close" rel="prev" onclick="closePastSessionDialog(event)"></button>
            <p>
                <strong>📂 Existing Session</strong>
            </p>
        </header>
        <main>
            <form>
                <fieldset class="grid">
                    <input type="datetime-local" id="min-start-at-input" placeholder="Minimum Start Time" aria-label="Minimum Start Time" />
                    <input type="datetime-local" id="max-start-at-input" placeholder="Maximum Start Time" aria-label="Maximum Start Time" />
                </fieldset>
            </form>
            <ul id="past-session-ul" style="font-family:monospace;"></ul>
        </main>
        <footer>
            <nav>
                <ul id="past-session-pagination-ul"></ul>
            </nav>
        </footer>
    </article>
</dialog>

<main class="container">
    <article>
        <h2>{{ name }}</h2>
        <p>{{ description }}</p>
        <div id="history-gantt" style="width: 100%; overflow-x: auto; min-height: 2rem;"></div>
    </article>
    <article>
        <form id="submit-task-form" onsubmit="submitNewSessionForm(event)">
            {% for task_input in task_inputs %}
            {% include "node_page/task/partial/input.html" %}
            {% endfor %}
            <button>🚀 Run New Session</button>
        </form>
    </article>
    <article>
        <label>
            Result
            <textarea id="result-textarea" rows="1" readonly style="font-family:monospace;">
            </textarea>
        </label>
        <label>
            Log
            <textarea id="log-textarea" rows="5" readonly style="font-family:monospace;">
            </textarea>
        </label>
    </article>
</main>
{% endblock %}
{% block extra_scripts %}
<script>const cfg = {{ json_cfg | safe }};</script>
<script src="/static/session/common-util.js"></script>
<script src="/static/session/past-session.js"></script>
<script src="/static/session/current-session.js"></script>
<script src="/static/session/event.js"></script>
<script src="/static/mermaid.min.js" async onload="mermaid.initialize({ startOnLoad: false, theme: 'neutral' })"></script>
{% endblock %}