{% 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>
      
      {% if recent_notifications %}
      <div class="list-group list-group-flush">
        {% for notification in recent_notifications %}
        <div class="list-group-item px-0">
          <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
              <div>
                <div class="fw-bold text-primary">
                  {% if notification.notif_type == 'account_created' %}
                    <i class="fas fa-user-plus me-1"></i>Account Created
                  {% elif notification.notif_type == 'room_invite' %}
                    <i class="fas fa-door-open me-1"></i>Room Invitation
                  {% elif notification.notif_type == 'room_invite_removed' %}
                    <i class="fas fa-door-closed me-1"></i>Room Invitation Removed
                  {% elif notification.notif_type == 'conversation_invite' %}
                    <i class="fas fa-comments me-1"></i>Conversation Invitation
                  {% elif notification.notif_type == 'conversation_invite_removed' %}
                    <i class="fas fa-comment-slash me-1"></i>Conversation Invitation Removed
                  {% elif notification.notif_type == 'conversation_message' %}
                    <i class="fas fa-comment me-1"></i>New Message
                  {% else %}
                    {{ notification.notif_type|replace('_', ' ')|title }}
                  {% endif %}
                </div>
                <small class="text-muted">
                  {% if notification.notif_type == 'account_created' %}
                    Welcome to DocuPulse! Your account has been created successfully.
                  {% elif notification.notif_type == 'room_invite' and notification.sender and notification.details %}
                    {{ notification.sender.username }} {{ notification.sender.last_name }} invited you to join room "{{ notification.details.room_name }}"
                  {% elif notification.notif_type == 'room_invite_removed' and notification.sender and notification.details %}
                    {{ notification.sender.username }} {{ notification.sender.last_name }} removed your invitation to room "{{ notification.details.room_name }}"
                  {% elif notification.notif_type == 'conversation_invite' and notification.sender and notification.details %}
                    {{ notification.sender.username }} {{ notification.sender.last_name }} invited you to conversation "{{ notification.details.conversation_name }}"
                  {% elif notification.notif_type == 'conversation_invite_removed' and notification.sender and notification.details %}
                    {{ notification.sender.username }} {{ notification.sender.last_name }} removed your invitation to conversation "{{ notification.details.conversation_name }}"
                  {% elif notification.notif_type == 'conversation_message' and notification.sender and notification.details %}
                    {{ notification.sender.username }} {{ notification.sender.last_name }} sent a message in conversation "{{ notification.details.conversation_name }}"
                  {% elif notification.details and notification.details.message %}
                    {{ notification.details.message }}
                  {% endif %}
                </small>
                <div class="mt-1">
                  <small class="text-muted">
                    {{ notification.timestamp.strftime('%Y-%m-%d %H:%M') }}
                  </small>
                </div>
              </div>
            </div>
            
            {% if notification.notif_type in ['room_invite', 'room_invite_removed'] and notification.details and notification.details.room_id %}
            <a href="{{ url_for('rooms.room', room_id=notification.details.room_id) }}" class="btn btn-sm btn-outline-primary" style="background-color: white; border: 1px solid var(--primary-color); color: var(--primary-color);" onmouseover="this.style.backgroundColor='var(--primary-color)'; this.querySelector('i').style.color='white'" onmouseout="this.style.backgroundColor='white'; this.querySelector('i').style.color='var(--primary-color)'">
              <i class="fas fa-external-link-alt"></i>
            </a>
            {% elif notification.notif_type in ['conversation_invite', 'conversation_invite_removed', 'conversation_message'] and notification.details and notification.details.conversation_id %}
            <a href="{{ url_for('conversations.conversation', conversation_id=notification.details.conversation_id) }}" class="btn btn-sm btn-outline-primary" style="background-color: white; border: 1px solid var(--primary-color); color: var(--primary-color);" onmouseover="this.style.backgroundColor='var(--primary-color)'; this.querySelector('i').style.color='white'" onmouseout="this.style.backgroundColor='white'; this.querySelector('i').style.color='var(--primary-color)'">
              <i class="fas fa-external-link-alt"></i>
            </a>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="text-center text-muted py-3">
        <i class="fas fa-info-circle mb-2"></i>
        <p class="mb-0">No recent notifications</p>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endmacro %}