<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Packs Site{% endblock %}</title>
    {% load static %}
    
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    {% block extra_head %}{% endblock %}
    <link rel="stylesheet" href="{% static 'fonts/roboto.css' %}">
    <link rel="stylesheet" href="{% static 'fontawesome/css/all.min.css' %}">
    <link rel="icon" type="image/png" href="{% static 'Logo.png' %}">
</head>
<body>
    <div class="app-bar">
        <div class="app-bar-title">
            {% block app_bar_logo %}
            <img src="{% static 'Logo.png' %}" alt="Packs" height="32">
            {% endblock %}
        </div>
        <nav class="app-bar-nav">
            <span class="version-badge desktop-version">
                <i class="fas fa-tag"></i> {{ APP_ENV }}
                <span class="separator">•</span>
                <i class="fas fa-code-branch"></i> {{ GIT_COMMIT_HASH }}
                <span class="separator">•</span>
                <i class="{{ OS_ICON }}"></i> {{ OS_NAME }}
                <span class="separator">•</span>
                <i class="fas fa-clock"></i> {{ PAGE_GEN_TIME }}
            </span>

            <span class="version-badge mobile-version">
                <i class="fas fa-code-branch"></i> {{ APP_ENV|slice:":1"|upper }}
                <i class="{{ OS_ICON }}" style="margin-left: 4px;"></i>
            </span>

            {% if request.path != '/' %}
            <a href="{% url 'landing:home' %}">
                <i class="fas fa-home"></i><span class="nav-text"> Home</span>
            </a>
            <a href="{% url 'library:browse' %}">
                <i class="fas fa-compass"></i><span class="nav-text"> Browse</span>
            </a>
            <a href="{% url 'profiles:user_list' %}">
                <i class="fas fa-users"></i><span class="nav-text"> Users</span>
            </a>
            <a href="{% url 'announcements:list' %}">
                <i class="fas fa-bullhorn"></i><span class="nav-text"> Announcements</span>
            </a>
            {% if user.is_authenticated %}
                <a href="{% url 'library:my_projects' %}">
                    <i class="fas fa-folder-open"></i><span class="nav-text"> My Projects</span>
                </a>
            {% endif %}
            {% endif %}
        </nav>
    </div>
    <main class="main-content">
        {% if messages %}
            <div class="messages-banner">
                {% for message in messages %}
                    <div class="message message-{{ message.tags }}">{{ message }}</div>
                {% endfor %}
            </div>
        {% endif %}
        {% block content %}{% endblock %}
    </main>

    {% if user.is_authenticated %}
        <div class="user-bar">
            {% if impersonating %}
                <a class="impersonate-chip" href="{% url 'profiles:user_profile' impersonator.username %}"
                   title="Impersonator: {{ impersonator.username }}">
                    {% if impersonator_avatar_url %}
                        <img src="{{ impersonator_avatar_url }}" alt="">
                    {% else %}
                        <div class="default-avatar mini">{{ impersonator.username|first|upper }}</div>
                    {% endif %}
                    <span>Impersonator: {{ impersonator.username }}</span>
                </a>
            {% endif %}
            <div class="user-avatar" onclick="toggleUserMenu()">
                {% if user.userprofile.avatar %}
                    <img src="{{ user.userprofile.avatar_url }}" alt="Avatar">
                {% else %}
                    <div class="default-avatar">{{ user.username|first|upper }}</div>
                {% endif %}
            </div>
            <div class="user-menu" id="user-menu">
                <a href="{% url 'profiles:user_profile' request.user.username %}" class="user-edit">
                    <i class="fas fa-user-circle"></i> {{ user.username }}
                </a>
                <div class="user-info"></div>
                <a href="{% url 'profiles:account' %}">
                    <i class="fas fa-user-cog"></i> Account Settings
                </a>
                <a href="{% url 'profiles:settings' %}">
                    <i class="fas fa-key"></i> API Tokens
                </a>
                {% if user.is_staff %}
                    <a href="{% url 'admin:index' %}">
                        <i class="fas fa-shield-alt"></i> Admin panel
                    </a>
                    <a href="{% url 'landing:server_stats' %}">
                        <i class="fas fa-chart-line"></i> Server Stats
                    </a>
                {% endif %}
                <form method="post" action="{% url 'profiles:logout' %}" style="display: inline;">
                    {% csrf_token %}
                    <button type="submit" class="logout-button">
                        {% if impersonating %}
                            <i class="fas fa-undo-alt"></i> Stop impersonating
                        {% else %}
                            <i class="fas fa-sign-out-alt"></i> Logout
                        {% endif %}
                    </button>
                </form>
            </div>
        </div>
        <script>
        function toggleUserMenu() {
            const menu = document.getElementById('user-menu');
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
        }
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.user-bar')) {
                document.getElementById('user-menu').style.display = 'none';
            }
        });
        function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
        }
        </script>
        {% else %}
        {% if request.path != '/' %}
        <div class="auth-bar">
            <a href="{% url 'profiles:login' %}"><i class="fas fa-sign-in-alt"></i> Login</a> | 
            <a href="{% url 'profiles:register' %}"><i class="fas fa-user-plus"></i> Register</a>
        </div>
        {% endif %}
        {% endif %}
    <script>
    (function () {
        const banner = document.querySelector('.messages-banner');
        if (!banner) return;
        const dismiss = () => {
            if (banner.dataset.dismissing) return;
            banner.dataset.dismissing = '1';
            banner.style.transition = 'opacity 0.4s ease';
            banner.style.opacity = '0';
            setTimeout(() => banner.remove(), 450);
        };
        banner.addEventListener('click', dismiss);
        setTimeout(dismiss, 6000);
    })();
    </script>
    {% block extra_js %}{% endblock %}
</body>
</html>