{% extends 'paxalia/base.html' %}
{% load static i18n %}

{% block title %}{% trans "Cohorts & Retention" %} – Paxalia Analytics{% endblock %}
{% block page_title %}{% trans "Cohorts & Retention" %}{% endblock %}
{% block page_subtitle %}{% trans "What fraction of each cohort comes back, by week or month" %}{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'paxalia/styles/components/security.css' %}">
{% endblock %}

{% block dashboard_content %}
<div class="security-page">

    <div class="table-card">
        <form method="get" class="security-inline-form">
            <select name="unit" onchange="this.form.submit()">
                <option value="week" {% if unit == 'week' %}selected{% endif %}>{% trans "Weekly cohorts" %}</option>
                <option value="month" {% if unit == 'month' %}selected{% endif %}>{% trans "Monthly cohorts" %}</option>
            </select>
            <select name="periods" onchange="this.form.submit()">
                {% for n in period_options %}
                <option value="{{ n }}" {% if num_periods == n %}selected{% endif %}>{{ n }} {% trans "periods" %}</option>
                {% endfor %}
            </select>
        </form>
        <p class="form-hint">
            {% trans "Visitor identity is approximated from the analytics session cookie, which lasts 30 days and isn't refreshed. Weekly retention over the last few weeks is reasonably meaningful; monthly retention beyond about a month will undercount returning visitors whose cookie has since expired — they show up as 'new' again instead." %}
        </p>
    </div>

    <div class="table-card">
        <h2 class="card-title">{% trans "Retention" %}</h2>
        {% if cohort_rows %}
        <div style="overflow-x: auto;">
        <table class="analytics-table">
            <thead>
                <tr>
                    <th>{% trans "Cohort" %}</th>
                    <th>{% trans "Size" %}</th>
                    {% for offset in offset_range %}
                    <th>+{{ offset }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in cohort_rows %}
                <tr>
                    <td>{{ row.period|date:"M d, Y" }}</td>
                    <td>{{ row.size }}</td>
                    {% for cell in row.offsets %}
                        {% if cell %}
                        <td>{{ cell.pct }}% <span class="status-dim">({{ cell.retained }})</span></td>
                        {% else %}
                        <td class="status-dim">—</td>
                        {% endif %}
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
        {% else %}
        <div class="security-empty">{% trans "Not enough data yet to compute cohorts." %}</div>
        {% endif %}
    </div>

</div>
{% endblock %}