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

<main class="dashboard-content">
    <div id="overview-section" class="content-section active">
        <h2 class="page-title">Dashboard Overview</h2>
        
        <!-- Metrics Grid -->
        <div class="metrics-grid">
            <div class="metric-card">
                <div class="metric-icon"><i class="fas fa-users"></i></div>
                <div class="metric-content">
                    <div class="metric-label">Today's Visitors</div>
                    <div class="metric-value" id="metric-today-visitors">-</div>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-icon"><i class="fas fa-user-check"></i></div>
                <div class="metric-content">
                    <div class="metric-label">Today's Unique</div>
                    <div class="metric-value" id="metric-today-unique">-</div>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-icon"><i class="fas fa-chart-line"></i></div>
                <div class="metric-content">
                    <div class="metric-label">Total Visitors</div>
                    <div class="metric-value" id="metric-total-visitors">-</div>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-icon"><i class="fas fa-clock"></i></div>
                <div class="metric-content">
                    <div class="metric-label">Total Playtime</div>
                    <div class="metric-value" id="metric-total-playtime">-</div>
                </div>
            </div>
        </div>

        <!-- Charts Grid -->
        <div class="charts-grid">
            <div class="chart-card full-width">
                <div class="section-header">
                    <h3>Traffic Overview</h3>
                    <div class="time-range-selector">
                        <button class="range-btn active" data-range="week">Week</button>
                        <button class="range-btn" data-range="month">Month</button>
                        <button class="range-btn" data-range="year">Year</button>
                    </div>
                </div>
                <canvas id="traffic-chart"></canvas>
            </div>
        </div>
    </div>
</main>

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