<!doctype html>
<html>

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

<body>
    <h2>{{ title }}</h2>

    <form method="post" action="{{ url_for('submit') }}">
        <label class="muted">❓ what is the question?</label>
        <textarea name="text" placeholder="Type here..."></textarea>
        <div class="row">
            <button type="submit">Run</button>
            <label> <input type="checkbox" name="remove_thoughts" checked>🧠 remove thoughts</label>
            <button type="submit" formaction="{{ url_for('prev') }}" {% if not can_prev %}disabled{% endif
                %}>Prev</button>
            <button type="submit" formaction="{{ url_for('next') }}" {% if not can_next %}disabled{% endif
                %}>Next</button>
            <button type="submit" formaction="{{ url_for('clear') }}">Clear</button>
            <span class="muted">Showing {{ idx_display }}</span>
        </div>
    </form>

    {% if item %}
    <div class="card">
        <div class="muted">Input</div>
        <pre>{{ item["input"] }}</pre>
        <div class="muted" style="margin-top:10px;">Reply</div>
        <pre>{{ item["reply"] }}</pre>
    </div>
    {% else %}
    <p class="muted">No interactions yet.</p>
    {% endif %}
</body>

</html>