{% extends "base.html" %}

{% block title %}空气质量数据查询{% endblock %}

{% block content %}
<section class="hero">
    <h1>空气质量数据筛选查询</h1>
    <p>支持按年份、月份、空气质量等级、AQI 区间检索数据，适合演示系统查询能力，也便于后续导出和专题分析。</p>
</section>

<section class="panel" style="margin-top: 24px;">
    <h2>筛选条件</h2>
    <form method="get" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;align-items:end;">
        <div>
            <label>年份</label>
            <select name="year" style="width:100%;padding:10px;border:1px solid var(--border);border-radius:12px;">
                <option value="">全部</option>
                {% for year in years %}
                <option value="{{ year }}" {% if filters.year == year|stringformat:"s" %}selected{% endif %}>{{ year }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label>月份</label>
            <select name="month" style="width:100%;padding:10px;border:1px solid var(--border);border-radius:12px;">
                <option value="">全部</option>
                {% for month in months %}
                <option value="{{ month }}" {% if filters.month == month|stringformat:"s" %}selected{% endif %}>{{ month }}月</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label>质量等级</label>
            <select name="quality_level" style="width:100%;padding:10px;border:1px solid var(--border);border-radius:12px;">
                <option value="">全部</option>
                {% for level in levels %}
                <option value="{{ level }}" {% if filters.quality_level == level %}selected{% endif %}>{{ level }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label>AQI 最小值</label>
            <input type="number" name="aqi_min" value="{{ filters.aqi_min }}" style="width:100%;padding:10px;border:1px solid var(--border);border-radius:12px;">
        </div>
        <div>
            <label>AQI 最大值</label>
            <input type="number" name="aqi_max" value="{{ filters.aqi_max }}" style="width:100%;padding:10px;border:1px solid var(--border);border-radius:12px;">
        </div>
        <div style="display:flex;gap:10px;">
            <button type="submit" style="padding:10px 18px;border:none;border-radius:12px;background:var(--accent);color:#fff;cursor:pointer;">查询</button>
            <a href="/query/" style="padding:10px 18px;border-radius:12px;background:var(--accent-soft);color:var(--text);text-decoration:none;">重置</a>
        </div>
    </form>
</section>

<section class="stats">
    <div class="stat-card">
        <div class="label">匹配记录数</div>
        <div class="value">{{ query_stats.count|default:0 }}</div>
    </div>
    <div class="stat-card">
        <div class="label">平均 AQI</div>
        <div class="value">{{ query_stats.avg_aqi|default:0|floatformat:2 }}</div>
    </div>
    <div class="stat-card">
        <div class="label">最低 AQI</div>
        <div class="value">{{ query_stats.min_aqi|default:0 }}</div>
    </div>
    <div class="stat-card">
        <div class="label">最高 AQI</div>
        <div class="value">{{ query_stats.max_aqi|default:0 }}</div>
    </div>
</section>

<section class="panel">
    <h2>查询结果</h2>
    <p>按日期倒序显示，每页 20 条。这个页面可以作为毕业设计中的“数据检索模块”。</p>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>日期</th>
                    <th>年份</th>
                    <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>
                </tr>
            </thead>
            <tbody>
                {% for item in records %}
                <tr>
                    <td>{{ item.record_date }}</td>
                    <td>{{ item.year }}</td>
                    <td>{{ item.month }}</td>
                    <td>{{ item.aqi }}</td>
                    <td>{{ item.quality_level }}</td>
                    <td>{{ item.pm25 }}</td>
                    <td>{{ item.pm10 }}</td>
                    <td>{{ item.no2 }}</td>
                    <td>{{ item.so2 }}</td>
                    <td>{{ item.co }}</td>
                    <td>{{ item.o3 }}</td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="11">没有匹配到数据。</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div style="margin-top:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
        {% if page_obj.has_previous %}
        <a href="?year={{ filters.year }}&month={{ filters.month }}&quality_level={{ filters.quality_level }}&aqi_min={{ filters.aqi_min }}&aqi_max={{ filters.aqi_max }}&page={{ page_obj.previous_page_number }}" style="text-decoration:none;color:var(--accent);">上一页</a>
        {% endif %}
        <span>第 {{ page_obj.number }} / {{ page_obj.paginator.num_pages }} 页</span>
        {% if page_obj.has_next %}
        <a href="?year={{ filters.year }}&month={{ filters.month }}&quality_level={{ filters.quality_level }}&aqi_min={{ filters.aqi_min }}&aqi_max={{ filters.aqi_max }}&page={{ page_obj.next_page_number }}" style="text-decoration:none;color:var(--accent);">下一页</a>
        {% endif %}
    </div>
</section>

<div class="footer-note">
    可与首页可视化模块配合使用：首页偏分析展示，查询页偏明细检索。
</div>
{% endblock %}