<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Norda Biznes Hub - platforma networkingu Regionalnej Izby Przedsiębiorców Norda Biznes">
    <meta name="author" content="Norda Biznes">
    <meta name="robots" content="index, follow">
    <meta name="page-view-id" content="{{ page_view_id|default('') }}">

    <title>{% block title %}Norda Biznes Hub{% endblock %}</title>

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/favicon.ico') }}">

    <!-- Fonts -->
    <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Styles -->
    <style>
        /* ============================================================
         * RESET & BASE STYLES
         * ============================================================ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            /* Colors - Professional blue palette */
            --primary: #2563eb;
            --primary-dark: #1e40af;
            --primary-light: #3b82f6;
            --secondary: #64748b;
            --success: #10b981;
            --warning: #f59e0b;
            --error: #ef4444;
            --background: #f8fafc;
            --surface: #ffffff;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --border: #e2e8f0;

            /* Spacing */
            --spacing-xs: 0.25rem;
            --spacing-sm: 0.5rem;
            --spacing-md: 1rem;
            --spacing-lg: 1.5rem;
            --spacing-xl: 2rem;
            --spacing-2xl: 3rem;

            /* Typography */
            --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --font-size-sm: 0.875rem;
            --font-size-base: 1rem;
            --font-size-lg: 1.125rem;
            --font-size-xl: 1.25rem;
            --font-size-2xl: 1.5rem;
            --font-size-3xl: 1.875rem;

            /* Shadows */
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

            /* Border radius */
            --radius-sm: 0.25rem;
            --radius: 0.5rem;
            --radius-lg: 0.75rem;
            --radius-xl: 1rem;

            /* Transitions */
            --transition: all 0.2s ease-in-out;
        }

        body {
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            line-height: 1.6;
            color: var(--text-primary);
            background-color: var(--background);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* ============================================================
         * LAYOUT
         * ============================================================ */
        .container {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 var(--spacing-md);
        }

        .container-narrow {
            max-width: 768px;
        }

        main {
            flex: 1;
            padding: var(--spacing-xl) 0;
        }

        /* ============================================================
         * HEADER & NAVIGATION
         * ============================================================ */
        header {
            background-color: var(--surface);
            border-bottom: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-md) 0;
        }

        .nav-brand {
            font-size: var(--font-size-xl);
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .nav-brand:hover {
            color: var(--primary-dark);
        }

        .nav-menu {
            display: flex;
            gap: var(--spacing-lg);
            align-items: center;
            list-style: none;
        }

        .nav-link {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--radius);
        }

        .nav-link:hover {
            color: var(--primary);
            background-color: var(--background);
        }

        .nav-link.active {
            color: var(--primary);
        }

        /* Navigation badge (unread messages/notifications) */
        .nav-link-with-badge {
            position: relative;
        }

        .nav-badge {
            position: absolute;
            top: -4px;
            right: -8px;
            background: var(--error);
            color: white;
            font-size: 11px;
            font-weight: 600;
            min-width: 18px;
            height: 18px;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 5px;
        }

        /* Notifications dropdown */
        .notifications-dropdown {
            position: relative;
        }

        .notifications-trigger {
            background: none;
            border: none;
            cursor: pointer;
            padding: var(--spacing-sm) var(--spacing-md);
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            border-radius: var(--radius);
            transition: var(--transition);
            font-size: var(--font-size-base);
            font-weight: 500;
        }

        .notifications-trigger:hover {
            color: var(--primary);
            background-color: var(--background);
        }

        .notifications-icon {
            width: 20px;
            height: 20px;
        }

        .notifications-menu {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            min-width: 320px;
            max-width: 400px;
            max-height: 400px;
            overflow-y: auto;
            z-index: 200;
        }

        .notifications-menu.show {
            display: block;
        }

        .notifications-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-md);
            border-bottom: 1px solid var(--border);
            font-weight: 600;
        }

        .notifications-mark-all {
            background: none;
            border: none;
            color: var(--primary);
            cursor: pointer;
            font-size: var(--font-size-sm);
            padding: 0;
        }

        .notifications-mark-all:hover {
            text-decoration: underline;
        }

        .notification-item {
            display: block;
            padding: var(--spacing-md);
            border-bottom: 1px solid var(--border);
            text-decoration: none;
            color: var(--text-primary);
            transition: var(--transition);
        }

        .notification-item:hover {
            background-color: var(--background);
        }

        .notification-item.unread {
            background-color: #f0f7ff;
        }

        .notification-item.unread:hover {
            background-color: #e6f0ff;
        }

        .notification-title {
            font-weight: 600;
            font-size: var(--font-size-sm);
            margin-bottom: var(--spacing-xs);
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }

        .notification-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--primary);
            flex-shrink: 0;
        }

        .notification-message {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            margin-bottom: var(--spacing-xs);
            line-height: 1.4;
        }

        .notification-time {
            font-size: 11px;
            color: var(--text-secondary);
        }

        .notification-type-icon {
            width: 16px;
            height: 16px;
            margin-right: var(--spacing-xs);
        }

        .notifications-empty {
            padding: var(--spacing-xl);
            text-align: center;
            color: var(--text-secondary);
        }

        .notifications-footer {
            padding: var(--spacing-sm);
            text-align: center;
            border-top: 1px solid var(--border);
        }

        .notifications-footer a {
            color: var(--primary);
            text-decoration: none;
            font-size: var(--font-size-sm);
        }

        /* Admin dropdown menu */
        .nav-dropdown {
            position: relative;
        }

        .nav-dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            min-width: 180px;
            padding: var(--spacing-xs) 0;
            z-index: 200;
            list-style: none;
        }

        .nav-dropdown:hover .nav-dropdown-menu {
            display: block;
        }

        .nav-dropdown-menu li a {
            display: block;
            padding: var(--spacing-sm) var(--spacing-md);
            color: var(--text-primary);
            text-decoration: none;
            transition: var(--transition);
        }

        .nav-dropdown-menu li a:hover {
            background: var(--background);
            color: var(--primary);
        }

        /* Admin Bar */
        .admin-bar {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            border-bottom: 1px solid rgba(255,255,255,0.1);
            padding: 0 var(--spacing-md);
        }

        .admin-bar-inner {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }

        .admin-bar-label {
            display: flex;
            align-items: center;
            gap: 6px;
            color: rgba(255,255,255,0.7);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 10px 12px 10px 0;
            border-right: 1px solid rgba(255,255,255,0.15);
            margin-right: var(--spacing-xs);
        }

        .admin-bar-label svg {
            width: 14px;
            height: 14px;
            opacity: 0.8;
        }

        .admin-dropdown {
            position: relative;
        }

        .admin-dropdown-trigger {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 10px 14px;
            color: rgba(255,255,255,0.85);
            font-size: 13px;
            font-weight: 500;
            background: transparent;
            border: none;
            cursor: pointer;
            transition: all 0.15s ease;
            border-radius: var(--radius);
        }

        .admin-dropdown-trigger:hover {
            background: rgba(255,255,255,0.1);
            color: #fff;
        }

        .admin-dropdown-trigger svg {
            width: 12px;
            height: 12px;
            opacity: 0.6;
            transition: transform 0.15s ease;
        }

        .admin-dropdown:hover .admin-dropdown-trigger svg {
            transform: rotate(180deg);
        }

        .admin-dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            min-width: 180px;
            padding: var(--spacing-xs) 0;
            z-index: 300;
        }

        .admin-dropdown:hover .admin-dropdown-menu {
            display: block;
        }

        .admin-dropdown-menu a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            color: var(--text-primary);
            text-decoration: none;
            font-size: 13px;
            transition: all 0.15s ease;
        }

        .admin-dropdown-menu a:hover {
            background: var(--background);
            color: var(--primary);
        }

        .admin-dropdown-menu a svg {
            width: 16px;
            height: 16px;
            color: var(--text-secondary);
            flex-shrink: 0;
        }

        .admin-dropdown-menu a:hover svg {
            color: var(--primary);
        }

        @media (max-width: 768px) {
            .admin-bar {
                display: none;
            }
        }

        /* Mobile menu toggle */
        .nav-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: var(--spacing-sm);
        }

        @media (max-width: 768px) {
            .nav-toggle {
                display: block;
            }

            .nav-menu {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background-color: var(--surface);
                flex-direction: column;
                padding: var(--spacing-md);
                border-top: 1px solid var(--border);
                box-shadow: var(--shadow-md);
            }

            .nav-menu.active {
                display: flex;
            }
        }

        /* ============================================================
         * BUTTONS
         * ============================================================ */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-sm) var(--spacing-lg);
            font-size: var(--font-size-base);
            font-weight: 500;
            text-decoration: none;
            border-radius: var(--radius);
            border: none;
            cursor: pointer;
            transition: var(--transition);
            white-space: nowrap;
        }

        .btn-primary {
            background-color: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--primary-dark);
        }

        .btn-secondary {
            background-color: var(--secondary);
            color: white;
        }

        .btn-secondary:hover {
            background-color: #475569;
        }

        .btn-outline {
            background-color: transparent;
            color: var(--primary);
            border: 2px solid var(--primary);
        }

        .btn-outline:hover {
            background-color: var(--primary);
            color: white;
        }

        .btn-sm {
            padding: var(--spacing-xs) var(--spacing-md);
            font-size: var(--font-size-sm);
        }

        .btn-lg {
            padding: var(--spacing-md) var(--spacing-xl);
            font-size: var(--font-size-lg);
        }

        /* ============================================================
         * FLASH MESSAGES
         * ============================================================ */
        .flash-messages {
            position: fixed;
            top: var(--spacing-xl);
            right: var(--spacing-xl);
            z-index: 1000;
            max-width: 400px;
        }

        .flash {
            padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            display: flex;
            align-items: start;
            gap: var(--spacing-md);
            animation: slideIn 0.3s ease-out;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .flash-success {
            background-color: var(--success);
            color: white;
        }

        .flash-error {
            background-color: var(--error);
            color: white;
        }

        .flash-warning {
            background-color: var(--warning);
            color: white;
        }

        .flash-info {
            background-color: var(--primary);
            color: white;
        }

        .flash-close {
            background: none;
            border: none;
            color: inherit;
            font-size: var(--font-size-xl);
            cursor: pointer;
            margin-left: auto;
            opacity: 0.8;
        }

        .flash-close:hover {
            opacity: 1;
        }

        /* ============================================================
         * DEVELOPMENT NOTICE BANNER
         * ============================================================ */
        .dev-notice {
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            border-bottom: 2px solid #f59e0b;
            padding: var(--spacing-sm) var(--spacing-md);
            text-align: center;
            font-size: var(--font-size-sm);
            color: #92400e;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-sm);
        }

        .dev-notice-icon {
            font-size: 1.2em;
        }

        .dev-notice-text {
            font-weight: 500;
        }

        .dev-notice-close {
            background: none;
            border: none;
            color: #92400e;
            font-size: 1.2em;
            cursor: pointer;
            padding: 0 var(--spacing-sm);
            opacity: 0.6;
            transition: var(--transition);
            margin-left: var(--spacing-md);
        }

        .dev-notice-close:hover {
            opacity: 1;
        }

        /* ============================================================
         * FOOTER
         * ============================================================ */
        footer {
            background-color: var(--text-primary);
            color: white;
            padding: var(--spacing-xl) 0;
            margin-top: auto;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--spacing-xl);
        }

        .footer-section h3 {
            margin-bottom: var(--spacing-md);
            font-size: var(--font-size-lg);
        }

        .footer-section p,
        .footer-section a {
            color: #94a3b8;
            text-decoration: none;
            display: block;
            margin-bottom: var(--spacing-sm);
        }

        .footer-section a:hover {
            color: white;
        }

        .footer-bottom {
            border-top: 1px solid #334155;
            margin-top: var(--spacing-xl);
            padding-top: var(--spacing-md);
            text-align: center;
            color: #94a3b8;
            font-size: var(--font-size-sm);
        }

        .footer-creator {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-sm);
        }

        .footer-creator span {
            color: #94a3b8;
        }

        .creator-link {
            display: inline-flex;
            align-items: center;
        }

        .creator-logo {
            height: 28px;
            width: auto;
            transition: opacity 0.2s ease;
        }

        .creator-link:hover .creator-logo {
            opacity: 0.8;
        }

        .footer-section a {
            color: #94a3b8;
        }

        /* ============================================================
         * UTILITIES
         * ============================================================ */
        .text-center { text-align: center; }
        .text-muted { color: var(--text-secondary); }
        .mt-1 { margin-top: var(--spacing-md); }
        .mt-2 { margin-top: var(--spacing-lg); }
        .mt-3 { margin-top: var(--spacing-xl); }
        .mb-1 { margin-bottom: var(--spacing-md); }
        .mb-2 { margin-bottom: var(--spacing-lg); }
        .mb-3 { margin-bottom: var(--spacing-xl); }

        
        /* ============================================================
         * USER DROPDOWN MENU
         * ============================================================ */
        .user-dropdown {
            position: relative;
        }

        .user-trigger {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            background: none;
            border: none;
            cursor: pointer;
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius);
            transition: var(--transition);
        }

        .user-trigger:hover {
            background-color: var(--background);
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: var(--font-size-sm);
        }

        .user-name {
            font-weight: 500;
            color: var(--text-primary);
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .user-chevron {
            color: var(--text-secondary);
            transition: transform 0.2s;
        }

        .user-dropdown.active .user-chevron {
            transform: rotate(180deg);
        }

        .user-menu {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            right: 0;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            min-width: 220px;
            z-index: 200;
            overflow: hidden;
        }

        .user-menu.show {
            display: block;
        }

        .user-menu-item {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-sm) var(--spacing-md);
            color: var(--text-primary);
            text-decoration: none;
            transition: var(--transition);
            font-size: var(--font-size-sm);
        }

        .user-menu-item:hover {
            background-color: var(--background);
            color: var(--primary);
        }

        .user-menu-item svg {
            color: var(--text-secondary);
            flex-shrink: 0;
        }

        .user-menu-item:hover svg {
            color: var(--primary);
        }

        .user-menu-item-badge {
            position: relative;
        }

        .user-menu-badge {
            background: var(--error);
            color: white;
            font-size: 10px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: auto;
        }

        .user-menu-divider {
            height: 1px;
            background: var(--border);
            margin: var(--spacing-xs) 0;
        }

        .user-menu-section {
            padding: var(--spacing-xs) var(--spacing-md);
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .user-menu-logout {
            color: var(--error);
        }

        .user-menu-logout:hover {
            background-color: #fef2f2;
            color: var(--error);
        }

        .user-menu-logout svg {
            color: var(--error);
        }

        @media (max-width: 768px) {
            .user-name {
                display: none;
            }
            .user-chevron {
                display: none;
            }
        }

        {% block extra_css %}{% endblock %}
    </style>

    <!-- Analytics Tracker -->
    <script src="{{ url_for('static', filename='js/analytics-tracker.js') }}" defer></script>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="container">
            <nav role="navigation" aria-label="Main navigation">
                <a href="{{ url_for('index') }}" class="nav-brand" aria-label="Norda Biznes Home">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor">
                        <path d="M16 2L2 9v14l14 7 14-7V9L16 2zm0 3.5L25.5 10 16 14.5 6.5 10 16 5.5zm-11 6.8l10 5v9.4l-10-5v-9.4zm12 14.4v-9.4l10-5v9.4l-10 5z"/>
                    </svg>
                    <span>Norda Biznes Hub</span>
                </a>

                <button class="nav-toggle" aria-label="Toggle navigation" onclick="toggleMobileMenu()">
                    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M3 12h18M3 6h18M3 18h18"/>
                    </svg>
                </button>

                                <ul class="nav-menu" id="navMenu">
                    <li><a href="{{ url_for('index') }}" class="nav-link {% if request.endpoint == 'index' %}active{% endif %}">Firmy</a></li>

                    {% if current_user.is_authenticated %}
                        <!-- Społeczność Dropdown -->
                        <li class="nav-dropdown">
                            <a href="#" class="nav-link">Społeczność ▾</a>
                            <ul class="nav-dropdown-menu">
                                <li><a href="{{ url_for('announcements_list') }}">Aktualności</a></li>
                                <li><a href="{{ url_for('calendar_index') }}">Kalendarz</a></li>
                                <li><a href="{{ url_for('forum_index') }}">Forum</a></li>
                                <li><a href="{{ url_for('classifieds_index') }}">Tablica B2B</a></li>
                                <li><a href="{{ url_for('chat') }}">NordaGPT</a></li>
                                <li><a href="{{ url_for('zopk_index') }}">ZOP Kaszubia</a></li>
                                <li><a href="{{ url_for('contacts_list') }}">Kontakty zewnętrzne</a></li>
                                <li><a href="#" onclick="openConnectionsMap(); return false;">Mapa Powiązań</a></li>
                            </ul>
                        </li>

                        <!-- Raporty -->
                        <li><a href="{{ url_for('reports_index') }}" class="nav-link {% if request.endpoint and request.endpoint.startswith('report') %}active{% endif %}">Raporty</a></li>

                        <!-- Notifications -->
                        <li class="notifications-dropdown">
                            <button class="notifications-trigger nav-link-with-badge" onclick="toggleNotifications(event)" aria-label="Powiadomienia">
                                <svg class="notifications-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
                                </svg>
                                {% if unread_notifications_count > 0 %}
                                <span class="nav-badge" id="notificationBadge">{{ unread_notifications_count if unread_notifications_count <= 99 else '99+' }}</span>
                                {% else %}
                                <span class="nav-badge" id="notificationBadge" style="display: none;">0</span>
                                {% endif %}
                            </button>
                            <div class="notifications-menu" id="notificationsMenu">
                                <div class="notifications-header">
                                    <span>Powiadomienia</span>
                                    <button class="notifications-mark-all" onclick="markAllNotificationsRead()">Oznacz wszystkie</button>
                                </div>
                                <div id="notificationsList">
                                    <div class="notifications-empty">Ladowanie...</div>
                                </div>
                            </div>
                        </li>

                        <!-- User Menu -->
                        <li class="user-dropdown">
                            <button class="user-trigger" onclick="toggleUserMenu(event)">
                                <span class="user-avatar">{{ current_user.name[:1].upper() }}</span>
                                <span class="user-name">{{ current_user.name.split()[0] }}</span>
                                <svg class="user-chevron" width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                </svg>
                            </button>
                            <div class="user-menu" id="userMenu">
                                <a href="{{ url_for('dashboard') }}" class="user-menu-item">
                                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                                    </svg>
                                    Mój Panel
                                </a>
                                <a href="{{ url_for('messages_inbox') }}" class="user-menu-item user-menu-item-badge">
                                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                    </svg>
                                    Wiadomości
                                    <span class="user-menu-badge" id="userMenuUnreadBadge" style="display: none;">0</span>
                                </a>
                                <div class="user-menu-divider"></div>
                                <a href="{{ url_for('release_notes') }}" class="user-menu-item">
                                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
                                    </svg>
                                    Co nowego
                                </a>
                                <a href="{{ url_for('logout') }}" class="user-menu-item user-menu-logout">
                                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                                    </svg>
                                    Wyloguj
                                </a>
                            </div>
                        </li>
                    {% else %}
                        <li><a href="{{ url_for('login') }}" class="btn btn-outline btn-sm">Zaloguj</a></li>
                        <li><a href="{{ url_for('register') }}" class="btn btn-primary btn-sm">Rejestracja</a></li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </header>

    {% if current_user.is_authenticated and current_user.is_admin %}
    <!-- Admin Bar -->
    <div class="admin-bar">
        <div class="admin-bar-inner">
            <div class="admin-bar-label">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                </svg>
                Admin
            </div>

            <!-- Zarządzanie -->
            <div class="admin-dropdown">
                <button class="admin-dropdown-trigger">
                    Zarządzanie
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="admin-dropdown-menu">
                    <a href="{{ url_for('admin_users') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                        </svg>
                        Użytkownicy
                    </a>
                    <a href="{{ url_for('admin_fees') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Składki
                    </a>
                    <a href="{{ url_for('admin_recommendations') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
                        </svg>
                        Rekomendacje
                    </a>
                    <a href="{{ url_for('admin_calendar') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        Kalendarz
                    </a>
                    <a href="{{ url_for('admin_social_media') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"/>
                        </svg>
                        Social Media
                    </a>
                    <a href="{{ url_for('admin_zopk') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        ZOP Kaszubia
                    </a>
                    <a href="{{ url_for('admin_security') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                        </svg>
                        Bezpieczeństwo
                    </a>
                    <a href="{{ url_for('admin_status') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                        </svg>
                        Status systemu
                    </a>
                    <a href="{{ url_for('admin_health') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Health Check
                    </a>
                </div>
            </div>

            <!-- Audyty -->
            <div class="admin-dropdown">
                <button class="admin-dropdown-trigger">
                    Audyty
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="admin-dropdown-menu">
                    <a href="{{ url_for('admin_seo') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        Audyt SEO
                    </a>
                    <a href="{{ url_for('admin_it_audit') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                        Audyt IT
                    </a>
                    <a href="{{ url_for('admin_gbp_audit') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                        Audyt GBP
                    </a>
                    <a href="{{ url_for('admin_social_audit') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/>
                        </svg>
                        Audyt Social
                    </a>
                    <a href="{{ url_for('admin_krs_audit') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        Audyt KRS
                    </a>
                </div>
            </div>

            <!-- Analityka -->
            <div class="admin-dropdown">
                <button class="admin-dropdown-trigger">
                    Analityka
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="admin-dropdown-menu">
                    <a href="{{ url_for('admin_analytics') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75M9 7a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/>
                        </svg>
                        Użytkownicy
                    </a>
                    <a href="{{ url_for('chat_analytics') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                        </svg>
                        NordaGPT
                    </a>
                    <a href="{{ url_for('admin_ai_usage') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                        Monitoring AI
                    </a>
                    <a href="{{ url_for('debug_panel') }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
                        </svg>
                        Debug Panel
                    </a>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Development Notice Banner -->
    <div class="dev-notice" id="devNotice">
        <span class="dev-notice-icon">🚧</span>
        <span class="dev-notice-text">
            Serwis w fazie rozwoju. Oficjalne uruchomienie po akceptacji Zarządu Norda Biznes.
        </span>
        <button class="dev-notice-close" onclick="dismissDevNotice()" aria-label="Zamknij">&times;</button>
    </div>

    <!-- Flash Messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <div class="flash-messages" role="alert" aria-live="polite">
                {% for category, message in messages %}
                    <div class="flash flash-{{ category }}">
                        <span>{{ message }}</span>
                        <button class="flash-close" onclick="this.parentElement.remove()" aria-label="Close">&times;</button>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}

    <!-- Main Content -->
    <main role="main">
        <div class="container {% block container_class %}{% endblock %}">
            {% block content %}{% endblock %}
        </div>
    </main>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Norda Biznes Hub</h3>
                    <p>Platforma networkingu Regionalnej Izby Przedsiębiorców Norda Biznes - współpraca biznesowa i kontakty.</p>
                </div>
                <div class="footer-section">
                    <h3>Linki</h3>
                    <a href="{{ url_for('index') }}">Katalog firm</a>
                    <a href="{{ url_for('search') }}">Wyszukiwarka</a>
                    {% if current_user.is_authenticated %}
                        <a href="{{ url_for('calendar_index') }}">Kalendarz</a>
                        <a href="{{ url_for('classifieds_index') }}">Tablica B2B</a>
                        <a href="{{ url_for('new_members') }}">Nowi czlonkowie</a>
                        <a href="{{ url_for('chat') }}">NordaGPT</a>
                    {% endif %}
                </div>
                <div class="footer-section">
                    <h3>Kontakt</h3>
                    <p>Email: <a href="mailto:maciej.pienczyn@inpi.pl">maciej.pienczyn@inpi.pl</a></p>
                    <p>Telefon: <a href="tel:+48785337754">+48 785 337 754</a></p>
                    <p>WhatsApp: <a href="https://wa.me/48785337754" target="_blank" rel="noopener">+48 785 337 754</a></p>
                    <p>Adres: ul. Tomasza Rogali 11, 84-200 Wejherowo</p>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="footer-creator">
                    <span>Stworzone przez</span>
                    <a href="https://inpi.pl" target="_blank" rel="noopener" class="creator-link">
                        <img src="{{ url_for('static', filename='img/INPI_LOGO_white_background.png') }}" alt="INPI" class="creator-logo">
                    </a>
                </div>
                <p>&copy; {{ current_year }} INPI. Wszelkie prawa zastrzeżone.</p>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script>
                // User menu toggle
        function toggleUserMenu(event) {
            event.stopPropagation();
            const userDropdown = document.querySelector('.user-dropdown');
            const userMenu = document.getElementById('userMenu');

            // Close notifications if open
            const notificationsMenu = document.getElementById('notificationsMenu');
            if (notificationsMenu) notificationsMenu.classList.remove('show');

            userDropdown.classList.toggle('active');
            userMenu.classList.toggle('show');
        }

        // Close user menu when clicking outside
        document.addEventListener('click', function(event) {
            const userDropdown = document.querySelector('.user-dropdown');
            const userMenu = document.getElementById('userMenu');

            if (userDropdown && userMenu && !userDropdown.contains(event.target)) {
                userDropdown.classList.remove('active');
                userMenu.classList.remove('show');
            }
        });

        // Update unread badge in user menu
        function updateUserMenuBadge(count) {
            const badge = document.getElementById('userMenuUnreadBadge');
            if (badge) {
                if (count > 0) {
                    badge.textContent = count > 99 ? '99+' : count;
                    badge.style.display = 'inline';
                } else {
                    badge.style.display = 'none';
                }
            }
        }

// Mobile menu toggle
        function toggleMobileMenu() {
            document.getElementById('navMenu').classList.toggle('active');
        }

        // Auto-dismiss flash messages after 5 seconds
        document.addEventListener('DOMContentLoaded', function() {
            const flashes = document.querySelectorAll('.flash');
            flashes.forEach(flash => {
                setTimeout(() => {
                    flash.style.animation = 'slideOut 0.3s ease-out';
                    setTimeout(() => flash.remove(), 300);
                }, 5000);
            });
        });

        // Close mobile menu when clicking outside
        document.addEventListener('click', function(event) {
            const navMenu = document.getElementById('navMenu');
            const navToggle = document.querySelector('.nav-toggle');

            if (!navMenu.contains(event.target) && !navToggle.contains(event.target)) {
                navMenu.classList.remove('active');
            }
        });

        // Development notice banner
        function dismissDevNotice() {
            const notice = document.getElementById('devNotice');
            if (notice) {
                notice.style.display = 'none';
                // Remember dismissal for this session
                sessionStorage.setItem('devNoticeDismissed', 'true');
            }
        }

        // Check if notice was dismissed in this session
        document.addEventListener('DOMContentLoaded', function() {
            if (sessionStorage.getItem('devNoticeDismissed') === 'true') {
                const notice = document.getElementById('devNotice');
                if (notice) notice.style.display = 'none';
            }
        });

        // Fetch unread message count (for authenticated users)
        {% if current_user.is_authenticated %}
        async function updateUnreadBadge() {
            try {
                const response = await fetch('{{ url_for("api_unread_count") }}');
                const data = await response.json();
                const badge = document.getElementById('unreadBadge');
                if (badge && data.count > 0) {
                    badge.textContent = data.count > 99 ? '99+' : data.count;
                    badge.style.display = 'flex';
                } else if (badge) {
                    badge.style.display = 'none';
                }
            } catch (error) {
                console.log('Could not fetch unread count');
            }
        }
        // Check unread on page load and every 60 seconds
        document.addEventListener('DOMContentLoaded', updateUnreadBadge);
        setInterval(updateUnreadBadge, 60000);

        // ============================================================
        // NOTIFICATIONS SYSTEM
        // ============================================================

        let notificationsLoaded = false;

        function toggleNotifications(event) {
            event.stopPropagation();
            const menu = document.getElementById('notificationsMenu');
            const isOpen = menu.classList.contains('show');

            // Close any other open dropdowns
            document.querySelectorAll('.notifications-menu.show').forEach(m => m.classList.remove('show'));

            if (!isOpen) {
                menu.classList.add('show');
                if (!notificationsLoaded) {
                    loadNotifications();
                }
            }
        }

        async function loadNotifications() {
            const listEl = document.getElementById('notificationsList');
            try {
                const response = await fetch('{{ url_for("api_notifications") }}?limit=10');
                const data = await response.json();

                if (!data.success) {
                    listEl.innerHTML = '<div class="notifications-empty">Blad ladowania</div>';
                    return;
                }

                if (data.notifications.length === 0) {
                    listEl.innerHTML = '<div class="notifications-empty">Brak powiadomien</div>';
                    return;
                }

                let html = '';
                data.notifications.forEach(n => {
                    const timeAgo = formatTimeAgo(new Date(n.created_at));
                    const unreadClass = n.is_read ? '' : 'unread';
                    const dotHtml = n.is_read ? '' : '<span class="notification-dot"></span>';
                    const icon = getNotificationIcon(n.notification_type);

                    html += `
                        <a href="${n.action_url || '#'}" class="notification-item ${unreadClass}"
                           onclick="markNotificationRead(event, ${n.id})" data-id="${n.id}">
                            <div class="notification-title">${dotHtml}${icon}${escapeHtml(n.title)}</div>
                            <div class="notification-message">${escapeHtml(n.message || '')}</div>
                            <div class="notification-time">${timeAgo}</div>
                        </a>
                    `;
                });

                listEl.innerHTML = html;
                notificationsLoaded = true;

                // Update badge
                updateNotificationBadge(data.unread_count);

            } catch (error) {
                console.error('Error loading notifications:', error);
                listEl.innerHTML = '<div class="notifications-empty">Blad ladowania</div>';
            }
        }

        function getNotificationIcon(type) {
            const icons = {
                'news': '<svg class="notification-type-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>',
                'event': '<svg class="notification-type-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>',
                'message': '<svg class="notification-type-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>',
                'system': '<svg class="notification-type-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
                'alert': '<svg class="notification-type-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>'
            };
            return icons[type] || icons['system'];
        }

        async function markNotificationRead(event, notificationId) {
            // Don't prevent default - we want to navigate
            try {
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content ||
                                  document.querySelector('input[name="csrf_token"]')?.value || '';

                await fetch(`/api/notifications/${notificationId}/read`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    }
                });

                // Update UI
                const item = document.querySelector(`.notification-item[data-id="${notificationId}"]`);
                if (item) {
                    item.classList.remove('unread');
                    const dot = item.querySelector('.notification-dot');
                    if (dot) dot.remove();
                }

                // Refresh badge count
                updateNotificationBadgeFromAPI();
            } catch (error) {
                console.error('Error marking notification as read:', error);
            }
        }

        async function markAllNotificationsRead() {
            try {
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content ||
                                  document.querySelector('input[name="csrf_token"]')?.value || '';

                const response = await fetch('/api/notifications/read-all', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    }
                });

                const data = await response.json();
                if (data.success) {
                    // Update all items in UI
                    document.querySelectorAll('.notification-item.unread').forEach(item => {
                        item.classList.remove('unread');
                        const dot = item.querySelector('.notification-dot');
                        if (dot) dot.remove();
                    });

                    // Update badge
                    updateNotificationBadge(0);
                }
            } catch (error) {
                console.error('Error marking all notifications as read:', error);
            }
        }

        async function updateNotificationBadgeFromAPI() {
            try {
                const response = await fetch('/api/notifications/unread-count');
                const data = await response.json();
                updateNotificationBadge(data.count);
            } catch (error) {
                console.error('Error fetching notification count:', error);
            }
        }

        function updateNotificationBadge(count) {
            const badge = document.getElementById('notificationBadge');
            if (badge) {
                if (count > 0) {
                    badge.textContent = count > 99 ? '99+' : count;
                    badge.style.display = 'flex';
                } else {
                    badge.style.display = 'none';
                }
            }
        }

        function formatTimeAgo(date) {
            const now = new Date();
            const diff = now - date;
            const seconds = Math.floor(diff / 1000);
            const minutes = Math.floor(seconds / 60);
            const hours = Math.floor(minutes / 60);
            const days = Math.floor(hours / 24);

            if (days > 7) {
                return date.toLocaleDateString('pl-PL');
            } else if (days > 0) {
                return `${days} ${days === 1 ? 'dzien' : 'dni'} temu`;
            } else if (hours > 0) {
                return `${hours} ${hours === 1 ? 'godzine' : 'godzin'} temu`;
            } else if (minutes > 0) {
                return `${minutes} min temu`;
            } else {
                return 'przed chwila';
            }
        }

        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        // Close notifications menu when clicking outside
        document.addEventListener('click', function(event) {
            const menu = document.getElementById('notificationsMenu');
            const dropdown = document.querySelector('.notifications-dropdown');
            if (menu && dropdown && !dropdown.contains(event.target)) {
                menu.classList.remove('show');
            }
        });

        // Check notification count periodically
        setInterval(updateNotificationBadgeFromAPI, 60000);
        {% endif %}

        {% block extra_js %}{% endblock %}
    </script>

    <!-- D3.js for Connections Map Modal -->
    <script src="{{ url_for('static', filename='js/vendor/d3.v7.min.js') }}"></script>

    <!-- Connections Map Modal -->
    {% include 'connections_modal.html' %}
</body>
</html>
