{% extends "base.html" %}

{% block title %}Chat – Agent Platform{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Chat</h1>
    <p class="subtitle">Konversation: <code>{{ conv_id }}</code></p>
</div>

<section class="card chat-container">
    <div id="messages" class="messages">
        {% for msg in messages %}
        <div class="message message-{{ msg.role }}">
            <div class="message-role">{{ msg.role }}</div>
            <div class="message-content">{{ msg.content }}</div>
        </div>
        {% endfor %}
        {% if not messages %}
        <p class="empty-state">Noch keine Nachrichten.</p>
        {% endif %}
    </div>
</section>

<section class="card">
    <form hx-post="" hx-target="#messages" hx-swap="beforeend" hx-on::after-request="this.reset()" class="form" id="chat-form">
        <input type="hidden" name="conv_id" value="{{ conv_id }}">
        <div class="form-row">
            <div class="form-group" style="flex: 1;">
                <textarea name="message" rows="2" required placeholder="Nachricht eingeben..." autofocus></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Senden</button>
        </div>
    </form>
</section>
{% endblock %}