揪團大廳<!-- IF: game_slug --> - <span data-var="game_slug"></span></div><!-- ENDIF --> | 咖啡廳の服務生

揪團大廳 - 瀏覽或建立遊戲揪團，找到適合的隊友一起遊玩。支援 PC、PlayStation、Xbox、Switch 等平台
Discord, 揪團, LFG, Looking For Group, 遊戲隊友, 線上遊戲, 多人遊戲, 咖啡廳, PC遊戲, 主機遊戲

揪團大廳<!-- IF: game_slug --> - <span data-var="game_slug"></span></div><!-- ENDIF --> | 咖啡廳の服務生
瀏覽或建立遊戲揪團，找到適合的隊友一起遊玩。支援多種遊戲平台

揪團大廳<!-- IF: game_slug --> - <span data-var="game_slug"></span></div><!-- ENDIF -->
瀏覽或建立遊戲揪團，找到適合的隊友一起遊玩


<link rel="stylesheet" href="/css/gaming/looking_for_group.css">
<div class="lfg-container">
    <!-- 頁面標題 -->
    <header class="lfg-header">
        <div class="header-content">
            <nav class="breadcrumb">
                <a href="/gaming/">
                    <i class="fas fa-gamepad"></i>
                    遊戲中心
                </a>
                <i class="fas fa-chevron-right"></i>
                <span>揪團大廳</span>
            </nav>
            <h1><i class="fas fa-users"></i> 揪團大廳</h1>
            <p class="header-subtitle">找到隊友，一起開打！</p>
        </div>
        <div class="header-actions">
            <button class="btn primary large" id="createLfgBtn">
                <i class="fas fa-plus"></i>
                建立揪團
            </button>
        </div>
    </header>

    <!-- 篩選與搜尋 -->
    <section class="filter-section" aria-label="揪團篩選">
        <div class="filter-bar">
            <div class="search-group">
                <label for="filterGameInput" class="visually-hidden">搜尋遊戲</label>
                <i class="fas fa-search" aria-hidden="true"></i>
                <input type="text" id="filterGameInput" placeholder="搜尋遊戲..." autocomplete="off">
            </div>
            <div class="filter-group">
                <label for="filterStatus">狀態</label>
                <select id="filterStatus">
                    <option value="open">開放中</option>
                    <option value="full">已滿員</option>
                    <option value="all">全部</option>
                </select>
            </div>
            <div class="filter-group">
                <label for="filterPlatform">平台</label>
                <select id="filterPlatform">
                    <option value="">全部平台</option>
                    <option value="pc">PC</option>
                    <option value="playstation">PlayStation</option>
                    <option value="xbox">Xbox</option>
                    <option value="nintendo">Nintendo Switch</option>
                    <option value="mobile">手機</option>
                    <option value="crossplay">跨平台</option>
                </select>
            </div>
            <button class="btn ghost" id="refreshBtn" aria-label="重新整理揪團列表">
                <i class="fas fa-sync-alt" aria-hidden="true"></i>
                重新整理
            </button>
        </div>
    </section>

    <!-- 主要內容區 -->
    <div class="lfg-main">
        <!-- 揪團列表 -->
        <section class="lfg-sessions-section" aria-labelledby="sessionsHeading">
            <div class="section-header">
                <h2 id="sessionsHeading">
                    <i class="fas fa-list" aria-hidden="true"></i>
                    揪團列表
                    <span class="count-badge" id="sessionCount" aria-label="揪團數量">0</span>
                </h2>
                <div class="view-toggle" role="group" aria-label="切換檢視模式">
                    <button class="view-btn active" data-view="grid" title="網格檢視" aria-pressed="true">
                        <i class="fas fa-th-large" aria-hidden="true"></i>
                        <span class="visually-hidden">網格檢視</span>
                    </button>
                    <button class="view-btn" data-view="list" title="列表檢視" aria-pressed="false">
                        <i class="fas fa-list" aria-hidden="true"></i>
                        <span class="visually-hidden">列表檢視</span>
                    </button>
                </div>
            </div>
            <div class="sessions-container grid-view" id="sessionsContainer" role="list" aria-live="polite">
                <div class="loading-state" aria-busy="true">
                    <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
                    <span>載入揪團資料中...</span>
                </div>
            </div>
            <div class="empty-state hidden" id="emptyState" role="status">
                <i class="fas fa-ghost" aria-hidden="true"></i>
                <h3>目前沒有揪團</h3>
                <p>成為第一個建立揪團的人吧！</p>
                <button class="btn primary" id="createFirstLfgBtn">
                    <i class="fas fa-plus" aria-hidden="true"></i>
                    建立揪團
                </button>
            </div>
        </section>

        <!-- 側邊欄 -->
        <aside class="lfg-sidebar" aria-label="揪團側邊欄">
            <!-- 我的揪團 -->
            <div class="sidebar-card">
                <div class="card-header">
                    <i class="fas fa-user-friends" aria-hidden="true"></i>
                    <h3>我的揪團</h3>
                </div>
                <div class="card-body" id="mySessionsBody" role="list" aria-label="我參加的揪團">
                    <p class="empty-text">尚未參加任何揪團</p>
                </div>
            </div>

            <!-- 我的訂閱 -->
            <div class="sidebar-card">
                <div class="card-header">
                    <i class="fas fa-bell" aria-hidden="true"></i>
                    <h3>遊戲訂閱</h3>
                </div>
                <div class="card-body" id="myWatchesBody" role="list" aria-label="已訂閱的遊戲">
                    <p class="empty-text">尚未訂閱任何遊戲</p>
                </div>
                <div class="card-footer">
                    <button class="btn ghost small" id="manageWatchesBtn" aria-label="管理遊戲訂閱">
                        <i class="fas fa-cog" aria-hidden="true"></i>
                        管理訂閱
                    </button>
                </div>
            </div>

            <!-- Discord 連結 -->
            <div class="sidebar-card discord-card">
                <div class="card-header">
                    <i class="fab fa-discord" aria-hidden="true"></i>
                    <h3>Discord 揪團</h3>
                </div>
                <div class="card-body">
                    <p>在 Discord 使用 <code>/lfg</code> 指令也可以揪團！</p>
                    <ul class="command-list" aria-label="Discord 揪團指令">
                        <li><code>/lfg create</code> - 建立揪團</li>
                        <li><code>/lfg list</code> - 查看揪團</li>
                        <li><code>/lfg watch</code> - 訂閱通知</li>
                    </ul>
                </div>
            </div>
        </aside>
    </div>
</div>

<!-- 建立揪團 Modal -->
<div class="modal" id="createLfgModal" role="dialog" aria-modal="true" aria-labelledby="createLfgTitle" aria-hidden="true">
    <div class="modal-backdrop"></div>
    <div class="modal-content large">
        <div class="modal-header">
            <h2 id="createLfgTitle"><i class="fas fa-plus-circle" aria-hidden="true"></i> 建立揪團</h2>
            <button class="modal-close" id="closeCreateModal" aria-label="關閉對話框">
                <i class="fas fa-times" aria-hidden="true"></i>
            </button>
        </div>
        <div class="modal-body">
            <form id="createLfgForm">
                <!-- 步驟 1: 選擇遊戲 -->
                <div class="form-step active" data-step="1" role="tabpanel" aria-labelledby="step1-tab">
                    <h3 id="step1-tab">步驟 1: 選擇遊戲</h3>
                    <div class="form-group">
                        <label for="gameSearch">搜尋遊戲</label>
                        <div class="search-input-wrapper">
                            <input type="text" id="gameSearch" placeholder="輸入遊戲名稱..." autocomplete="off" aria-describedby="gameSearchHint">
                            <button type="button" class="search-btn" id="searchGameInModal" aria-label="搜尋遊戲">
                                <i class="fas fa-search" aria-hidden="true"></i>
                            </button>
                        </div>
                        <span id="gameSearchHint" class="visually-hidden">輸入遊戲名稱後點擊搜尋</span>
                    </div>
                    <div class="game-search-results" id="modalGameResults" role="listbox" aria-label="遊戲搜尋結果" aria-live="polite">
                        <p class="hint-text">請輸入遊戲名稱並搜尋</p>
                    </div>
                    <input type="hidden" id="selectedGameId" name="game_id">
                    <div class="selected-game hidden" id="selectedGamePreview" role="status" aria-live="polite">
                        <img src="" alt="已選擇的遊戲封面" class="game-thumb">
                        <div class="game-info">
                            <h4 class="game-name"></h4>
                            <p class="game-genres"></p>
                        </div>
                        <button type="button" class="btn ghost small" id="changeGameBtn" aria-label="更換選擇的遊戲">
                            <i class="fas fa-exchange-alt" aria-hidden="true"></i>
                            更換
                        </button>
                    </div>
                </div>

                <!-- 步驟 2: 揪團詳情 -->
                <div class="form-step" data-step="2" role="tabpanel" aria-labelledby="step2-tab">
                    <h3 id="step2-tab">步驟 2: 揪團詳情</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="lfgMode">遊戲模式</label>
                            <input type="text" id="lfgMode" name="mode" placeholder="例如：競技、休閒、排位..." maxlength="50" aria-describedby="modeHint">
                            <span id="modeHint" class="visually-hidden">輸入遊戲模式，如競技、休閒等</span>
                        </div>
                        <div class="form-group">
                            <label for="lfgSlots">需要人數</label>
                            <input type="number" id="lfgSlots" name="slots_needed" min="1" max="99" value="3" aria-describedby="slotsHint">
                            <span id="slotsHint" class="visually-hidden">設定揪團需要的總人數，最少1人最多99人</span>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="lfgTime">開始時間</label>
                            <input type="text" id="lfgTime" name="time_text" placeholder="現在 / 30分鐘後 / 今晚8點..." value="現在">
                        </div>
                        <div class="form-group">
                            <label for="lfgPlatform">平台</label>
                            <select id="lfgPlatform" name="platform">
                                <option value="pc">🖥️ PC</option>
                                <option value="playstation">🎮 PlayStation</option>
                                <option value="xbox">🎮 Xbox</option>
                                <option value="nintendo">🕹️ Nintendo Switch</option>
                                <option value="mobile">📱 手機</option>
                                <option value="crossplay">🌐 跨平台</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lfgVoice">語音頻道<span class="optional-label">（選填）</span></label>
                        <input type="text" id="lfgVoice" name="voice_channel" placeholder="例如：普通語音頻道" aria-required="false">
                    </div>
                    <div class="form-group">
                        <label for="lfgNote">備註<span class="optional-label">（選填）</span></label>
                        <textarea id="lfgNote" name="note" placeholder="其他說明、要求等..." maxlength="500" rows="3" aria-required="false"></textarea>
                        <span class="char-count" aria-live="polite"><span id="noteCharCount">0</span>/500</span>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn ghost" id="prevStepBtn" disabled aria-label="返回上一步">
                <i class="fas fa-arrow-left" aria-hidden="true"></i>
                上一步
            </button>
            <div class="step-indicators" role="tablist" aria-label="表單步驟">
                <span class="step-dot active" data-step="1"></span>
                <span class="step-dot" data-step="2"></span>
            </div>
            <button type="button" class="btn primary" id="nextStepBtn">
                下一步
                <i class="fas fa-arrow-right"></i>
            </button>
            <button type="button" class="btn success hidden" id="submitLfgBtn">
                <i class="fas fa-check"></i>
                建立揪團
            </button>
        </div>
    </div>
</div>

<!-- 揪團詳情 Modal -->
<div class="modal" id="sessionDetailModal" role="dialog" aria-modal="true" aria-labelledby="sessionDetailTitle" aria-hidden="true">
    <div class="modal-backdrop"></div>
    <div class="modal-content">
        <button class="modal-close" id="closeSessionModal" aria-label="關閉對話框">
            <i class="fas fa-times" aria-hidden="true"></i>
        </button>
        <h2 id="sessionDetailTitle" class="visually-hidden">揪團詳情</h2>
        <div class="modal-body" id="sessionDetailContent">
            <!-- 動態內容 -->
        </div>
    </div>
</div>

<!-- 訂閱管理 Modal -->
<div class="modal" id="watchesModal" role="dialog" aria-modal="true" aria-labelledby="watchesModalTitle" aria-hidden="true">
    <div class="modal-backdrop"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="watchesModalTitle"><i class="fas fa-bell" aria-hidden="true"></i> 管理遊戲訂閱</h2>
            <button class="modal-close" id="closeWatchesModal" aria-label="關閉對話框">
                <i class="fas fa-times" aria-hidden="true"></i>
            </button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="watchGameSearch">新增訂閱</label>
                <div class="search-input-wrapper">
                    <input type="text" id="watchGameSearch" placeholder="搜尋並訂閱遊戲..." autocomplete="off">
                    <button type="button" class="search-btn" id="searchWatchGame" aria-label="搜尋遊戲">
                        <i class="fas fa-search" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="watch-search-results" id="watchSearchResults" role="region" aria-live="polite"></div>
            </div>
            <div class="divider" role="separator"></div>
            <div class="watches-list" id="watchesList" role="list" aria-label="已訂閱的遊戲">
                <p class="empty-text">尚未訂閱任何遊戲</p>
            </div>
        </div>
    </div>
</div>

<!-- Toast 通知 -->
<div id="toast" class="toast" role="status" aria-live="polite"></div>
<script src="/js/gaming/looking_for_group.js"></script>