{% extends 'base.html' %}
{% load static %}

{% block title %}Чат{% endblock %}

{% block content %}
<div>
    <div class="mb-4 flex justify-between items-center">
        <a href="{% url 'chat_list' %}" class="text-indigo-600 hover:text-indigo-800">
            <i class="fas fa-arrow-left mr-2"></i>Назад к чатам
        </a>
        {% if chat.is_group %}
        <form method="post" action="{% url 'leave_chat' chat.id %}" onsubmit="return confirm('Выйти из чата?')">
            {% csrf_token %}
            <button type="submit" class="text-red-500 hover:text-red-700 text-sm">
                <i class="fas fa-sign-out-alt mr-1"></i>Покинуть чат
            </button>
        </form>
        {% else %}
        <form method="post" action="{% url 'delete_chat' chat.id %}" onsubmit="return confirm('Удалить чат?')">
            {% csrf_token %}
            <button type="submit" class="text-red-500 hover:text-red-700 text-sm">
                <i class="fas fa-trash mr-1"></i>Удалить чат
            </button>
        </form>
        {% endif %}
    </div>

    <div class="bg-white rounded-xl shadow-sm flex flex-col h-[600px]">
        <!-- Заголовок чата -->
        <div class="px-6 py-4 border-b">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 flex items-center justify-center text-white mr-3">
                    {% if chat.is_group %}
                    <i class="fas fa-users"></i>
                    {% else %}
                    <i class="fas fa-user"></i>
                    {% endif %}
                </div>
                <div>
                    <h2 class="font-semibold text-gray-800">
                        {% if chat.is_group and chat.name %}
                            {{ chat.name }}
                        {% else %}
                            {% for p in participants %}
                                {% if p != request.user %}
                                    {{ p.full_name|default:p.email }}
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                    </h2>
                    <p class="text-xs text-gray-400">
                        Участников: {{ participants|length }}
                    </p>
                </div>
            </div>
        </div>

        <!-- Сообщения -->
        <div id="messages-container" class="flex-1 overflow-y-auto p-4 space-y-3">
            {% for message in messages %}
            <div class="flex {% if message.sender == request.user %}justify-end{% endif %}">
                <div class="max-w-xs lg:max-w-md px-4 py-2 rounded-lg {% if message.sender == request.user %}bg-indigo-600 text-white{% else %}bg-gray-100{% endif %}">
                    <div class="text-xs {% if message.sender == request.user %}text-indigo-200{% else %}text-gray-500{% endif %} mb-1">
                        {{ message.sender.email }}
                    </div>
                    <div class="text-sm">{{ message.text }}</div>
                    <div class="text-xs {% if message.sender == request.user %}text-indigo-200{% else %}text-gray-400{% endif %} mt-1 text-right">
                        {{ message.created_at|date:"H:i" }}
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="text-center text-gray-400 py-8">
                <i class="fas fa-comment-dots text-3xl mb-2 block"></i>
                <p>Нет сообщений. Напишите что-нибудь!</p>
            </div>
            {% endfor %}
        </div>

        <!-- Форма отправки -->
        <div class="p-4 border-t">
            <form method="post">
                {% csrf_token %}
                <div class="flex space-x-2">
                    <input type="text" name="message" placeholder="Введите сообщение..."
                           class="flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const container = document.getElementById('messages-container');
    if (container) {
        container.scrollTop = container.scrollHeight;
    }
    setTimeout(() => location.reload(), 10000);
</script>
{% endblock %}