<layout name="admin" />

<div class="section">
    <h2>Analytics Dashboard</h2>
    <div class="stats-grid">
        <div class="stat-card">
            <h3>Page Views</h3>
            <p><strong>Today:</strong> {{ today_page_views }}</p>
            <p><strong>This Week:</strong> {{ week_page_views }}</p>
            <p><strong>This Month:</strong> {{ month_page_views }}</p>
        </div>

        <div class="stat-card">
            <h3>Unique Visitors</h3>
            <p><strong>Today:</strong> {{ today_visitors }}</p>
            <p><strong>This Week:</strong> {{ week_visitors }}</p>
            <p><strong>This Month:</strong> {{ month_visitors }}</p>
        </div>

        <div class="stat-card">
            <h3>Performance</h3>
            <p><strong>Avg. Load Time:</strong> {{ avg_load_time }}</p>
            <p><strong>Bounce Rate:</strong> {{ bounce_rate }}</p>
            <p><strong>Session Duration:</strong> {{ avg_session_duration }}</p>
        </div>
    </div>

    <div class="stats-grid">
        <div class="stat-card full-width">
            <h3>Top Pages</h3>
            <if condition="{{ top_pages }}">
            <table>
                <thead>
                    <tr>
                        <th>Page</th>
                        <th>Views</th>
                        <th>Unique Visitors</th>
                        <th>Avg. Time on Page</th>
                    </tr>
                </thead>
                <tbody>
                    <for items="{{ top_pages }}" value="page">
                    <tr>
                        <td>{{ page.path }}</td>
                        <td>{{ page.views }}</td>
                        <td>{{ page.unique_visitors }}</td>
                        <td>{{ page.avg_time }}</td>
                    </tr>
                    </for>
                </tbody>
            </table>
            <else>
            <p>No analytics data available yet.</p>
            <p>The analytics system will start collecting data once visitors start using your website.</p>
            </if>
        </div>
    </div>

    <div class="stats-grid">
        <div class="stat-card">
            <h3>Traffic Sources</h3>
            <if condition="{{ traffic_sources }}">
            <ul style="list-style: none; padding: 0;">
                <for items="{{ traffic_sources }}" key="source" value="percentage">
                <li style="margin: 8px 0;">
                    <strong>{{ source }}:</strong> {{ percentage }}%
                </li>
                </for>
            </ul>
            <else>
            <p>No traffic source data available.</p>
            </if>
        </div>

        <div class="stat-card">
            <h3>System Status</h3>
            <p><strong>Analytics Status:</strong> <span style="color: var(--success);">Active</span></p>
            <p><strong>Data Collection:</strong> <span style="color: var(--success);">Running</span></p>
            <p><strong>Last Update:</strong> {{ last_update }}</p>
        </div>
    </div>
</div>