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

{% block content %}
<div class="filter-bar">
    <form method="GET" action="{% url 'dashboard:aqi_data' %}" style="display:flex;flex-wrap:wrap;gap:12px;align-items:end;width:100%;">
        <div class="filter-group">
            <label>年份</label>
            <select name="year">
                <option value="">全部</option>
                {% for y in years %}
                <option value="{{ y }}" {% if filters.year == y|stringformat:"d" %}selected{% endif %}>{{ y }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="filter-group">
            <label>月份</label>
            <select name="month">
                <option value="">全部</option>
                {% for m in "123456789" %}
                <option value="{{ forloop.counter }}" {% if filters.month == forloop.counter|stringformat:"d" %}selected{% endif %}>{{ forloop.counter }}月</option>
                {% endfor %}
                {% for m in "abc" %}
                <option value="{{ forloop.counter|add:9 }}" {% if filters.month == forloop.counter|add:9|stringformat:"d" %}selected{% endif %}>{{ forloop.counter|add:9 }}月</option>
                {% endfor %}
            </select>
        </div>
        <div class="filter-group">
            <label>质量等级</label>
            <select name="quality_level">
                <option value="">全部</option>
                <option value="优" {% if filters.quality_level == "优" %}selected{% endif %}>优</option>
                <option value="良" {% if filters.quality_level == "良" %}selected{% endif %}>良</option>
                <option value="轻度污染" {% if filters.quality_level == "轻度污染" %}selected{% endif %}>轻度污染</option>
                <option value="中度污染" {% if filters.quality_level == "中度污染" %}selected{% endif %}>中度污染</option>
                <option value="重度污染" {% if filters.quality_level == "重度污染" %}selected{% endif %}>重度污染</option>
                <option value="严重污染" {% if filters.quality_level == "严重污染" %}selected{% endif %}>严重污染</option>
            </select>
        </div>
        <div class="filter-group">
            <label>AQI最小值</label>
            <input type="number" name="aqi_min" value="{{ filters.aqi_min }}" placeholder="0" style="width:80px;">
        </div>
        <div class="filter-group">
            <label>AQI最大值</label>
            <input type="number" name="aqi_max" value="{{ filters.aqi_max }}" placeholder="500" style="width:80px;">
        </div>
        <button type="submit" class="btn btn-primary">查询</button>
        <a href="{% url 'dashboard:aqi_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>排名</th>
                <th>PM2.5</th><th>PM10</th><th>NO2</th><th>SO2</th><th>CO</th><th>O3</th>
            </tr>
        </thead>
        <tbody>
            {% for r in records %}
            <tr>
                <td>{{ r.record_date }}</td>
                <td><strong>{{ r.aqi }}</strong></td>
                <td>
                    <span style="display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px;
                        {% if r.quality_level == '优' %}background:#e6f7f2;color:#27ae60;
                        {% elif r.quality_level == '良' %}background:#e6f0ff;color:#5ab1ef;
                        {% elif r.quality_level == '轻度污染' %}background:#fff4e6;color:#f5a623;
                        {% elif r.quality_level == '中度污染' %}background:#fff0f0;color:#d87a80;
                        {% else %}background:#fde;color:#c23531;{% endif %}">
                        {{ r.quality_level }}
                    </span>
                </td>
                <td>{{ r.rank|default:"-" }}</td>
                <td>{{ r.pm25|default:"-" }}</td>
                <td>{{ r.pm10|default:"-" }}</td>
                <td>{{ r.no2|default:"-" }}</td>
                <td>{{ r.so2|default:"-" }}</td>
                <td>{{ r.co|default:"-" }}</td>
                <td>{{ r.o3|default:"-" }}</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={{ filters.year }}&month={{ filters.month }}&quality_level={{ filters.quality_level }}&aqi_min={{ filters.aqi_min }}&aqi_max={{ filters.aqi_max }}">&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={{ filters.year }}&month={{ filters.month }}&quality_level={{ filters.quality_level }}&aqi_min={{ filters.aqi_min }}&aqi_max={{ filters.aqi_max }}">{{ num }}</a>
            {% elif num >= page_obj.number|add:"-2" and num <= page_obj.number|add:"2" %}
                <a href="?page={{ num }}&year={{ filters.year }}&month={{ filters.month }}&quality_level={{ filters.quality_level }}&aqi_min={{ filters.aqi_min }}&aqi_max={{ filters.aqi_max }}">{{ num }}</a>
            {% endif %}
        {% endfor %}
        {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}&year={{ filters.year }}&month={{ filters.month }}&quality_level={{ filters.quality_level }}&aqi_min={{ filters.aqi_min }}&aqi_max={{ filters.aqi_max }}">&raquo;</a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}