{% extends "django_anyllm/base.html" %}{% load i18n %}

{% block title %}{{ chat.title|default:_("Chat") }}{% endblock %}

{% block content %}
<div class="anyllm-app detail-page">
  <div class="anyllm-sidebar-overlay"></div>
  <aside class="anyllm-sidebar">
    <div class="anyllm-sidebar-header">
      <h2>{% trans "Chats" %}</h2>
      <form method="post" action="{% url 'django_anyllm:chat_create' %}" style="display: contents;">
        {% csrf_token %}
        <button type="submit" class="anyllm-new-chat-btn">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          {% trans "New Chat" %}
        </button>
      </form>
    </div>
    {% include "django_anyllm/_chat_list.html" %}
    <div class="anyllm-sidebar-footer">django-anyllm</div>
  </aside>

  <main class="anyllm-main">
    <div class="anyllm-main-header">
      <button class="anyllm-mobile-toggle" aria-label="{% trans 'Toggle sidebar' %}">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
      </button>
      <h1>{{ chat.title|default:_("Untitled Chat") }}</h1>
      <div style="width: 20px;"></div>
    </div>

    <div class="anyllm-messages" id="anyllm-messages">
      {% for message in chat.messages.all %}
        {% include "django_anyllm/_message.html" %}
      {% empty %}
        <div class="anyllm-empty">
          <svg class="anyllm-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
          <h3>{% trans "Start a conversation" %}</h3>
          <p>{% trans "Type a message below to begin chatting with the AI assistant." %}</p>
        </div>
      {% endfor %}
    </div>

    <div class="anyllm-input-area">
      {% include "django_anyllm/_message_form.html" %}
    </div>
  </main>
</div>
{% endblock %}