<%- include('../partials/header') %>
<%- include('../partials/sidebar') %>

<main class="dashboard-content">
    <div id="analytics-section" class="content-section active">
        <h2 class="page-title">Advanced Analytics</h2>
        <div class="charts-grid">
            <div class="chart-card full-width">
                <div class="section-header">
                    <h3>Game Performance Comparison</h3>
                    <div class="metric-selector">
                        <select id="comparison-metric">
                            <option value="totalSessions">Total Sessions</option>
                            <option value="uniquePlayers">Unique Players</option>
                            <option value="totalPlaytime">Total Playtime</option>
                            <option value="avgSessionDuration">Avg Duration</option>
                            <option value="activeDays">Active Days</option>
                        </select>
                    </div>
                </div>
                <canvas id="game-comparison-chart"></canvas>
            </div>
            <div class="chart-card">
                <h3>Popular Games</h3>
                <canvas id="games-chart"></canvas>
            </div>
            <div class="chart-card">
                <h3>Device Distribution</h3>
                <canvas id="device-type-chart"></canvas>
            </div>
            <div class="chart-card">
                <h3>OS Distribution</h3>
                <canvas id="os-chart"></canvas>
            </div>
            <div class="chart-card">
                <h3>Browser Distribution</h3>
                <canvas id="browser-chart"></canvas>
            </div>
        </div>
    </div>
</main>

<%- include('../partials/footer') %>
