# ====================================================================
# FILE 1: templates/user_notifications.html (CLEAN - NO INLINE CSS)
# ====================================================================

{% extends "base.html" %}

{% block title %}My Notifications - M.C.A. Hogarth Gallery{% endblock %}

{% block header_content %}
<nav class="gallery-breadcrumb">
    <a href="/">mcahogarth.org</a> &gt; 
    <a href="/gallery/">Gallery</a> &gt; 
    <span>Notifications</span>
</nav>
{% endblock %}

{% block main_content %}
<div class="notifications-container">
    <!-- Header without underline -->
    <div class="notifications-header">
        <h1 class="notifications-title">My Notifications</h1>
        {% if total_count > 0 %}
            <span class="notifications-count">{{ total_count }} total</span>
        {% endif %}
    </div>
    
    {% if empty_state %}
        <!-- Empty state -->
        <div class="notifications-empty">
            <div class="empty-icon">🔔</div>
            <h3>No notifications yet</h3>
            <p>When you have activity in the gallery, notifications will appear here.</p>
            <div class="empty-actions">
                <a href="/gallery/" class="btn-primary">Browse Gallery</a>
                <a href="/gallery/user/{{ profile_username }}/favorites" class="btn-secondary">My Favorites</a>
            </div>
        </div>
    {% else %}
        <!-- Single notifications block -->
        <div class="notifications-block">
            {% for notification in notifications %}
                <div class="notification-item">
                    <!-- Header: Title and prominent date -->
                    <div class="notification-header">
                        <h3 class="notification-title">{{ notification.title }}</h3>
                        <div class="notification-date">
                            {{ notification.created_date.strftime('%b %d, %Y at %I:%M %p') if notification.created_date else 'Recently' }}
                        </div>
                    </div>
                    
                    <!-- Message -->
                    {% if notification.message %}
                        <div class="notification-message">{{ notification.message }}</div>
                    {% endif %}
                    
                    <!-- Meta: badges and actions -->
                    <div class="notification-meta">
                        <div class="notification-badges">
                            <!-- Type badge -->
                            <span class="notification-type {{ notification.type or notification.notification_type }}">
                                {% if notification.type == 'announcement' or notification.notification_type == 'announcement' %}
                                    Announcement
                                {% elif notification.type == 'request_completed' or notification.notification_type == 'request_completed' %}
                                    Request Completed
                                {% elif notification.type == 'welcome' or notification.notification_type == 'welcome' %}
                                    Welcome
                                {% else %}
                                    Update
                                {% endif %}
                            </span>
                            
                            <!-- "New" badge for recent notifications -->
                            {% if notification.created_date %}
                                {% set days_old = ((moment.utcnow() if moment else (datetime.datetime.now())) - notification.created_date).days %}
                                {% if days_old < 7 %}
                                    <span class="notification-new-badge">New</span>
                                {% endif %}
                            {% endif %}
                        </div>
                        
                        <!-- Actions -->
                        <div class="notification-actions">
                            {% if notification.related_image_id %}
                                <a href="/gallery/image/{{ notification.related_image_id }}" class="notification-link">
                                    View Image →
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
        
        <!-- Pagination -->
        {% if total_pages > 1 %}
            <div class="notifications-pagination">
                {% if has_prev %}
                    <a href="/gallery/user/{{ profile_username }}/notifications?page={{ prev_page }}" class="pagination-button">
                        ← Previous
                    </a>
                {% else %}
                    <span class="pagination-button disabled">← Previous</span>
                {% endif %}
                
                <span class="pagination-info">
                    Page {{ current_page }} of {{ total_pages }}
                </span>
                
                {% if has_next %}
                    <a href="/gallery/user/{{ profile_username }}/notifications?page={{ next_page }}" class="pagination-button">
                        Next →
                    </a>
                {% else %}
                    <span class="pagination-button disabled">Next →</span>
                {% endif %}
            </div>
        {% endif %}
    {% endif %}
    
    <!-- Back navigation -->
    <div class="notifications-footer">
        <a href="/gallery/user/{{ profile_username }}/profile" class="back-link">
            ← Back to Profile
        </a>
    </div>
</div>
{% endblock %}

# ====================================================================
# FILE 2: static/css/notifications.css (ALL CSS GOES HERE)
# ====================================================================

/* 
Notifications Page Styling - Compact Design
Follows Development Guide patterns for time-based theming
*/

/* Main container */
.notifications-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* Header - no underline */
.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 30px;
}

.notifications-title {
    color: var(--header-footer-bg) !important;
    font-size: 2rem;
    margin: 0;
    font-family: 'Georgia', serif;
}

.notifications-count {
    color: var(--text-color-secondary) !important;
    font-size: 1rem;
    font-weight: normal;
}

/* Single block for all notifications */
.notifications-block {
    background-color: var(--speech-bg-color) !important;
    border: 2px solid var(--panel-border-color) !important;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
}

/* Individual notification items - compact list */
.notification-item {
    padding: 15px 0;
    border-bottom: 1px solid var(--panel-border-color);
    transition: background-color 0.2s ease;
}

.notification-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.notification-item:hover {
    background-color: var(--panel-bg-color) !important;
    margin: 0 -15px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 4px;
}

/* Header with title and prominent date */
.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 15px;
}

.notification-title {
    color: var(--text-color) !important;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    flex-grow: 1;
    font-family: 'Georgia', serif;
}

/* Prominent date styling */
.notification-date {
    color: var(--text-color-secondary) !important;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    background-color: var(--panel-bg-color) !important;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--panel-border-color);
}

/* Message text */
.notification-message {
    color: var(--text-color) !important;
    line-height: 1.4;
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    font-family: 'Georgia', serif;
}

/* Meta row with badges and actions */
.notification-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.notification-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Type badges */
.notification-type {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: var(--panel-border-color) !important;
    color: var(--text-color) !important;
}

.notification-type.announcement {
    background-color: var(--header-footer-bg) !important;
    color: var(--featured-text) !important;
}

.notification-type.request_completed {
    background-color: var(--button-color) !important;
    color: var(--featured-text) !important;
}

.notification-type.welcome {
    background-color: var(--panel-highlight-border) !important;
    color: var(--featured-text) !important;
}

/* "New" badge */
.notification-new-badge {
    background-color: var(--button-color) !important;
    color: var(--featured-text) !important;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Action links */
.notification-actions {
    display: flex;
    gap: 12px;
}

.notification-link {
    color: var(--button-color) !important;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    font-family: 'Georgia', serif;
}

.notification-link:hover {
    color: var(--header-footer-bg) !important;
    text-decoration: underline;
}

/* Empty state */
.notifications-empty {
    text-align: center;
    padding: 60px 20px;
    background-color: var(--speech-bg-color) !important;
    border: 2px solid var(--panel-border-color) !important;
    border-radius: 8px;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    opacity: 0.6;
}

.notifications-empty h3 {
    color: var(--text-color) !important;
    margin-bottom: 10px;
    font-family: 'Georgia', serif;
}

.notifications-empty p {
    color: var(--text-color-secondary) !important;
    margin-bottom: 25px;
    font-family: 'Georgia', serif;
}

.empty-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons */
.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Georgia', serif;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--header-footer-bg) !important;
    color: var(--featured-text) !important;
    border: none;
}

.btn-primary:hover {
    background-color: var(--panel-highlight-border) !important;
    color: var(--featured-text) !important;
    text-decoration: none;
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-color) !important;
    border: 2px solid var(--panel-border-color);
}

.btn-secondary:hover {
    background-color: var(--panel-bg-color) !important;
    color: var(--text-color) !important;
    text-decoration: none;
}

/* Pagination */
.notifications-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 30px 0;
}

.pagination-button {
    background-color: var(--button-color) !important;
    color: var(--featured-text) !important;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    font-family: 'Georgia', serif;
}

.pagination-button:hover {
    background-color: var(--header-footer-bg) !important;
    transform: translateY(-1px);
    text-decoration: none;
}

.pagination-button.disabled {
    background-color: var(--panel-border-color) !important;
    color: var(--text-color-secondary) !important;
    cursor: not-allowed;
    transform: none;
}

.pagination-info {
    color: var(--text-color-secondary) !important;
    font-size: 0.875rem;
    font-family: 'Georgia', serif;
}

/* Footer */
.notifications-footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--panel-border-color);
}

.back-link {
    color: var(--text-color-secondary) !important;
    text-decoration: none;
    font-family: 'Georgia', serif;
}

.back-link:hover {
    color: var(--header-footer-bg) !important;
    text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .notifications-container {
        padding: 15px;
    }
    
    .notifications-block {
        padding: 20px;
    }
    
    .notification-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .notification-date {
        align-self: flex-end;
    }
    
    .notification-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .notification-actions {
        align-self: flex-end;
    }
    
    .notifications-pagination {
        flex-direction: column;
        gap: 10px;
    }
    
    .empty-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
        max-width: 200px;
        text-align: center;
    }
}