{% extends "base.html" %}
{% block title %}Chat{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Agenten Chat</h1>
  <p>Direkte Anfrage an einen spezifischen Agenten</p>
</div>

<div class="row g-4">
  <div class="col-lg-4">
    <div class="card">
      <div class="card-header bg-primary">
        <span>💬 Neue Anfrage</span>
      </div>
      <div class="card-body">
        <form method="POST" action="/chat">
          <div class="mb-3">
            <label for="agent" class="form-label">Agent</label>
            <select class="form-select" id="agent" name="agent" required>
              <option value="">— Agent wählen —</option>
              {% for key, agent in agents.items() %}
              <option value="{{ key }}">{{ agent.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="mb-3">
            <label for="prompt" class="form-label">Ihre Anfrage</label>
            <textarea class="form-control" id="prompt" name="prompt" rows="5"
              placeholder="Was soll der Agent erledigen?" required></textarea>
          </div>
          <button type="submit" class="btn btn-primary w-100">Absenden</button>
        </form>
      </div>
    </div>
  </div>

  <div class="col-lg-8">
    <div class="card">
      <div class="card-header bg-secondary d-flex align-items-center justify-content-between">
        <span>Chat-Verlauf</span>
        {% if chat_history %}
        <span class="badge bg-secondary">{{ chat_history|length }}</span>
        {% endif %}
      </div>
      <div class="card-body chat-container" id="chatContainer">
        {% if chat_history %}
          {% for chat in chat_history %}
          <div class="chat-message">
            <div class="chat-timestamp">
              {{ chat.timestamp }}
              <span class="badge bg-primary">{{ chat.agent }}</span>
            </div>
            <div class="chat-prompt"><strong>Sie:</strong> {{ chat.prompt }}</div>
            <div class="chat-response mt-1"><strong>Antwort:</strong> {{ chat.response }}</div>
          </div>
          {% endfor %}
        {% else %}
          <div class="text-center py-5" style="color:var(--text-muted);">
            <div style="font-size:2.5rem;margin-bottom:.75rem;">💬</div>
            <p style="margin:0;">Noch keine Nachrichten.<br>
              <small>Starten Sie eine Konversation.</small>
            </p>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}