{% load static %} {% block extrastyle %}
<link rel="stylesheet" href="{% static 'support/css/style.css' %}" defer />
<script type="module" src="{% static 'support/js/index.js' %}" defer></script>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<script type="module" src="{% static 'support/js/const/ELEMENTS.js' %}" defer></script>
{% endblock %} {% block content %}
<div class="flex h-full flex-col md:flex-row p-4 bg-[#111827]">
    <p id="manager-id" class="invisible">{{ user.pk }}</p>
    <div class="sidebar w-full md:w-1/4 p-4 rounded-lg shadow-md bg-[#1f2937]">
        <!-- Список тикетов -->
        <h2 class="text-xl font-bold mb-4 text-white">Чаты</h2>
        <div class="mb-4 flex gap-2">
            <input
                id="btn-set-unassigned"
                type="button"
                class="bg-purple-600 hover:bg-purple-700 block border border-transparent font-medium px-3 py-2 rounded transition-colors text-white cursor-pointer"
                value="Неназначенные" />
            <input
                id="btn-set-my"
                type="button"
                class="bg-purple-600 hover:bg-purple-700 block border border-transparent font-medium px-3 py-2 rounded transition-colors text-white cursor-pointer"
                value="Мои" />
        </div>
        <div class="ticket-list space-y-2"></div>
    </div>

    <div class="chat flex-1 flex flex-col mt-4 md:mt-0 md:ml-4">
        <!-- Заголовок чата -->
        <div
            class="chat-header flex items-center justify-between bg-gray-700 p-4 rounded-t-lg shadow-md">
            <h4 id="ticket-title" class="text-lg font-bold text-white">Выберите чат</h4>
            <input
                id="ticket-assign"
                type="button"
                class="default px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors font-bold"
                value="Принять в работу" />
        </div>

        <!-- Окно сообщений -->
        <div
            class="chat-window bg-[#1f2937] flex flex-col-reverse grow overflow-y-auto shadow-md p-2">
            <!-- Пример сообщения пользователя -->
        </div>
        <!-- Форма отправки сообщения -->
        <div class="chat-footer bg-[#1f2937] p-4 rounded-b-lg shadow-md">
            <form id="message-form" class="flex gap-2 h-16 text-white font-semibold">
                <textarea
                    class="message-textarea flex-1 p-2 bg-black/20 rounded outline-none resize-none"
                    placeholder="Начните писать.."></textarea>
                <input
                    id="send-message"
                    type="button"
                    class="default px-4 py-2 bg-blue-500 text-white font-bold rounded hover:bg-blue-600 transition-colors cursor-pointer"
                    value="Отправить" />
            </form>
        </div>
    </div>
</div>
{% endblock content %}