合作夥伴列表 - 咖啡廳の服務生

瀏覽聊天の咖啡廳所有的合作夥伴 Discord 社群，找到您感興趣的社群並加入！
Discord, 合作夥伴, 咖啡廳, 社群列表, 遊戲社群

合作夥伴列表 - 咖啡廳の服務生
瀏覽聊天の咖啡廳所有的合作夥伴 Discord 社群


<link rel="stylesheet" href="/css/partner/partner_list.css">
<div class="partner-list-page">
    <!-- 頁面標題區 -->
    <section class="list-header">
        <div class="container">
            <div class="header-content">
                <nav class="breadcrumb">
                    <a href="/partners/"><i class="fas fa-home"></i> 合作夥伴首頁</a>
                    <span class="separator"><i class="fas fa-chevron-right"></i></span>
                    <span class="current">所有夥伴</span>
                </nav>
                
                <h1 class="page-title">
                    <i class="fas fa-users"></i> 合作夥伴列表
                </h1>
                <p class="page-subtitle">共有 <strong><span data-var="partners|length"></span></strong> 個友好社群</p>
                
                <!-- IF: can_manage -->
                <div class="header-actions">
                    <!-- IF: is_admin -->
                    <a href="/partners/edit.html" class="btn-add-partner">
                        <i class="fas fa-plus-circle"></i> 新增合作夥伴
                    </a>
                    </div><!-- ENDIF -->
                </div>
                </div><!-- ENDIF -->
            </div>
            
            <!-- 搜尋與篩選 -->
            <div class="filter-bar">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="searchInput" placeholder="搜尋社群名稱或描述..." autocomplete="off">
                    <button class="clear-search" id="clearSearch" hidden>
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <div class="filter-options">
                    <div class="filter-group">
                        <label>排序方式</label>
                        <select id="sortSelect">
                            <option value="default">預設排序</option>
                            <option value="name">名稱 A-Z</option>
                            <option value="members">成員數量</option>
                            <option value="newest">最新加入</option>
                        </select>
                    </div>
                    
                    <div class="view-toggle">
                        <button class="view-btn active" data-view="grid" title="格狀檢視">
                            <i class="fas fa-th-large"></i>
                        </button>
                        <button class="view-btn" data-view="list" title="列表檢視">
                            <i class="fas fa-list"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 合作夥伴列表 -->
    <section class="partners-list-section">
        <div class="container">
            <!-- 主社群區塊 -->
            
            <!-- IF: main_partners -->
            <div class="featured-section">
                <h2 class="section-label"><i class="fas fa-star"></i> 主社群</h2>
                <div class="featured-partners">
                    <!-- FOR: partner in main_partners --><template class="loop-template">
                    <div class="partner-card featured" 
                         data-partner-id="<span data-var="partner.id"></span>" 
                         data-color="<span data-var="partner.color"></span>"
                         data-name="<span data-var="partner.name"></span>"
                         data-members="<span data-var="partner.member_count"></span>">
                        <div class="card-banner" style="background-color: <span data-var="partner.color"></span>20;">
                            <div class="main-badge">
                                <i class="fas fa-star"></i> 主社群
                            </div>
                        </div>
                        
                        <div class="card-body">
                            <div class="partner-avatar <!-- IF: partner.logo_url -->has-logo</div><!-- ENDIF -->">
                                <!-- IF: partner.logo_url -->
                                <img src="<span data-var="partner.logo_url"></span>" alt="<span data-var="partner.name"></span>" loading="lazy">
                                </div><div class="auth-conditional" data-auth-required="false">
                                <i class="<span data-var="partner.icon"></span>"></i>
                                </div><!-- ENDIF -->
                            </div>
                            
                            <h3 class="partner-name"><span data-var="partner.name"></span></h3>
                            <p class="partner-description"><span data-var="partner.description"></span></p>
                            
                            <div class="partner-meta">
                                <span class="meta-item members">
                                    <i class="fas fa-user-friends"></i>
                                    <span data-var="partner.member_count"></span> 成員
                                </span>
                                <!-- IF: partner.website_url -->
                                <a href="<span data-var="partner.website_url"></span>" target="_blank" rel="noopener" class="meta-item website">
                                    <i class="fas fa-globe"></i> 官網
                                </a>
                                </div><!-- ENDIF -->
                            </div>
                            
                            <!-- IF: partner.features -->
                            <div class="partner-tags">
                                <!-- FOR: feature in partner.features[:4] --><template class="loop-template">
                                <span class="tag"><span data-var="feature"></span></span>
                                </template><!-- ENDFOR -->
                                <!-- IF: partner.features|length > 4 -->
                                <span class="tag more">+<span data-var="partner.features|length - 4"></span></span>
                                </div><!-- ENDIF -->
                            </div>
                            </div><!-- ENDIF -->
                            
                            <div class="card-actions">
                                <a href="#partner.partner_detail" 
                                   class="btn-detail">
                                    <i class="fas fa-info-circle"></i> 詳情
                                </a>
                                <a href="<span data-var="partner.discord_invite"></span>" 
                                   target="_blank" 
                                   rel="noopener noreferrer" 
                                   class="btn-join"
                                   style="background-color: <span data-var="partner.color"></span>;">
                                    <i class="fab fa-discord"></i> 加入
                                </a>
                            </div>
                            
                            <!-- IF: partner.can_edit -->
                            <a href="/partners/edit.html" 
                               class="btn-edit" title="編輯">
                                <i class="fas fa-edit"></i>
                            </a>
                            </div><!-- ENDIF -->
                        </div>
                    </div>
                    </template><!-- ENDFOR -->
                </div>
            </div>
            </div><!-- ENDIF -->
            
            <!-- 所有合作夥伴 -->
            <div class="all-partners-section">
                <h2 class="section-label"><i class="fas fa-handshake"></i> 所有合作夥伴</h2>
                
                <div class="partners-grid" id="partnersGrid">
                    <!-- FOR: partner in partners if not partner.is_main --><template class="loop-template">
                    <div class="partner-card" 
                         data-partner-id="<span data-var="partner.id"></span>" 
                         data-color="<span data-var="partner.color"></span>"
                         data-name="<span data-var="partner.name"></span>"
                         data-members="<span data-var="partner.member_count"></span>">
                        <div class="card-body">
                            <div class="partner-avatar <!-- IF: partner.logo_url -->has-logo</div><!-- ENDIF -->">
                                <!-- IF: partner.logo_url -->
                                <img src="<span data-var="partner.logo_url"></span>" alt="<span data-var="partner.name"></span>" loading="lazy">
                                </div><div class="auth-conditional" data-auth-required="false">
                                <i class="<span data-var="partner.icon"></span>"></i>
                                </div><!-- ENDIF -->
                            </div>
                            
                            <h3 class="partner-name"><span data-var="partner.name"></span></h3>
                            <p class="partner-description"><span data-var="partner.description"></span></p>
                            
                            <div class="partner-meta">
                                <span class="meta-item members">
                                    <i class="fas fa-user-friends"></i>
                                    <span data-var="partner.member_count"></span> 成員
                                </span>
                            </div>
                            
                            <!-- IF: partner.features -->
                            <div class="partner-tags">
                                <!-- FOR: feature in partner.features[:3] --><template class="loop-template">
                                <span class="tag"><span data-var="feature"></span></span>
                                </template><!-- ENDFOR -->
                                <!-- IF: partner.features|length > 3 -->
                                <span class="tag more">+<span data-var="partner.features|length - 3"></span></span>
                                </div><!-- ENDIF -->
                            </div>
                            </div><!-- ENDIF -->
                            
                            <div class="card-actions">
                                <a href="#partner.partner_detail" 
                                   class="btn-detail">
                                    <i class="fas fa-info-circle"></i> 詳情
                                </a>
                                <a href="<span data-var="partner.discord_invite"></span>" 
                                   target="_blank" 
                                   rel="noopener noreferrer" 
                                   class="btn-join"
                                   style="background-color: <span data-var="partner.color"></span>;">
                                    <i class="fab fa-discord"></i> 加入
                                </a>
                            </div>
                            
                            <!-- IF: partner.can_edit -->
                            <a href="/partners/edit.html" 
                               class="btn-edit" title="編輯">
                                <i class="fas fa-edit"></i>
                            </a>
                            </div><!-- ENDIF -->
                        </div>
                    </div>
                    </template><!-- ENDFOR -->
                </div>
                
                <!-- 無結果提示 -->
                <div class="no-results" id="noResults" hidden>
                    <i class="fas fa-search"></i>
                    <h3>找不到符合的社群</h3>
                    <p>試試其他關鍵字或清除搜尋條件</p>
                    <button class="btn-clear-filter" id="clearAllFilters">
                        <i class="fas fa-undo"></i> 清除篩選
                    </button>
                </div>
            </div>
            
            <!-- 統計資訊 -->
            <div class="list-footer">
                <div class="stats-summary">
                    <div class="stat-item">
                        <i class="fas fa-users"></i>
                        <span class="stat-value"><span data-var="partners|length"></span></span>
                        <span class="stat-label">合作社群</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-user-friends"></i>
                        <span class="stat-value" id="totalMembers">-</span>
                        <span class="stat-label">總成員數</span>
                    </div>
                </div>
                
                <a href="/partners/" class="btn-back-home">
                    <i class="fas fa-arrow-left"></i> 返回首頁
                </a>
            </div>
        </div>
    </section>
</div>
<script src="/js/partner/partner_list.js"></script>