{% macro navbar() -%}

<nav class="navbar navbar-expand-md navbar-ocean" aria-label="Ocean Academic Navigation">
    <div class="container-fluid">
        <a href="{{ url_for('home.pagina_de_inicio') }}" class="navbar-brand text-decoration-none d-flex align-items-center">
            <!-- Ocean Wave Logo -->
            <div class="ocean-logo me-2">
                <svg width="40" height="30" viewBox="0 0 40 30" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 15 Q10 5, 15 15 T25 15 T35 15" stroke="#94d2bd" stroke-width="3" fill="none" />
                    <path d="M3 20 Q8 10, 13 20 T23 20 T33 20" stroke="#94d2bd" stroke-width="2" fill="none" opacity="0.7" />
                    <circle cx="8" cy="8" r="2" fill="#94d2bd" opacity="0.6" />
                    <circle cx="18" cy="6" r="1.5" fill="#94d2bd" opacity="0.5" />
                    <circle cx="28" cy="10" r="1" fill="#94d2bd" opacity="0.4" />
                </svg>
            </div>
            <span style="font-size: 1.5rem; font-weight: 700; color: var(--ocean-primary)">ocean</span>
        </a>
        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarsOcean"
            aria-controls="navbarsOcean"
            aria-expanded="false"
            aria-label="Toggle navigation"
        >
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsOcean">
            <ul class="navbar-nav me-auto mb-2 mb-md-0">
                {% if not current_user.is_authenticated %}
                <li class="nav-item">
                    <a href="{{ url_for('home.pagina_de_inicio') }}" class="nav-link">{{ _('My Academy') }}</a>
                </li>
                {% else %}
                <li class="nav-item">
                    <a href="{{ url_for('home.panel') }}" class="nav-link">{{ _('My Academy') }}</a>
                </li>
                {% endif %} {% if is_blog_enabled() %}
                <li class="nav-item">
                    <a href="{{ url_for('blog.blog_index') }}" class="nav-link">{{ _('Community') }}</a>
                </li>
                {% endif %} {% if current_user.is_authenticated and (current_user.tipo == "instructor" or current_user.tipo ==
                "admin") %}
                <li class="nav-item">
                    <a href="{{ url_for('instructor_profile.pagina_instructor') }}" class="nav-link">{{ _('Teacher') }}</a>
                </li>
                {% endif %} {% if current_user.is_authenticated and current_user.tipo == "admin" %}
                <li class="nav-item">
                    <a href="{{ url_for('admin_profile.pagina_admin') }}" class="nav-link">{{ _('Admin') }}</a>
                </li>
                {% endif %}
            </ul>
            <div class="text-end">
                {% if not current_user.is_authenticated %}
                <a class="btn btn-ocean-primary me-2" href="{{ url_for('user.inicio_sesion') }}" role="button"
                    >{{ _('Sign Up / Login') }}</a
                >
                {% else %}
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a
                            class="nav-link dropdown-toggle text-decoration-none"
                            href="#"
                            role="button"
                            data-bs-toggle="dropdown"
                            data-bs-display="static"
                            aria-expanded="false"
                            >{{ _('Welcome') }}: {{ current_user.nombre }} {{ current_user.apellido }}</a
                        >
                        <ul class="dropdown-menu dropdown-menu-lg-end">
                            <li>
                                <a class="dropdown-item" href="{{ url_for('user_profile.perfil') }}">
                                    {{ _('User Profile') }}</a
                                >
                            </li>
                            <li><hr class="dropdown-divider" /></li>
                            <li>
                                <a
                                    class="dropdown-item text-decoration-none"
                                    href="#"
                                    data-bs-toggle="modal"
                                    data-bs-target="#oceanModal"
                                    >{{ _('Information') }}</a
                                >
                            </li>
                            <li><hr class="dropdown-divider" /></li>
                            <li>
                                <a class="dropdown-item text-decoration-none" href="{{ url_for('user.cerrar_sesion') }}">
                                    {{ _('Sign Out') }}</a
                                >
                            </li>
                        </ul>
                    </li>
                </ul>
                {% endif %}
            </div>
        </div>
    </div>
</nav>

{% if current_user.is_authenticated %}
<div class="modal fade" id="oceanModal" tabindex="-1" aria-labelledby="oceanModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="oceanModalLabel">Ocean Academic LMS</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <div class="ocean-depth">
                    <h3 style="color: var(--ocean-primary); font-family: &quot;Merriweather&quot;, serif">Ocean Depth</h3>
                    <p class="mb-0">Deep Learning Through Digital Innovation</p>
                </div>
                <strong>{{ _('Versión') }}:</strong> {{ version }}
                <br />
                <strong>{{ _('Nombre de Lanzamiento') }}:</strong> {{ code_name }}
                <br />
                {% if current_user.tipo == "admin" %}
                <strong>Python:</strong> {{ pyversion }}
                <br />
                <strong>Database:</strong> {{ info["DBENGINE"] }}
                <br />
                <strong>Cache:</strong> {{ info["CACHE"] }} {% endif %}
            </div>
            <div class="modal-footer">
                <div class="d-flex justify-content-between w-100">
                    <div>
                        <img
                            width="75"
                            height="20"
                            src="{{ url_for('static', filename='/img/bmo-logo.png') }}"
                            alt="BMO Soluciones"
                        />
                    </div>
                    <div>
                        <a
                            href="https://now-lms-manual.readthedocs.io/en/latest/"
                            class="btn btn-ocean-secondary btn-sm"
                            data-dismiss="modal"
                            >{{ _('Manual de Usuario') }}</a
                        >
                        {% if current_user.tipo == "admin" %}
                        <a
                            href="https://bmosoluciones.github.io/now-lms/"
                            class="btn btn-ocean-secondary btn-sm"
                            data-dismiss="modal"
                            >{{ _('Manual de Administración') }}</a
                        >
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %} {% endmacro %}
