{% extends 'base.html.twig' %}

{% block title %}Statystyki{% endblock %}

{% block body %}
    <h1>Statystyki wejść</h1>
    <p class="hint">
        Ostatnie {{ days }} dni. Twoje własne wejścia nie są liczone od chwili wpisania kodu dostępu.
        W bazie: {{ total }} {{ total == 1 ? 'wejście' : (total % 10 in [2, 3, 4] and total % 100 not in [12, 13, 14] ? 'wejścia' : 'wejść') }}.
    </p>

    {% if chart.max == 0 %}
        <p class="hint">Z tego okresu nie ma jeszcze żadnego wejścia.</p>
    {% else %}
        <p class="chart-legend">
            <span class="chart-legend__key chart-legend__key--humans"></span> ludzie: {{ chart.humans }}
            <span class="chart-legend__key chart-legend__key--bots"></span> boty: {{ chart.bots }}
        </p>

        {# Wykres jest samym CSS-em: kazdy slupek to dwa bloki o wysokosci
           liczonej wzgledem najwyzszego dnia. Liczby powtorzone sa w title
           kazdej kolumny, wiec kolor nie jest jedynym nosnikiem informacji. #}
        <div class="chart">
            {% for bar in chart.days %}
                <div class="chart__col" title="{{ bar.day }}: {{ bar.humans }} od ludzi, {{ bar.bots }} od botów">
                    <span class="chart__stack">
                        <span class="chart__bar chart__bar--bots" style="height: {{ (bar.bots / chart.max * 100)|round }}%"></span>
                        <span class="chart__bar chart__bar--humans" style="height: {{ (bar.humans / chart.max * 100)|round }}%"></span>
                    </span>
                    <span class="chart__tick">{{ loop.index0 % 5 == 0 ? bar.day|date('d.m') : '' }}</span>
                </div>
            {% endfor %}
        </div>
    {% endif %}

    <h2>Najczęściej oglądane strony</h2>
    {% if topPaths is empty %}
        <p class="hint">Brak danych z tego okresu.</p>
    {% else %}
        <table>
            <thead><tr><th>Strona</th><th>Wejścia</th></tr></thead>
            <tbody>
                {% for row in topPaths %}
                    <tr><td>{{ row.path }}</td><td>{{ row.visits }}</td></tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}

    <h2>Ostatnie wejścia</h2>
    {% if latest is empty %}
        <p class="hint">Nikt jeszcze tu nie zaglądał.</p>
    {% else %}
        <table class="visits">
            <thead>
                <tr><th>Kiedy</th><th>Strona</th><th>Kto</th><th>Adres IP</th></tr>
            </thead>
            <tbody>
                {% for row in latest %}
                    <tr class="{{ row.bot ? 'visits__row--bot' }}">
                        <td>{{ row.visitedAt|date('d.m H:i') }}</td>
                        <td>{{ row.path }}</td>
                        <td title="{{ row.userAgent }}">
                            {% if row.bot %}
                                bot
                            {% elseif row.teamName %}
                                {{ row.teamName }}
                            {% else %}
                                nieznany
                            {% endif %}
                        </td>
                        <td>{{ row.ip ?? '—' }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}

    <form method="post" action="{{ path('stats_clear') }}" class="stats-clear">
        <input type="hidden" name="_token" value="{{ csrf_token('submit') }}">
        <button type="submit" class="button btn">Usuń wejścia z mojego adresu</button>
        <span class="hint">Sprząta to, co nazbierało się, zanim wpisałeś kod dostępu.</span>
    </form>
{% endblock %}