{{--
    文件功能：右侧用户面板（复刻原版）
    包含：名单/房间/贴图/酷库 四个 Tab 面板
    独立文件方便维护

    依赖变量：$room（当前房间模型）
--}}
<div class="chat-right">
    {{-- Tab 标题栏 --}}
    <div class="right-tabs">
        <button class="tab-btn active" id="tab-users" onclick="switchTab('users')">名单</button>
        <button class="tab-btn" id="tab-rooms" onclick="switchTab('rooms')">房间</button>
    </div>

    {{-- 用户列表面板 --}}
    <div class="user-list-content" id="panel-users">
        {{-- 房间信息头部（原版风格：房间名 + 人气 + 在线人数） --}}
        <div style="text-align:center; padding:4px 6px; border-bottom:1px solid #cde; background:#f0f6ff;">
            <div style="color:#336699; font-weight:bold; font-size:12px;">【{{ $room->name }}】</div>
            <div style="color:#cc6600; font-size:11px;">人气:{{ $room->visit_num ?? 0 }}</div>
            <div style="font-size:11px; color:#999; margin-top:2px;">
                <span id="online-count-bottom">0</span>人
                <a href="#" onclick="renderUserList(); return false;"
                    style="color:#c00; font-size:10px; margin-left:4px;">刷新</a>
            </div>
        </div>

        {{-- 排序 + 搜索（原版风格） --}}
        <div style="padding:3px 4px; border-bottom:1px solid #cde; background:#f8fbff; font-size:11px;">
            <div style="display:flex; align-items:center; gap:4px; margin-bottom:3px;">
                <span style="color:#666; flex-shrink:0;">排序:</span>
                <select id="user-sort-select" onchange="renderUserList()"
                    style="flex:1; font-size:11px; padding:1px; border:1px solid #aac; border-radius:2px;">
                    <option value="default">默认</option>
                    <option value="name">按名称</option>
                    <option value="level">按等级</option>
                </select>
            </div>
            <div style="display:flex; align-items:center; gap:2px;">
                <input type="text" id="user-search-input" placeholder="搜索用户" onkeyup="filterUserList()"
                    style="width:100%; font-size:11px; padding:2px 4px; border:1px solid #aac; border-radius:2px; box-sizing:border-box;">
            </div>
        </div>

        {{-- 用户列表 --}}
        <div id="online-users-list" style="padding:2px;">
            <div style="text-align:center; color:#999; padding:20px 0; font-size:11px;">加载中...</div>
        </div>
        {{-- 管理员名单链接 --}}
        <div style="text-align:center; padding:4px; border-top:1px solid #cde; font-size:11px;">
            <a href="#" style="color:#336699; font-weight:bold;">管理员名单</a>
        </div>
    </div>

    {{-- 房间列表面板 --}}
    <div class="user-list-content" id="panel-rooms" style="display: none;">
        {{-- 顶部标题栏 --}}
        <div style="text-align:center; padding:4px 6px; border-bottom:1px solid #cde; background:#f0f6ff;">
            <div style="color:#336699; font-weight:bold; font-size:12px;">所有聊天室</div>
            <div style="font-size:10px; color:#999; margin-top:1px;">点击可切换房间</div>
        </div>

        {{-- 房间列表容器 --}}
        <div id="rooms-online-list" style="padding:4px 2px;">
            <div style="text-align:center; color:#bbb; padding:16px 0; font-size:11px;">加载中...</div>
        </div>
    </div>


    {{-- 底部在线统计 --}}
    <div class="online-stats">
        在线: <strong id="online-count-footer">0</strong> 人
    </div>
</div>

{{-- 图标悬浮文字提示：脱离滚动容器渲染，避免被右侧名单区域裁切 --}}
<div id="chat-hover-tooltip" class="chat-hover-tooltip" style="display:none;"></div>