{% extends "base.html" %}

{% block title %}政策事件 - AgomTradePro{% endblock %}

{% block extra_css %}
<style>
    .policy-events-page {
        max-width: 1400px;
        margin: 0 auto;
        padding: 20px;
    }

    .policy-events-page .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }

    .policy-events-page .page-header h1 {
        margin: 0;
        font-size: 28px;
    }

    .filter-bar {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .filter-form {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        align-items: end;
    }

    .filter-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .filter-group label {
        font-size: 12px;
        font-weight: 600;
        color: #666;
    }

    .filter-group select,
    .filter-group input {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }

    .events-table-container {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .events-table {
        width: 100%;
        border-collapse: collapse;
    }

    .events-table th,
    .events-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }

    .events-table th {
        background: #f8f9fa;
        font-weight: 600;
        color: #495057;
    }

    .events-table tr:hover {
        background: #f8f9fa;
    }

    .level-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
        color: white;
    }

    .level-badge.p0 { background: #6c757d; }
    .level-badge.p1 { background: #ffc107; }
    .level-badge.p2 { background: #fd7e14; }
    .level-badge.p3 { background: #dc3545; }

    .btn-sm {
        padding: 4px 8px;
        font-size: 12px;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #999;
    }

    .pagination {
        display: flex;
        justify-content: center;
        gap: 5px;
        margin-top: 20px;
    }

    .pagination a,
    .pagination span {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        text-decoration: none;
        color: #333;
    }

    .pagination .current {
        background: #007bff;
        color: white;
        border-color: #007bff;
    }

    .pagination a:hover {
        background: #f8f9fa;
    }
</style>
{% endblock %}

{% block content %}
<div class="policy-events-page">
    <div class="page-header">
        <h1>政策事件</h1>
        <a href="{% url 'policy:event-create' %}" class="btn btn-primary">+ 新增事件</a>
    </div>

    <!-- 筛选 -->
    <div class="filter-bar">
        <form method="get" class="filter-form">
            <div class="filter-group">
                <label>档位</label>
                <select name="level">
                    <option value="">全部档位</option>
                    {% for val, label in levels %}
                    <option value="{{ val }}" {% if val == selected_level %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="filter-group">
                <label>开始日期</label>
                <input type="date" name="start_date" value="{{ selected_start }}">
            </div>
            <div class="filter-group">
                <label>结束日期</label>
                <input type="date" name="end_date" value="{{ selected_end }}">
            </div>
            <div class="filter-group">
                <label></label>
                <button type="submit" class="btn btn-primary">筛选</button>
            </div>
            <div class="filter-group">
                <label></label>
                <a href="." class="btn btn-secondary btn-sm">重置</a>
            </div>
        </form>
    </div>

    <!-- 事件表格 -->
    <div class="events-table-container">
        {% if events %}
        <table class="events-table">
            <thead>
                <tr>
                    <th>日期</th>
                    <th>档位</th>
                    <th>标题</th>
                    <th>描述</th>
                    <th>证据</th>
                </tr>
            </thead>
            <tbody>
                {% for event in events %}
                <tr>
                    <td>{{ event.event_date }}</td>
                    <td><span class="level-badge {{ event.level|lower }}">{{ event.get_level_display }}</span></td>
                    <td>{{ event.title }}</td>
                    <td>{{ event.description|truncatechars:100 }}</td>
                    <td>
                        {% if event.evidence_url %}
                        <a href="{{ event.evidence_url }}" target="_blank">查看</a>
                        {% else %}
                        -
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <!-- 分页 -->
        {% if is_paginated %}
        <div class="pagination">
            {% if page_obj.has_previous %}
                <a href="?page=1{% if selected_level %}&level={{ selected_level }}{% endif %}{% if selected_start %}&start_date={{ selected_start }}{% endif %}{% if selected_end %}&end_date={{ selected_end }}{% endif %}">&laquo; 首页</a>
                <a href="?page={{ page_obj.previous_page_number }}{% if selected_level %}&level={{ selected_level }}{% endif %}{% if selected_start %}&start_date={{ selected_start }}{% endif %}{% if selected_end %}&end_date={{ selected_end }}{% endif %}">上一页</a>
            {% endif %}

            <span class="current">第 {{ page_obj.number }} / {{ page_obj.paginator.num_pages }} 页</span>

            {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}{% if selected_level %}&level={{ selected_level }}{% endif %}{% if selected_start %}&start_date={{ selected_start }}{% endif %}{% if selected_end %}&end_date={{ selected_end }}{% endif %}">下一页</a>
                <a href="?page={{ page_obj.paginator.num_pages }}{% if selected_level %}&level={{ selected_level }}{% endif %}{% if selected_start %}&start_date={{ selected_start }}{% endif %}{% if selected_end %}&end_date={{ selected_end }}{% endif %}">末页 &raquo;</a>
            {% endif %}
        </div>
        {% endif %}
        {% else %}
        <div class="empty-state">
            <p>暂无政策事件。</p>
            <a href="{% url 'policy:event-create' %}" class="btn btn-primary">添加第一个事件</a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}