個人資料


<link rel="stylesheet" href="/static/css/account/profile.css">
<div class="profile-container">
    <div class="profile-header">
        <h1><i class="fas fa-user-circle"></i> 個人資料</h1>
        <p>查看和管理您的帳號資訊及 Discord 連結狀態</p>
    </div>
    
    <!-- IF: error -->
    <div class="alert alert-danger">
        <i class="fas fa-exclamation-circle"></i>
        <div><span data-var="error"></span></div>
    </div>
    </div><!-- ENDIF -->
    
    <!-- IF: message -->
    <div class="alert alert-success">
        <i class="fas fa-check-circle"></i>
        <div><span data-var="message"></span></div>
    </div>
    </div><!-- ENDIF -->
    
    <div class="profile-grid">
        <!-- 基本資料卡片 -->
        <div class="profile-card">
            <div class="avatar-container">
                <!-- IF: user.avatar_url -->
                    <img src="<span data-var="user.avatar_url"></span>" alt="<span data-var="user.username"></span>" class="profile-avatar">
                <!-- ELIF -->
                    <img src="https://cdn.discordapp.com/avatars/<span data-var="user.discord_id"></span>/<span data-var="user.discord_info.avatar"></span>.png" alt="<span data-var="user.username"></span>" class="profile-avatar">
                <!-- ELIF -->
                    <img src="<span data-user-field="avatar_url"></span>" alt="<span data-var="user.username"></span>" class="profile-avatar">
                </div><div class="auth-conditional" data-auth-required="false">
                <img src="/img/discord-default.png" 
                         alt="<span data-var="user.username"></span>" 
                         class="profile-avatar">
                </div><!-- ENDIF -->
                
                <div class="auth-conditional" data-auth-required="true" style="display:none;">
                <div class="admin-badge">
                    <i class="fas fa-shield-alt"></i> 管理員
                </div>
                </div><!-- ENDIF -->
                
                <h2 class="profile-username"><span data-var="user.username"></span></h2>
            </div>
            
            <div class="profile-info">
                <div class="info-item">
                    <span class="info-label"><i class="fas fa-user"></i> 帳號</span>
                    <span class="info-value"><span data-var="user.username"></span></span>
                </div>
                
                <div class="info-item">
                    <span class="info-label"><i class="fas fa-envelope"></i> 電子郵件</span>
                    <span class="info-value"><span data-var="user.email"></span></span>
                </div>
                
                <div class="info-item">
                    <span class="info-label"><i class="fas fa-calendar-alt"></i> 註冊時間</span>
                    <span class="info-value"><span data-var="user.created_at"></span></span>
                </div>
                
                <div class="auth-conditional" data-auth-required="true" style="display:none;">
                <div class="info-item" style="background: rgba(67, 181, 129, 0.1); border: 1px solid rgba(67, 181, 129, 0.3);">
                    <span class="info-label"><i class="fas fa-user-shield"></i> 權限等級</span>
                    <span class="info-value" style="background: #43b581;">管理員</span>
                </div>
                </div><!-- ENDIF -->
            </div>
            
            <div class="button-group">
                <a class="profile-btn btn-primary" href="/settings/">
                    <i class="fas fa-cog"></i> 前往帳號設定
                </a>
            </div>
        </div>
    </div>
    <div class="profile-card" style="margin-top:20px;">
        <h3 class="profile-section-title"><i class="fas fa-info-circle"></i> 提示</h3>
        <p style="color:#b9bbbe;">Discord / KKBOX 連結、密碼變更與管理員驗證功能已移至 <strong>「帳號設定」</strong> 頁面。</p>
    <a class="profile-btn btn-primary" href="/settings/">
        <i class="fas fa-cog"></i> 前往帳號設定
    </a>
    </div>
    <!-- 付款紀錄嵌入 -->
    <div class="profile-card" style="margin-top:24px;">
        <h3 class="profile-section-title" style="margin-bottom:14px;"><i class="fas fa-receipt"></i> 最近付款紀錄</h3>
        <!-- IF: payment_records and payment_records|length > 0 -->
        <div style="overflow:auto;border:1px solid #2a2a2a;border-radius:10px;background:#1f1f1f;">
            <table style="width:100%;border-collapse:collapse;font-size:13px;min-width:600px;">
                <thead>
                    <tr style="background:#252525;">
                        <th style="padding:8px 10px;text-align:left;font-weight:600;color:#bbb;">訂單</th>
                        <th style="padding:8px 10px;text-align:right;font-weight:600;color:#bbb;">金額</th>
                        <th style="padding:8px 10px;text-align:left;font-weight:600;color:#bbb;">管道</th>
                        <th style="padding:8px 10px;text-align:left;font-weight:600;color:#bbb;">狀態</th>
                        <th style="padding:8px 10px;text-align:left;font-weight:600;color:#bbb;">建立</th>
                        <th style="padding:8px 10px;text-align:left;font-weight:600;color:#bbb;">更新</th>
                        <th style="padding:8px 10px;text-align:left;font-weight:600;color:#bbb;">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- FOR: r in payment_records --><template class="loop-template">
                    
                    <tr style="border-top:1px solid #262626;">
                        <td style="padding:6px 10px;">
                            <a href="#pay_service.payment_status" style="color:#4fc3f7;text-decoration:none;">
                                <span data-var="r.order_no"></span>
                            </a>
                        </td>
                        <td style="padding:6px 10px;text-align:right;"><span data-var="r.amount"></span></td>
                        <td style="padding:6px 10px;"><span data-var="r.gateway"></span></td>
                        <td style="padding:6px 10px;">
                            <span style="display:inline-block;padding:3px 8px;border-radius:14px;font-size:11px;font-weight:600;letter-spacing:.5px;" class="ph-chip <span data-var="'ok' if st in ['paid','success','succeeded'] else ('fail' if st in ['failed','canceled','cancelled','error','expired'] else ('wait' if st in ['pending','created','processing'] else 'other'))"></span>"><span data-var="r.status"></span></span>
                        </td>
                        <td style="padding:6px 10px;"><span data-var="r.created_at"></span></td>
                        <td style="padding:6px 10px;"><span data-var="r.updated_at"></span></td>
                        <td style="padding:6px 10px;">
                            <a href="#pay_service.payment_status" style="display:inline-block;padding:4px 8px;font-size:12px;background:#2d2d2d;color:#eee;border:1px solid #3a3a3a;border-radius:6px;text-decoration:none;">詳情</a>
                        </td>
                    </tr>
                    </template><!-- ENDFOR -->
                </tbody>
            </table>
        </div>
        <div style="margin-top:10px;font-size:12px;color:#888;">顯示最近 <span data-var="payment_records|length"></span> / 共 <span data-var="payment_total"></span> 筆。查看更多請前往 <a href="#pay_service.payment_history" style="color:#4fc3f7;">完整付款紀錄</a>。</div>
        </div><div class="auth-conditional" data-auth-required="false">
        <p style="margin:0 0 8px;color:#999;">尚無付款紀錄。</p>
        <a href="#pay_service.payment_history" style="display:inline-block;padding:8px 14px;background:#2d2d2d;color:#eee;border:1px solid #3a3a3a;border-radius:8px;text-decoration:none;font-size:13px;">前往付款紀錄</a>
        </div><!-- ENDIF -->
    </div>
</div>