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

{% block title %}{% trans "Chats" %}{% endblock %}

{% block content %}
<div class="anyllm-app list-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>{% trans "Select a chat" %}</h1>
      <div style="width: 20px;"></div>
    </div>
    <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 "Welcome" %}</h3>
      <p>{% trans "Select a chat from the sidebar or create a new one to get started." %}</p>
    </div>
  </main>
</div>
{% endblock %}