{% macro notification_overview(unread_count, recent_notifications) %}
<div class="masonry-card">
  <div class="card shadow-sm">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="card-title mb-0"><i class="fas fa-bell me-2"></i>Notifications</h5>
        <a href="{{ url_for('main.notifications') }}" class="btn btn-primary btn-sm">View All</a>
      </div>
      <div class="d-flex flex-column">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <div class="d-flex align-items-center">
            <i class="fas fa-envelope me-2 icon-primary"></i>
            <span class="text-muted">Unread:</span>
          </div>
          <div class="fw-bold text-primary">{{ unread_count }}</div>
        </div>
      </div>

      {% if recent_notifications %}
      <hr class="my-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h6 class="mb-0 text-muted">Recent Notifications</h6>
      </div>
      <div class="list-group list-group-flush">
        {% for notification in recent_notifications %}
        <div class="list-group-item list-group-item-action px-0">
          <div class="d-flex justify-content-between align-items-center">
            <div>
              {% if notification.notif_type == 'account_created' %}
                <div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
                  <i class="fas fa-user-plus me-1"></i>Account Created
                </div>
                <small class="text-muted">
                  Welcome to DocuPulse! Your account has been created successfully.
                </small>
              {% elif notification.notif_type == 'room_invite' %}
                <div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
                  <i class="fas fa-door-open me-1"></i>Room Invitation
                </div>
                <small class="text-muted">
                  {% if notification.sender %}
                    {{ notification.sender.username }} invited you to join room "{{ notification.details.room_name }}"
                  {% endif %}
                </small>
              {% elif notification.notif_type == 'conversation_invite' %}
                <div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
                  <i class="fas fa-comments me-1"></i>Conversation Invitation
                </div>
                <small class="text-muted">
                  {% if notification.sender %}
                    {{ notification.sender.username }} invited you to a conversation
                  {% endif %}
                </small>
              {% elif notification.notif_type == 'conversation_message' %}
                <div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
                  <i class="fas fa-comment me-1"></i>New Message
                </div>
                <small class="text-muted">
                  {% if notification.sender %}
                    {{ notification.sender.username }} sent a message in "{{ notification.details.conversation_name }}"
                  {% endif %}
                </small>
              {% else %}
                <div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
                  {{ notification.notif_type|replace('_', ' ')|title }}
                </div>
                <small class="text-muted">
                  {% if notification.details and notification.details.message %}
                    {{ notification.details.message }}
                  {% endif %}
                </small>
              {% endif %}
              <div class="mt-1">
                <small class="text-muted">
                  {{ notification.timestamp.strftime('%Y-%m-%d %H:%M') }}
                </small>
              </div>
            </div>
            {% if not notification.read %}
            <span class="badge bg-primary rounded-pill">New</span>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="text-muted small text-center mt-3">No recent notifications</div>
      {% endif %}
    </div>
  </div>
</div>
{% endmacro %}