{% load i18n %}{% load static %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:'en' }}">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}{% trans "Chat" %}{% endblock %}</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap" rel="stylesheet">
  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked@13/marked.min.js"></script>
  <link rel="stylesheet" href="{% static 'django_anyllm/css/anyllm.css' %}">
  {% block extra_head %}{% endblock %}
</head>
<body>
  {% block content %}{% endblock %}

  <script>
    function autoResizeTextarea(el) {
      el.style.height = 'auto';
      el.style.height = Math.min(el.scrollHeight, 200) + 'px';
    }

    function scrollToBottom(smooth) {
      const container = document.querySelector('.anyllm-messages');
      if (container) {
        container.scrollTo({
          top: container.scrollHeight,
          behavior: smooth ? 'smooth' : 'auto'
        });
      }
    }

    document.addEventListener('DOMContentLoaded', function() {
      scrollToBottom(false);

      const toggle = document.querySelector('.anyllm-mobile-toggle');
      const sidebar = document.querySelector('.anyllm-sidebar');
      const overlay = document.querySelector('.anyllm-sidebar-overlay');

      if (toggle && sidebar) {
        toggle.addEventListener('click', function() {
          sidebar.classList.toggle('open');
          if (overlay) overlay.classList.toggle('open');
        });
      }

      if (overlay) {
        overlay.addEventListener('click', function() {
          sidebar.classList.remove('open');
          overlay.classList.remove('open');
        });
      }
    });

    const scrollObserver = new MutationObserver(function() {
      scrollToBottom(true);
    });

    document.addEventListener('DOMContentLoaded', function() {
      const container = document.querySelector('.anyllm-messages');
      if (container) {
        scrollObserver.observe(container, { childList: true, subtree: true });
      }
    });
  </script>
  {% block extra_js %}{% endblock %}
</body>
</html>
