<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>

<body>
    <div class="layout">

        <!-- LEFT: conversations -->
        <aside class="sidebar">

            <!-- TITLE -->
            <div class="sidebar-title">
                <h2>{{ title }}</h2>
            </div>

            <div class="sidebar-header">
                <div class="muted">{{ conversation_count }} Conversation(s)</div>

                <div class="sidebar-actions">
                    <form method="post" action="{{ url_for('new', object_name=object_name) }}">
                        <button type="submit" class="sidebar-new" title="New conversation">📜</button>
                    </form>

                    <button type="button" id="theme-toggle" class="sidebar-toggle"
                        title="Toggle day / night">🌙</button>
                </div>
            </div>

            <div class="conversation-list">
                {% if conversations %}
                {% for pair in conversations %}
                <a class="conversation-item {% if pair[0] == active_object_name %}active{% endif %}"
                    href="{{ url_for('open_conversation', object_name=pair[0]) }}" title="{{ pair[1] }}">
                    <div class="conversation-title">{{ pair[1] }}</div>
                </a>
                {% endfor %}
                {% else %}
                <div class="muted sidebar-empty">No conversations yet.</div>
                {% endif %}
            </div>
        </aside>

        <!-- RIGHT: main UI -->
        <main class="main">

            <div class="row subject-row">

                <form method="post" action="{{ url_for('delete_convo', object_name=object_name) }}"
                    onsubmit="return confirm('Really delete {{ object_name }}?');" style="display:inline;">
                    <button type="submit" class="danger">
                        🗑 Delete
                    </button>
                </form>

                <form method="post" action="{{ url_for('auto_generate_subject', object_name=object_name) }}"
                    style="display:inline;">
                    <button type="submit">
                        🪄
                    </button>
                </form>

                <form id="save-form" method="post" action="{{ url_for('save', object_name=object_name) }}"
                    style="display:inline;" onsubmit="syncSubjectToSaveForm()">

                    <input type="hidden" name="subject" id="save-subject">

                    <button type="submit">💾</button>
                </form>

                <input type="text" name="subject" id="subject" placeholder="Conversation subject…"
                    value="{{ subject or '' }}" form="main-form" class="subject-input">

                <label class="muted subject-label" for="subject">
                    {{ object_name }}
                </label>
            </div>

            <form method="post" action="{{ url_for('submit', object_name=object_name) }}" id="main-form">
                <label class="muted">❓ what is the question?</label>
                <textarea name="text" placeholder="Type here..." id="question-text" rows="4"></textarea>

                <div class="row">
                    <button type="submit" id="submit-btn">Submit...</button>

                    <label class="checkbox">
                        <input type="checkbox" name="remove_thoughts" checked>
                        <span class="muted">🧠 remove thoughts</span>
                    </label>

                    <button type="submit" formaction="{{ url_for('prev', object_name=object_name) }}" {% if not can_prev
                        %}disabled{% endif %}>
                        ⬅️ Prev
                    </button>

                    <button type="submit" formaction="{{ url_for('next', object_name=object_name) }}" {% if not can_next
                        %}disabled{% endif %}>
                        Next ➡️
                    </button>

                    <span class="muted">{{ idx_display }}</span>

                    <button type="submit" class="danger"
                        formaction="{{ url_for('delete_interaction', object_name=object_name) }}" formmethod="post"
                        onclick="return confirm('Really delete {{ object_name }}/{{ index }}?');" {% if not can_delete
                        %}disabled{% endif %}>
                        🗑 Delete
                    </button>
                </div>
            </form>

            {% if item %}
            <div class="card">
                <div class="muted">Input</div>
                <pre>{{ item["input"] }}</pre>
                <div class="muted reply-label">Reply</div>
                <pre>{{ item["reply"] }}</pre>
            </div>
            {% else %}
            <p class="muted">No interactions yet.</p>
            {% endif %}

            <hr />

            <div class="row footer-row">
                <label class="muted">{{ signature }}</label>
            </div>

            <script src="{{ url_for('static', filename='theme.js') }}"></script>
        </main>

    </div>
</body>

</html>