{% extends "static/base.html" %}
{% block extra_head %}
<style>
{% include "chat_page/chat.css" %}
</style>
{% endblock %}
{% block content %}
<header class="container">
    <hgroup>
        <h1>{{ web_title }}</h1>
        <p>{{ web_jargon }}</p>
        <nav>
            <ul>
                <li><a href="/docs">📚 Docs</a></li>
                <li><a href="/ui">🏠 Home</a></li>
            </ul>
            <ul>
                <li>{{ auth_link | safe }}</li>
            </ul>
        </nav>
    </hgroup>
</header>
<main class="container">

    <div id="session-selector">
        <h2>💬 Chat Sessions</h2>
        <div class="new-session">
            <input type="text" id="new-session-name" placeholder="Session name (optional)" autocomplete="off" />
            <button id="new-session-btn" class="secondary outline">➕ New Chat</button>
        </div>
        <div class="session-list" id="session-list">
            <p aria-busy="true">Loading sessions…</p>
        </div>
        <div id="pagination" class="pagination"></div>
    </div>

    <div id="chat-container" class="chat-container hidden">
        <div class="chat-header">
            <button id="back-to-sessions" class="secondary outline">← Back</button>
            <h3 id="current-session-name">Chat</h3>
            <button id="delete-session-btn" class="contrast outline">🗑 Delete</button>
        </div>

        <div id="messages" class="messages" role="log" aria-live="polite" aria-label="Chat messages"></div>

        <div id="approval-panel" class="approval-panel hidden" role="alertdialog" aria-label="Tool approval required">
            <div id="approval-content"></div>
            <div class="approval-buttons">
                <button id="approve-btn" class="secondary">✅ Approve <kbd>y</kbd></button>
                <button id="deny-btn" class="contrast outline">❌ Deny <kbd>n</kbd></button>
                <button id="edit-btn" class="secondary outline">✏️ Edit <kbd>e</kbd></button>
            </div>
            <div id="edit-panel" class="edit-panel hidden">
                <textarea id="edit-args" placeholder="Edit JSON arguments…" spellcheck="false"></textarea>
                <button id="submit-edit-btn">📤 Submit edit</button>
            </div>
        </div>

        <div class="input-area">
            <textarea id="message-input" placeholder="Type a message… (Enter to send, Shift+Enter for newline)" rows="1" autocomplete="off" spellcheck="true"></textarea>
            <button id="send-btn">Send ↵</button>
        </div>
    </div>

</main>
{% endblock %}
{% block extra_scripts %}
<script>
{% include "chat_page/chat.js" %}
</script>
{% endblock %}