{% extends "base_list.html" %}

{% block title %}Top Birds{% endblock %}

{% block head_extra %}
<style>
    .container { margin-bottom: 100px; }
</style>
{% endblock %}

{% block lists %}
<div class="row">
    <div class="col-12">
        <h2>🐦 Birding Charts</h2>
        <p class="text-muted">All-time bird sightings based on scrobble log data.</p>
    </div>
</div>

{% if bird_stats %}
<div class="row mb-3">
    <div class="col-md-4 col-lg-3 mb-2">
        <div class="card text-center">
            <div class="card-body">
                <h5 class="card-title">{{ bird_stats.total_species }}</h5>
                <p class="card-text text-muted">Species seen</p>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-lg-3 mb-2">
        <div class="card text-center">
            <div class="card-body">
                <h5 class="card-title">{{ bird_stats.total_outings }}</h5>
                <p class="card-text text-muted">Outings</p>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-lg-3 mb-2">
        <div class="card text-center">
            <div class="card-body">
                <h5 class="card-title">{{ bird_stats.total_individuals }}</h5>
                <p class="card-text text-muted">Total individuals</p>
            </div>
        </div>
    </div>
</div>
{% endif %}

<div class="row">
    <div class="col-md-6 col-lg-4 chart-section">
        <ul class="list-group">
            {% for item in birds_chart %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <span class="me-2"><strong>#{{ forloop.counter }}</strong></span>
                <a href="{{ item.bird.get_absolute_url }}">{{ item.bird.common_name }}</a>
                <span class="badge bg-success rounded-pill">{{ item.count }}</span>
            </li>
            {% empty %}
            <li class="list-group-item">No bird sightings found.</li>
            {% endfor %}
        </ul>
    </div>
</div>
{% endblock %}