<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<div class="grid grid-cols-1 gap-4 xl:grid-cols-12" data-conversations data-user-id="<?= (int) $user_id ?>" data-contacts-url="<?= base_url('chat/conversation_contacts') ?>" data-thread-url-base="<?= base_url('chat/conversation_thread/') ?>">
    <aside class="xl:col-span-4">
        <div class="flex h-[662px] min-h-[662px] max-h-[662px] flex-col overflow-hidden rounded-3xl border border-border bg-card shadow-sm">
            <div class="border-b border-border px-4 py-4 dark:border-slate-700">
                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground"><?= lang('private') ?> <?= lang('chat') ?></p>
                <h2 class="mt-1 text-base font-semibold text-foreground"><?= lang('all_users') ?></h2>
            </div>

            <div class="border-b border-border px-4 py-3 dark:border-slate-700">
                <label class="relative block">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-muted-foreground">
                        <i data-lucide="search" class="h-4 w-4"></i>
                    </span>
                    <input type="search"
                           value=""
                           placeholder="Search by name, role, or email..."
                           class="h-10 w-full rounded-xl border border-border bg-background pl-11 pr-4 text-sm text-foreground outline-none transition placeholder:text-muted-foreground focus:border-primary dark:border-slate-700 dark:bg-slate-900"
                           data-conversation-search>
                </label>
            </div>

            <div data-conversation-contacts>
                <div class="flex flex-1 items-center justify-center px-6 py-12 text-sm text-muted-foreground">
                    <?= lang('loading') ?>...
                </div>
            </div>
        </div>
    </aside>

    <section class="xl:col-span-8" data-conversation-thread>
        <?= $this->load->view('chat/partials/conversation_thread', array(
            'selected_user' => !empty($user_id) ? profile($user_id) : null,
            'user_id' => $user_id,
            'chats' => isset($chats) ? $chats : null,
            'all_messages' => isset($all_messages) ? $all_messages : array(),
        ), true); ?>
    </section>
</div>

<div id="chat_box" class="fixed bottom-24 right-6 z-40 space-y-3"></div>
<script src="<?= base_url() ?>assets/plugins/chat/chat.js"></script>
