{% extends 'base.html' %}

{% block title %}我的通知 - 图书管理系统{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/notifications.css') }}">
{% endblock %}

{% block content %}
<div class="notifications-container">
    <div class="page-header">
        <h1>我的通知</h1>
        <div class="notification-actions">
            {% if pagination.items and not (unread_only and pagination.total == 0) %}
                <a href="{{ url_for('announcement.mark_all_as_read') }}" class="btn btn-outline-primary">
                    <i class="fas fa-check-double"></i> 全部标为已读
                </a>
            {% endif %}
        </div>
    </div>

    <div class="filter-tabs">
        <a href="{{ url_for('announcement.user_notifications') }}" class="filter-tab {% if not unread_only %}active{% endif %}">所有通知</a>
        <a href="{{ url_for('announcement.user_notifications', unread_only=1) }}" class="filter-tab {% if unread_only %}active{% endif %}">未读通知</a>
    </div>

    <div class="notifications-list">
        {% if pagination.items %}
            {% for notification in pagination.items %}
                <div class="notification-card {% if notification.status == 0 %}unread{% endif %}">
                    <div class="notification-content">
                        <h3 class="notification-title">
                            <a href="{{ url_for('announcement.view_notification', notification_id=notification.id) }}">{{ notification.title }}</a>
                            {% if notification.status == 0 %}
                                <span class="unread-badge">未读</span>
                            {% endif %}
                        </h3>
                        <div class="notification-text">{{ notification.content|striptags|truncate(150) }}</div>
                        <div class="notification-meta">
                            <span class="notification-type">{{ notification.type }}</span>
                            <span class="notification-time">{{ notification.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                        </div>
                    </div>
                </div>
            {% endfor %}

            <!-- 分页 -->
            <div class="pagination-container">
                {% if pagination.pages > 1 %}
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        {% if pagination.has_prev %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('announcement.user_notifications', page=pagination.prev_num, unread_only=1 if unread_only else 0) }}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {% endif %}

                        {% for page_num in pagination.iter_pages(left_edge=2, right_edge=2, left_current=2, right_current=2) %}
                            {% if page_num %}
                                {% if page_num == pagination.page %}
                                <li class="page-item active">
                                    <a class="page-link" href="{{ url_for('announcement.user_notifications', page=page_num, unread_only=1 if unread_only else 0) }}">{{ page_num }}</a>
                                </li>
                                {% else %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('announcement.user_notifications', page=page_num, unread_only=1 if unread_only else 0) }}">{{ page_num }}</a>
                                </li>
                                {% endif %}
                            {% else %}
                                <li class="page-item disabled">
                                    <a class="page-link" href="#">...</a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        {% if pagination.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('announcement.user_notifications', page=pagination.next_num, unread_only=1 if unread_only else 0) }}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            </div>
        {% else %}
            <div class="no-records">
                <i class="fas fa-bell-slash"></i>
                <p>{{ '暂无未读通知' if unread_only else '暂无通知' }}</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/notifications.js') }}"></script>
{% endblock %}