{% load i18n static wagtailsettings_tags wagtailimages_tags %}
{% get_settings use_default_site=True %}
{% url 'wagtailadmin_home' as wagtail_admin_url %}
{% url 'wagtailadmin_login' as wagtail_login_url %}

<style>
    nav.navbar {
        height: 49px;
        width: 100%;
        position: absolute;
        top: 0;
        z-index: 9999;
        background: #fff;
        border-bottom: 1px solid rgb(229, 229, 223);
    }

    .navbar-brand {
        display: flex;
        justify-content: space-between;
    }

    .navbar-logo {
        display: block;
        height: 100%;
        max-width: 300px;
        min-width: 200px;
    }

    .navbar-logo img {
        height: 100%;
        max-height: 49px !important;
        width: 100%;
        margin-left: 10px;
        padding: 4px;
        max-width: 200px;
        object-fit: contain;
    }

    @media (max-width: 767px) {
        .navbar-logo img {
            padding: 4px 0;
            margin-left: 0;
        }
    }

    .navbar-menu.is-active {
        display: flex;
        flex-direction: column;
    }

    .navbar-menu.is-active .navbar-item {
        padding: 10px;
    }

    .navbar-item {
        padding: 0 10px;
        margin: 0 5px;
        cursor: pointer;
        color: rgb(85, 85, 85);
        font-size: 14px;
        text-transform: uppercase;
        text-decoration: none;
        position: relative;
        white-space: nowrap;
        line-height: 1;
    }

    .navbar-auth {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 15px;
    }

    .navbar-auth .nav-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 2em;
        padding: calc(0.5em - 1px) 1em;
        font-size: 0.75rem;
        line-height: 1.5;
        text-decoration: none;
        white-space: nowrap;
        border: 1px solid transparent;
        cursor: pointer;
        text-transform: capitalize;
    }

    .navbar-auth .nav-cta {
        background-color: #363636;
        color: #fff;
    }

    .navbar-auth .nav-cta:hover,
    .navbar-auth .nav-cta:focus {
        background-color: #292929;
        color: #fff;
    }
</style>

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        {% with settings.geomanager.geomanagersettings as gm %}
            {% if gm.logo %}
                <a class="navbar-item navbar-logo"
                   href="{{ gm.logo_link }}" {% if gm.logo_external_link and not gm.logo_page %}target="_blank"
                   rel="noopener noreferrer"{% endif %}>
                    {% image gm.logo original as logo_img %}
                    <img src="{{ logo_img.url }}" alt="Brand Logo">
                </a>

            {% else %}
                <a class="navbar-item navbar-logo" href="{{ gm.logo_link }}" target="_blank" rel="noopener noreferrer">
                    <img src="{% static 'geomanager/images/geomapviewer-logo.png' %}"
                         alt="Brand Logo">
                </a>
            {% endif %}
        {% endwith %}
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
           data-target="mainNavbar">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>

    {% if settings.geomanager.geomanagersettings.navigation %}
        <div id="mainNavbar" class="navbar-menu">
            {% for menu_item_block in settings.geomanager.geomanagersettings.navigation %}
                {% for menu_item in menu_item_block.value %}
                    {% if menu_item.page.url or menu_item.external_link %}
                        {% if menu_item.value.page.url %}
                            <a class="navbar-item"
                               href="{{ menu_item.page.url }}"
                               target="_blank"
                               rel="noopener noreferrer">{{ menu_item.label }}
                            </a>
                        {% else %}
                            <a class="navbar-item"
                               href="{{ menu_item.external_link }}"
                               target="_blank"
                               rel="noopener noreferrer">{{ menu_item.label }}
                            </a>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            {% endfor %}
        </div>
    {% endif %}

    <div class="navbar-auth">
        {% if user.is_authenticated %}
            <a class="nav-cta" href="{{ wagtail_admin_url }}">
                {{ user.get_full_name|default:user.username }}, Climweb
            </a>
        {% else %}
            <a class="nav-cta" href="{{ wagtail_login_url }}?next={{ request.path }}">
                {% translate "Log in" %}
            </a>
        {% endif %}
    </div>
</nav>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        // Get all "navbar-burger" elements
        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

        // Add a click event on each of them
        $navbarBurgers.forEach(el => {
            el.addEventListener('click', () => {

                // Get the target from the "data-target" attribute
                const target = el.dataset.target;
                const $target = document.getElementById(target);

                // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
                el.classList.toggle('is-active');
                $target.classList.toggle('is-active');
            });
        });
    });
</script>