42 lines
2.2 KiB
HTML
42 lines
2.2 KiB
HTML
{% 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 %}
|