{% extends 'base.html' %}

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

{% block head %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
<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-fresh-action">
                    <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-icon-area">
                        <!-- Example: could use different icons based on notification.type -->
                        {% if notification.status == 0 %}
                            <i class="fas fa-envelope"></i> {# Icon for unread #}
                        {% else %}
                            <i class="fas fa-envelope-open-text"></i> {# Icon for read #}
                        {% endif %}
                    </div>
                    <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(120) }}</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=1, right_edge=1, left_current=1, right_current=1) %}
                            {% 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">
                {# Suggestion: Use a more vibrant/friendly icon or illustration #}
                <img src="data:image/svg+xml;charset=UTF-8,%3csvg width='80' height='80' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%23A8E6CF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M12 16.5C12.9665 16.5 13.75 15.7165 13.75 14.75C13.75 13.7835 12.9665 13 12 13C11.0335 13 10.25 13.7835 10.25 14.75C10.25 15.7165 11.0335 16.5 12 16.5Z' fill='%23A8E6CF'/%3e%3cpath d='M12 7V10' stroke='%23A8E6CF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e" alt="No notifications icon" class="no-records-icon">
                <p>{{ '还没有未读通知哦～' if unread_only else '这里空空如也，暂时没有新通知。' }}</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
{# <script src="{{ url_for('static', filename='js/notifications.js') }}"></script> #}
{# Assuming notifications.js is for interactivity not directly tied to styling #}
{% endblock %}