{% extends "base.html" %}
{% load static i18n %}

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

{% block content %}
  <h1 class="text-2xl font-bold mb-4 text-gray-800">{% trans "Chat with Support" %}</h1>
  <p class="mb-6 text-gray-600">{% trans "Welcome! We're here to help. Type your message below to start a conversation with our support team." %}</p>

  <ul class="flex flex-col gap-2 mb-6">
    {% regroup chat_messages by timestamp.date as dated_messages %}
    {% for day in dated_messages %}
      <li class="flex justify-center my-2">
        <span class="px-4 py-1 bg-gray-100 text-gray-500 text-xs rounded-full shadow">{{ day.grouper|date:'l, d M Y' }}</span>
      </li>
      {% for message in day.list %}
        <li class="flex flex-col items-start {% if message.sender.id == user.id %}items-end{% endif %}">
          <div class="max-w-xs px-4 py-2 rounded-2xl shadow text-sm
            {% if message.sender.id == user.id %}
              bg-blue-600 text-white rounded-br-none self-end
            {% else %}
              bg-gray-200 text-gray-900 rounded-bl-none self-start
            {% endif %}">
            <span class="block font-semibold text-xs mb-1 {% if message.sender.id == user.id %}text-blue-100{% else %}text-blue-700{% endif %}">{{ message.sender.email }}</span>
            <span>{{ message.content }}</span>
            <span class="block text-xs {% if message.sender.id == user.id %}text-blue-100{% else %}text-blue-700{% endif %} mt-1 text-right">{{ message.timestamp|date:'H:i' }}</span>
          </div>
        </li>
      {% endfor %}
    {% empty %}
      <li class="text-gray-400">{% trans "No messages found." %}</li>
    {% endfor %}
  </ul>
  <form action="/chat/send/{{ user.id }}/" method="post" class="flex gap-4">
    {% csrf_token %}
    <textarea rows=1 name="content" placeholder="{% trans "Type your message here..." %}" class="grow resize-y min-h-10 border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-400 text-gray-800"></textarea>
    <button type="submit" class="self-center px-5 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">{% trans "Send" %}</button>
  </form>
{% endblock content %}