{% extends "base.html" %}
{% set title = "消息通知" %}
{% set page = "messages" %}

{% block content %}
<section class="page-header" style="background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%); color: white; padding: 60px 20px; border-radius: 20px; text-align: center; margin-bottom: 32px; box-shadow: var(--shadow-lg);">
  <h1 style="font-size: 2.5rem; margin-bottom: 16px; color: white;"><i class="ri-notification-3-line" style="margin-right:8px; opacity:0.9;"></i>消息通知</h1>
  <p style="font-size: 1.1rem; opacity: 0.9; max-width: 720px; margin: 0 auto;">查看系统通知与会员变更提醒</p>
</section>

<div id="messageMsg" class="form-msg" style="display:none; margin-bottom: 24px;"></div>

<div class="card" style="padding: 32px; border-radius: 16px; box-shadow: var(--shadow-md);">
  <div style="display:flex; align-items:center; justify-content: space-between; gap: 12px; margin-bottom: 16px;">
    <h3 style="display: flex; align-items: center; gap: 8px; margin: 0;">
      <i class="ri-mail-open-line" style="color: var(--brand);"></i> 我的消息
    </h3>
    <div style="display:flex; align-items:center; gap: 8px;">
      <span id="messageUnreadBadge" class="badge badge-warning" style="display:none;"></span>
      <button id="messageUnreadOnlyBtn" type="button" class="btn btn-sm">仅未读</button>
      <button id="messageAllBtn" type="button" class="btn btn-sm btn-primary">全部</button>
    </div>
  </div>
  <div id="messageList" class="list" style="display: flex; flex-direction: column; gap: 12px;"></div>
  <div id="messagePager" class="toolbar" style="justify-content: space-between; margin-top: 16px;"></div>
</div>
{% endblock %}