{% extends "base.html" %}
{% block title %}污染物数据 - 常德空气质量分析平台{% endblock %}
{% block page_title %}污染物数据{% endblock %}

{% block content %}
<div class="filter-bar">
    <form method="GET" action="{% url 'dashboard:pollutant_data' %}" style="display:flex;gap:12px;align-items:end;">
        <div class="filter-group">
            <label>年份</label>
            <select name="year">
                <option value="">全部</option>
                {% for y in years %}
                <option value="{{ y }}" {% if filter_year == y|stringformat:"d" %}selected{% endif %}>{{ y }}</option>
                {% endfor %}
            </select>
        </div>
        <button type="submit" class="btn btn-primary">筛选</button>
        <a href="{% url 'dashboard:pollutant_data' %}" class="btn" style="background:#e8e8e8;color:#555;">重置</a>
    </form>
</div>

<div class="chart-card">
    <div class="chart-title"><span class="dot"></span> 污染物详细数据（共 {{ total }} 条）</div>
    <table class="data-table">
        <thead>
            <tr>
                <th>日期</th><th>AQI</th><th>质量等级</th>
                <th>PM2.5</th><th>PM10</th><th>NO2</th><th>SO2</th><th>CO</th><th>O3</th>
                <th>质量评分</th>
            </tr>
        </thead>
        <tbody>
            {% for r in records %}
            <tr>
                <td>{{ r.record_date }}</td>
                <td><strong>{{ r.aqi }}</strong></td>
                <td>{{ r.quality_level }}</td>
                <td {% if r.pm25 and r.pm25 > 75 %}style="color:#d87a80;font-weight:600;"{% endif %}>{{ r.pm25|default:"-" }}</td>
                <td {% if r.pm10 and r.pm10 > 150 %}style="color:#d87a80;font-weight:600;"{% endif %}>{{ r.pm10|default:"-" }}</td>
                <td>{{ r.no2|default:"-" }}</td>
                <td>{{ r.so2|default:"-" }}</td>
                <td>{{ r.co|default:"-" }}</td>
                <td>{{ r.o3|default:"-" }}</td>
                <td>{{ r.quality_score }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="10" style="text-align:center;padding:40px;color:#aaa;">暂无数据</td></tr>
            {% endfor %}
        </tbody>
    </table>

    {% if page_obj.paginator.num_pages > 1 %}
    <div class="pagination">
        {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}&year={{ filter_year }}">&laquo;</a>
        {% endif %}
        {% for num in page_obj.paginator.page_range %}
            {% if num == page_obj.number %}
                <span class="active">{{ num }}</span>
            {% elif num == 1 or num == page_obj.paginator.num_pages %}
                <a href="?page={{ num }}&year={{ filter_year }}">{{ num }}</a>
            {% elif num >= page_obj.number|add:"-2" and num <= page_obj.number|add:"2" %}
                <a href="?page={{ num }}&year={{ filter_year }}">{{ num }}</a>
            {% endif %}
        {% endfor %}
        {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}&year={{ filter_year }}">&raquo;</a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}