<div class="space-y-6">
    <!-- 顶部导航链接 -->
    <div class="flex items-center">
        <a href="/admin/robots/{{.Robot.ID}}/contacts/{{.Contact.ID}}" class="text-indigo-600 hover:text-indigo-800 mr-4">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h1 class="text-2xl font-bold text-gray-800">{{.Contact.Nickname}} 群成员</h1>
    </div>

    <!-- 群组信息 -->
    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
        {{if .Contact.Avatar}}
            <img src="{{.Contact.Avatar}}" alt="{{.Contact.Nickname}}" class="w-16 h-16 rounded-full mr-4">
        {{else}}
            <div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 mr-4">
                <i class="fas fa-users text-3xl"></i>
            </div>
        {{end}}
        <div>
            <h2 class="text-lg font-medium text-gray-800">{{.Contact.Nickname}}</h2>
            <div class="flex items-center mt-1">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                    群聊
                </span>
                <span class="ml-2 text-sm text-gray-500">{{len .Members}} 名成员</span>
            </div>
        </div>
    </div>
    
    <!-- 搜索框 -->
    <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <i class="fas fa-search text-gray-400"></i>
        </div>
        <input type="text" id="member-search" placeholder="搜索群成员..." class="block w-full pl-10 pr-3 py-2 border border-gray-200 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
    </div>
    
    <!-- 成员列表 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
            {{if .Members}}
                {{range .Members}}
                    <div class="member-card border border-gray-100 rounded-lg p-4">
                        <div class="flex items-center">
                            {{if .Avatar}}
                                <img src="{{.Avatar}}" alt="{{.Nickname}}" class="w-12 h-12 rounded-full mr-4">
                            {{else}}
                                <div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mr-4 text-gray-500">
                                    <i class="fas fa-user"></i>
                                </div>
                            {{end}}
                            <div>
                                <h3 class="text-gray-900 font-medium member-name">{{.Nickname}}</h3>
                                <div class="flex items-center mt-1">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{if eq .Role "owner"}}bg-purple-100 text-purple-800{{else if eq .Role "admin"}}bg-indigo-100 text-indigo-800{{else}}bg-gray-100 text-gray-800{{end}}">
                                        {{if eq .Role "owner"}}群主{{else if eq .Role "admin"}}管理员{{else}}成员{{end}}
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        {{if .WechatID}}
                        <div class="mt-3 text-sm text-gray-500">
                            微信号: {{.WechatID}}
                        </div>
                        {{end}}
                        
                        <div class="flex mt-4 pt-3 border-t border-gray-100 justify-end">
                            <button class="text-sm text-indigo-600 hover:text-indigo-800 mr-3 send-msg-btn" 
                                    data-id="{{.WechatID}}" 
                                    data-name="{{.Nickname}}"
                                    data-avatar="{{.Avatar}}">
                                <i class="fas fa-comment mr-1"></i> 发消息
                            </button>
                            
                            <button class="text-sm text-gray-500 hover:text-gray-700 view-info-btn"
                                    data-id="{{.WechatID}}" 
                                    data-name="{{.Nickname}}">
                                <i class="fas fa-info-circle mr-1"></i> 详情
                            </button>
                        </div>
                    </div>
                {{end}}
            {{else}}
                <div class="col-span-3 text-center py-10">
                    <i class="fas fa-users-slash text-5xl text-gray-300 mb-3"></i>
                    <p class="text-gray-500">没有找到群成员信息</p>
                </div>
            {{end}}
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 搜索功能
        const searchInput = document.getElementById('member-search');
        const memberCards = document.querySelectorAll('.member-card');
        
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            
            memberCards.forEach(card => {
                const name = card.querySelector('.member-name').textContent.toLowerCase();
                if (name.includes(searchTerm)) {
                    card.classList.remove('hidden');
                } else {
                    card.classList.add('hidden');
                }
            });
        });
        
        // 发送消息按钮
        document.querySelectorAll('.send-msg-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const memberId = this.dataset.id;
                const memberName = this.dataset.name;
                const memberAvatar = this.dataset.avatar;
                
                // 这里可以调用发送消息的模态框
                if (typeof App !== 'undefined' && typeof setMessageRecipient !== 'undefined') {
                    App.openModal('send-message-modal');
                    setMessageRecipient(memberId, memberName, 'friend', memberAvatar);
                } else {
                    alert('发送消息给: ' + memberName);
                }
            });
        });
        
        // 查看详情按钮
        document.querySelectorAll('.view-info-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const memberId = this.dataset.id;
                const memberName = this.dataset.name;
                
                // 这里可以显示成员详情，暂时用alert代替
                alert('查看详情: ' + memberName + ' (' + memberId + ')');
            });
        });
    });
</script>
