{% load static i18n %}

<!-- ========== Topbar / Header Start ========== -->
<header class="spectra-header" id="spectra-header">
    <div class="header-container">
        
        <!-- Left Section: Mobile Toggle & Breadcrumb -->
        <div class="header-left">
            <!-- Mobile Menu Toggle -->
            <button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Toggle Menu">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="3" y1="12" x2="21" y2="12"></line>
                    <line x1="3" y1="6" x2="21" y2="6"></line>
                    <line x1="3" y1="18" x2="21" y2="18"></line>
                </svg>
            </button>

            <!-- Breadcrumb Navigation -->
            {% if SPECTRA_CONFIG.show_breadcrumb %}
            <nav class="breadcrumb-nav" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{% url 'admin:index' %}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                            </svg>
                        </a>
                    </li>
                    {% if title %}
                    <li class="breadcrumb-item active" aria-current="page">{{ title }}</li>
                    {% endif %}
                </ol>
            </nav>
            {% endif %}
        </div>

        <!-- Center Section: Search (Optional) -->
        {% if SPECTRA_CONFIG.show_search %}
        <div class="header-center">
            <form class="header-search-form" method="get" action="{% url 'admin:index' %}">
                <div class="search-input-group">
                    <span class="search-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="11" cy="11" r="8"></circle>
                            <path d="m21 21-4.35-4.35"></path>
                        </svg>
                    </span>
                    <input type="text" name="q" class="search-input" placeholder="{% trans 'Search...' %}" autocomplete="off">
                    <kbd class="search-shortcut">Ctrl K</kbd>
                </div>
            </form>
        </div>
        {% endif %}

        <!-- Right Section: Actions & User -->
        <div class="header-right">
            
            <!-- Theme Toggle -->
            <button class="header-btn theme-toggle-btn" id="theme-toggle-btn" aria-label="Toggle theme" title="Switch theme">
                <svg class="theme-icon theme-icon-sun" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="4"></circle>
                    <path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path>
                </svg>
                <svg class="theme-icon theme-icon-moon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                </svg>
            </button>

            <!-- Fullscreen Toggle -->
            {% if SPECTRA_CONFIG.show_fullscreen %}
            <button class="header-btn fullscreen-btn" id="fullscreen-btn" aria-label="Toggle fullscreen" title="Fullscreen">
                <svg class="fullscreen-icon fullscreen-icon-expand" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
                </svg>
                <svg class="fullscreen-icon fullscreen-icon-compress" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path>
                </svg>
            </button>
            {% endif %}

            <!-- Notifications Dropdown -->
            {% if SPECTRA_CONFIG.show_notifications %}
            <div class="header-dropdown notifications-dropdown">
                <button class="header-btn dropdown-toggle" id="notifications-btn" aria-label="Notifications" title="Notifications">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
                        <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
                    </svg>
                    <span class="notification-badge">3</span>
                </button>
                <div class="dropdown-menu" id="notifications-dropdown-menu">
                    <div class="dropdown-header">
                        <h6>{% trans "Notifications" %}</h6>
                        <span class="badge badge-primary">3 New</span>
                    </div>
                    <div class="dropdown-body">
                        <a href="#" class="notification-item unread">
                            <div class="notification-icon bg-success">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                            </div>
                            <div class="notification-content">
                                <div class="notification-title">{% trans "New user registered" %}</div>
                                <div class="notification-time">{% trans "2 minutes ago" %}</div>
                            </div>
                        </a>
                        <a href="#" class="notification-item">
                            <div class="notification-icon bg-info">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="12" y1="16" x2="12" y2="12"></line>
                                    <line x1="12" y1="8" x2="12.01" y2="8"></line>
                                </svg>
                            </div>
                            <div class="notification-content">
                                <div class="notification-title">{% trans "System update available" %}</div>
                                <div class="notification-time">{% trans "1 hour ago" %}</div>
                            </div>
                        </a>
                    </div>
                    <div class="dropdown-footer">
                        <a href="#">{% trans "View all notifications" %}</a>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- User Dropdown -->
            <div class="header-dropdown user-dropdown">
                <button class="header-btn user-btn dropdown-toggle" id="user-dropdown-btn" aria-label="User menu">
                    <div class="user-avatar-sm">
                        {% if user.profile_image %}
                        <img src="{{ user.profile_image.url }}" alt="{{ user.get_full_name|default:user.username }}">
                        {% else %}
                        <div class="avatar-placeholder-sm">
                            {{ user.get_full_name|default:user.username|slice:":1"|upper }}
                        </div>
                        {% endif %}
                    </div>
                    <span class="user-name-text">{{ user.get_full_name|default:user.username }}</span>
                    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="6 9 12 15 18 9"></polyline>
                    </svg>
                </button>
                <div class="dropdown-menu dropdown-menu-end" id="user-dropdown-menu">
                    <div class="dropdown-header">
                        <div class="user-info-dropdown">
                            <div class="user-name">{{ user.get_full_name|default:user.username }}</div>
                            <div class="user-email">{{ user.email }}</div>
                        </div>
                    </div>
                    <div class="dropdown-divider"></div>
                    <div class="dropdown-body">
                        <a href="{% url 'admin:password_change' %}" class="dropdown-item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                <circle cx="12" cy="7" r="4"></circle>
                            </svg>
                            <span>{% trans "My Profile" %}</span>
                        </a>
                        {% if user.is_superuser %}
                        <a href="{% url 'admin:index' %}" class="dropdown-item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="3"></circle>
                                <path d="M12 1v6m0 6v6m8.66-11l-5.2 3m-6.92 4l-5.2 3m0-12l5.2 3m6.92 4l5.2 3"></path>
                            </svg>
                            <span>{% trans "Settings" %}</span>
                        </a>
                        {% endif %}
                        <a href="#" class="dropdown-item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="10"></circle>
                                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                                <line x1="12" y1="17" x2="12.01" y2="17"></line>
                            </svg>
                            <span>{% trans "Help & Support" %}</span>
                        </a>
                    </div>
                    <div class="dropdown-divider"></div>
                    <div class="dropdown-footer">
                        <a href="{% url 'admin:logout' %}" class="dropdown-item text-danger">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                                <polyline points="16 17 21 12 16 7"></polyline>
                                <line x1="21" y1="12" x2="9" y2="12"></line>
                            </svg>
                            <span>{% trans "Logout" %}</span>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</header>