{% extends "layouts/admin.twig" %}

{% block title %}Statistieken - CodePress Admin{% endblock %}

{% block content %}
<h2 class="mb-4"><i class="bi bi-bar-chart"></i> Statistieken</h2>

<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="card stat-card shadow-sm">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-1">Totaal aantal views</h6>
                    <h3 class="mb-0">{{ (stats.totals.views|default(0))|number_format(0, ',', '.') }}</h3>
                </div>
                <i class="bi bi-eye stat-icon text-primary"></i>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stat-card shadow-sm">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-1">Unieke bezoekers</h6>
                    <h3 class="mb-0">{{ (stats.totals.uniques|default(0))|number_format(0, ',', '.') }}</h3>
                </div>
                <i class="bi bi-people stat-icon text-success"></i>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stat-card shadow-sm">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-1">Pagina views</h6>
                    <h3 class="mb-0">{{ stats.pages|length|default(0) }}</h3>
                </div>
                <i class="bi bi-file-earmark-text stat-icon text-info"></i>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-md-6">
        <div class="card shadow-sm">
            <div class="card-header"><i class="bi bi-globe"></i> Landen</div>
            <div class="card-body">
                <table class="table table-sm mb-0">
                    {% for country, count in stats.countries|slice(0, 10) %}
                    <tr>
                        <td>{{ get_country_flag(country) }} {{ get_country_name(country) }}</td>
                        <td class="text-end">{{ count|number_format(0, ',', '.') }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="2" class="text-muted">Geen data</td></tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card shadow-sm">
            <div class="card-header"><i class="bi bi-file-text"></i> Top pagina's</div>
            <div class="card-body">
                <table class="table table-sm mb-0">
                    {% for page, count in stats.pages|slice(0, 10) %}
                    <tr>
                        <td><code class="text-muted">{{ page }}</code></td>
                        <td class="text-end">{{ count|number_format(0, ',', '.') }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="2" class="text-muted">Geen data</td></tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}