{% load static %}
<link rel="stylesheet" href="{% static "/css/header.css" %}">

<!-- Navbar -->
<header class="navbar-container">
    <nav class="navbar">
        <div class="container d-flex justify-content-between align-items-center">
            
            <!-- LOGO -->
            <a class="navbar-brand" href="/">
                <img id="Surchaing-logo" src="{% static "/images/logo/light_logo.webp" %}" alt="Surchaing Manga"
                     draggable="false" height="70" />
            </a>

            <!-- Menú principal en una sola línea -->
            <ul class="navbar-nav d-flex align-items-center">
                <li class="nav-item"><a class="nav-link" href="{% url 'index' %}">Inicio</a></li>
                <li class="nav-item"><a class="nav-link" href="{% url 'library' %}">Catálogo</a></li>
                <li class="nav-item"><a class="nav-link" href="{% url 'help' %}">Ayuda</a></li>
                <li class="nav-item"><a class="nav-link" href="{% url 'team' %}">Equipo</a></li>
                {% if user.is_authenticated %}
                <li class="nav-item"><a class="nav-link" href="{% url 'perfil' %}">Perfil</a></li>
                {% endif %}
            </ul>

            <!-- Iconos y botones de sesión -->
            <div class="navbar-icons d-flex align-items-center">
                <a class="nav-link" href="{% url 'search' %}"><i class="bi bi-search"></i></a>
                {% if user.is_authenticated %}
                <form method="post" action="{% url 'logout' %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-outline-primary">Logout</button>
                </form>
                <span class="user-greeting">@{{ user }}</span>
                {% else %}
                <a href="{% url 'login' %}" class="btn btn-outline-primary">Login</a>
                {% endif %}
            </div>
        </div>
    </nav>
</header>

{% block extra_js %}
<script src="{% static "js/header.js" %}"></script>
{% endblock %}