{% extends 'main/layout.html' %}

{% block title %}Analytics for {{ post.title }} — {{ request.user.username }} at Mataroa{% endblock %}

{% block content %}
<main>
    <h1>{{ post.title }}</h1>

    <a href="{% url 'analytic_list' %}">« all post analytics</a>

    <h2>Post analytics since {{ post.created_at.date }}</h2>
    <p>
        Note: visits from your logged in user do not get recorded.
    </p>

    <div class="analytics-chart">
        <svg version="1.1" viewBox="0 0 500 192" xmlns="http://www.w3.org/2000/svg">
            <rect
                y="100"
                height="100"
                width="500"
                style="fill: #fff;"
                >
            </rect>
            {% for day, analytic in post_analytics.items %}
            <rect
                x="{{ analytic.x_offset }}"
                y="{{ analytic.negative_count_percent }}"
                width="18"
                height="{{ analytic.count_percent }}"
                class="analytics-chart-bar"
                >
                <title>{{ analytic.count }} hits during {{ day|date:'F j, Y' }}</title>
            </rect>

            <text
                x="{{ analytic.x_offset|add:'9' }}"
                y="108"
                text-anchor="middle"
                dominant-baseline="middle"
                class="analytics-chart-text"
                >
                {{ analytic.count }}
            </text>

            <text
                x="115"
                y="-{{ analytic.x_offset|add:'9' }}"
                transform="rotate(90)"
                dominant-baseline="middle"
                class="analytics-chart-text"
                >
                | {{ day|date:'Y-m-d' }}
            </text>
            {% endfor %}
        </svg>
    </div>

    <div>
        <h2>Referers</h2>
        <ul>
            {% for rc in referers_count %}
            {% if rc.referer is None %}
            <li><strong>{{ rc.id__count }}</strong> visits without a referer</li>
            {% else %}
            <li>
                <strong>{{ rc.id__count }}</strong>
                visits from
                <span style="font-family: monospace;">{{ rc.referer }}</span>
            </li>
            {% endif %}
            {% empty %}
            <li><i>No visits</i></li>
            {% endfor %}
        </ul>
    </div>

</main>
{% endblock %}