{% extends 'main.html' %}
{% block content %}
<div class="container mt-4">
    <h3>Top 50 Page Views</h3>

    <form method="get" class="row g-2 align-items-end mb-4">
        <div class="col-auto">
            <label class="form-label mb-0"><b>Page Type</b></label>
            <select name="page_type" class="form-select" onchange="this.form.submit()">
                {% for value, label in page_types %}
                    <option value="{{ value }}" {% if value == selected_page_type %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="col-auto">
            <label class="form-label mb-0"><b>Source</b></label>
            <select name="source" class="form-select" onchange="this.form.submit()">
                <option value="current" {% if source == 'current' %}selected{% endif %}>Current Month (in progress)</option>
                <option value="monthly" {% if source == 'monthly' %}selected{% endif %}>Completed Month Snapshot</option>
            </select>
        </div>

        {% if source == 'monthly' %}
            <div class="col-auto">
                <label class="form-label mb-0"><b>Period</b></label>
                <select name="_period" class="form-select"
                        onchange="var v=this.value.split('-'); this.form.year.value=v[0]; this.form.month.value=v[1]; this.form.submit();">
                    {% for py, pm in available_periods %}
                        <option value="{{ py }}-{{ pm }}" {% if py == year and pm == month %}selected{% endif %}>
                            {{ py }}-{{ pm|stringformat:"02d" }}
                        </option>
                    {% endfor %}
                </select>
                <input type="hidden" name="year" value="{{ year|default:'' }}">
                <input type="hidden" name="month" value="{{ month|default:'' }}">
            </div>
        {% endif %}
    </form>

    {% if source == 'monthly' and year and month %}
        <p class="text-muted">Showing snapshot for {{ year }}-{{ month|stringformat:"02d" }}</p>
    {% elif source == 'current' %}
        <p class="text-muted">Showing running totals for the current (not-yet-snapshotted) period.</p>
    {% endif %}

    <table class="table table-striped table-sm">
        <thead>
            <tr>
                <th>#</th>
                <th>Item</th>
                <th class="text-end">Views</th>
            </tr>
        </thead>
        <tbody>
            {% for row in results %}
            <tr>
                <td>{{ row.rank }}</td>
                <td>
                    {% if row.url %}
                        <a href="{{ row.url }}">{{ row.display }}</a>
                    {% else %}
                        {{ row.display }}
                    {% endif %}
                </td>
                <td class="text-end">{{ row.total }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="3" class="text-muted">No page view data yet for this selection.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock content %}