{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Subscribarr{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    {% block extra_style %}{% endblock %}
</head>

<body>
    <nav class="main-nav">
        <div class="nav-content">
            <a href="/" class="nav-brand">Subscribarr</a>
            <button class="nav-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="nav-menu">
                <span></span><span></span><span></span>
            </button>
            <div id="nav-menu" class="nav-links">
                {% if user.is_authenticated %}
                <span class="user-info">Signed in as <strong>{{ user.username }}</strong></span>
                <a href="{% url 'accounts:profile' %}" class="nav-profile">
                    <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>
                    Profile
                </a>
                {% if user.is_jellyfin_admin %}
                <a href="{% url 'settingspanel:index' %}" class="nav-admin">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 20V10M12 10l-4-4m4 4l4-4M4 16.667V20h16v-3.333M4 7.333V4h16v3.333"></path>
                    </svg>
                    Administration
                </a>
                {% endif %}
                <form method="post" action="{% url 'accounts:logout' %}" class="inline-form">
                    {% csrf_token %}
                    <button type="submit" class="nav-logout btn-link">
                        <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>
                        Sign out
                    </button>
                </form>
                {% else %}
                <a href="{% url 'accounts:login' %}" class="nav-login">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
                        <polyline points="10 17 15 12 10 7"></polyline>
                        <line x1="15" y1="12" x2="3" y2="12"></line>
                    </svg>
                    Sign in
                </a>
                <a href="{% url 'accounts:register' %}" class="nav-register">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="8.5" cy="7" r="4"></circle>
                        <line x1="20" y1="8" x2="20" y2="14"></line>
                        <line x1="23" y1="11" x2="17" y2="11"></line>
                    </svg>
                    Register
                </a>
                {% endif %}
            </div>
        </div>
    </nav>

    <script>
    (function(){
        const btn = document.querySelector('.nav-toggle');
        const menu = document.getElementById('nav-menu');
        if(!btn || !menu) return;
        btn.addEventListener('click', ()=>{
            const open = menu.classList.toggle('open');
            btn.setAttribute('aria-expanded', open ? 'true' : 'false');
        });
    })();
    </script>

    {% block content %}{% endblock %}
</body>

</html>