{% extends "layout.html" %}

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

{% block extra_css %}
<style>
    /* Временные стили для структуры чата */
    .chat-container {
        display: flex;
        height: 80vh;
        border: 1px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
    }
    .sidebar {
        width: 300px;
        border-right: 1px solid var(--border);
        overflow-y: auto;
        padding: 1rem;
    }
    .chat-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .messages-container {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
        display: flex;
        flex-direction: column;
    }
    .message-input {
        padding: 1rem;
        border-top: 1px solid var(--border);
    }
</style>
{% endblock %}

{% block content %}
<div class="chat-container">
    <!-- Боковая панель с контактами -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <h3>Контакты</h3>
            <input type="text" id="contactSearch" placeholder="Поиск..." autocomplete="off">
        </div>
        <ul id="contactList">
            {% for contact in contacts %}
            <li class="contact-item" data-contact-id="{{ contact.id }}">
                <img src="{{ url_for('static', filename='uploads/' + contact.avatar_filename) }}" alt="{{ contact.username }}" class="avatar">
                <div class="contact-info">
                    <strong>{{ contact.username }}</strong>
                    <small class="last-seen">
                        {% if contact.is_online %}
                            <span class="online">Онлайн</span>
                        {% else %}
                            <span class="offline">Был(а) {{ contact.last_seen|default('недавно') }}</span>
                        {% endif %}
                    </small>
                </div>
                <span class="typing-indicator" id="typing-{{ contact.id }}" style="display: none;">печатает...</span>
            </li>
            {% endfor %}
        </ul>
    </aside>

    <!-- Основная область чата -->
    <main class="chat-main">
        <header class="chat-header">
            <h2 id="activeContactName">Выберите контакт для начала общения</h2>
            <div id="activeContactStatus"></div>
        </header>

        <!-- История переписки -->
        <div class="messages-container" id="messagesContainer">
            <!-- Сообщения будут загружаться здесь -->
        </div>

        <!-- Поле ввода сообщения -->
        <div class="message-input">
            <form id="messageForm" style="display: none;">
                <div class="grid">
                    <input type="text" id="messageInput" placeholder="Введите сообщение..." autocomplete="off" style="flex: 1;">
                    <button type="button" id="attachButton" title="Прикрепить файл">
                        <i class="fas fa-paperclip"></i>
                    </button>
                    <button type="submit" class="primary">Отправить</button>
                </div>
                <input type="file" id="fileInput" style="display: none;">
            </form>
            <div id="noContactSelected">
                <p>Пожалуйста, выберите контакт для отправки сообщения.</p>
            </div>
        </div>
    </main>
</div>

<!-- Скрытые поля для хранения данных -->
<input type="hidden" id="currentUserId" value="{{ session.user_id }}">
<input type="hidden" id="currentUsername" value="{{ session.username }}">
<input type="hidden" id="currentAvatar" value="{{ session.avatar_filename }}">
<input type="hidden" id="activeContactId">
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/chat.js') }}"></script>
{% endblock %}