<!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: list_of_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="get" 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 list_of_conversations %}
                {% for entry in list_of_conversations %}
                <a class="conversation-item {% if entry.object_name == active_object_name %}active{% endif %}"
                    href="{{ url_for('open_conversation', object_name=entry.object_name) }}"
                    title="{{ entry.subject }}">
                    <div class="conversation-title">{{ entry.subject }}</div>
                </a>
                {% endfor %}
                {% else %}
                <div class="muted sidebar-empty">No conversations yet.</div>
                {% endif %}
            </div>
        </aside>

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

            {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
            {% for category, message in messages %}
            <div class="flash {{ category }}">
                {{ message }}
            </div>
            {% endfor %}
            {% endif %}
            {% endwith %}


            <div class="row subject-row">

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

                <form id="save-form" method="get" 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>

                <form method="get" action="{{ url_for('auto_generate_subject', object_name=object_name) }}"
                    style="display:inline;">
                    <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 }} | {{ reply_id }} | {{ index }}
                </label>
            </div>

            <form method="get" action="{{ url_for('submit', object_name=object_name) }}" id="main-form">
                <input type="hidden" name="index" value="{{ index }}">
                <input type="hidden" name="reply" value="{{ reply_id }}">

                {% if top_interaction %}
                <div class="card">
                    <!-- reply content -->
                    <div class="radio-item">
                        <div class="radio-content">
                            <div class="muted">Question</div>
                            <pre>{{ top_interaction.question }}</pre>
                        </div>
                    </div>
                </div>
                {% endif %}

                {% if reply %}
                <div class="card">
                    <!-- reply content -->
                    <div class="radio-item">
                        <div class="radio-content">
                            <div class="muted">Reply | <a
                                    href="{{ url_for('open_conversation', object_name=object_name, reply=reply.id) }}">{{
                                    reply.id }}</a> | {{ reply.icon }}</div>
                            <pre>{{ reply.content }}</pre>
                        </div>
                    </div>
                </div>
                {% endif %}

                <label class="muted">❓ what is the question?</label>
                <textarea name="question" placeholder="Type here..." id="question-text" rows="4"></textarea>

                <div class="row">

                    <!-- Combo box -->
                    <select name="mode" id="mode-select" class="combo">
                        <option value="none">🟰</option>
                        <option value="ai" selected>🪄</option>
                        <option value="two">2️⃣</option>
                        <option value="three">3️⃣</option>
                        <option value="four">4️⃣</option>
                        <option value="five">5️⃣</option>
                    </select>

                    <!-- Submit -->
                    <button type="submit" id="submit-btn">➕</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
                        gui_elements.can_prev %}disabled{% endif %}>
                        ⬅️
                    </button>

                    <button type="submit" formaction="{{ url_for('up', object_name=object_name) }}" {% if not
                        gui_elements.can_up %}disabled{% endif %}>
                        ⬆️
                    </button>


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

                    <span class="muted">{{ gui_elements.index_display }}</span>

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

            {% if interaction %}

            <div class="card">
                <!-- Question -->
                <div class="radio-item">
                    <div class="radio-content">
                        <div class="muted">Question</div>
                        <pre>{{ interaction.question }}</pre>
                    </div>
                </div>
            </div>

            <!-- Replies -->
            {% for reply_ in interaction.list_of_replies %}
            <div class="card">
                <div class="radio-item">
                    <div class="radio-content">
                        <div class="muted reply-label">Reply #{{ loop.index }} | <a
                                href="{{ url_for('open_conversation', object_name=object_name, reply=reply_.id) }}">{{
                                reply_.id }}</a> | {{ reply_.icon }}
                        </div>
                        <pre>{{ reply_.content }}</pre>
                    </div>
                </div>
            </div>
            {% endfor %}

            {% 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>