{#
    Nav
    --
    These macros are designed for building the primary navigation and user
    navigation.

    By default, the prime nav is generated by the nav system in the python. It
    is strongly recommended that any navigation links are added/removed using
    python, however if required, you can overide the prime navigation in your
    local template like so:
--------------------------------------------------------------------------------
{%- import "macros/nav.html" as _nav -%}

{% block prime_nav -%}
    {% macro prime_nav_list() %}
        <div class="mh-nav__group">
            <div class="mh-nav__item">
                <span class="mh-nav__link">
                    <span class="mh-nav__link-text">Links</span>
                </span>

                <div class="mh-nav__sub-list  mh-nav__sub-list--2">
                    <div class="mh-nav__item">
                        <a class="mh-nav__link" href="/some-url-1">
                            <span class="mh-nav__link-text">Link 1</span>
                        </a>
                    </div>

                    <div class="mh-nav__item">
                        <a class="mh-nav__link" href="/some-url-2">
                            <span class="mh-nav__link-text">Link 2</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="mh-nav__item">
                <a class="mh-nav__link" href="/some-url">
                    <span class="mh-nav__link-text">Link 3</span>
                </a>
            </div>

            ...
        </div>

        ...
    {% endmacro %}

    {{ _nav.prime_nav(prime_nav_list()) }}
{%- endblock %}
--------------------------------------------------------------------------------
    Taking this approach allows you to retain the prime nav container formatting
    but overwrite the inner list of nav items/links.

    The user nav component is very similar to the prime nav component in it's
    HTML/CSS construction but is not generated using python. By default, the
    user's name, the update profile link and the sign out link are added, as
    these are standard behaviour in any CMS, however, if required, you can
    overwrite these links like so:
--------------------------------------------------------------------------------
{% block user_nav -%}
    {% macro user_nav_list() %}
        ...
    {% endmacro %}

    {{ _nav.user_nav(user_nav_list()) }}
{%- endblock %}
--------------------------------------------------------------------------------
#}

{#
    Prime nav
    --
    The containing element for the `prime_nav` component. Must be passed `list`
    as a mixin which should contain the list of links in for the navigation.
#}
{% macro prime_nav(list) -%}
    <div class="[ mh-nav__section  mh-nav__section--prime ]  [ mh-nav-section ]">
        <div class="mh-handle">
            <div class="[ mh-handle__grip ]  [ mh-grip ]">
                <div class="mh-grip__bars"></div>
            </div>
        </div>

        <div class="mh-nav-section__items">
            {{ list }}
        </div>
    </div>
{%- endmacro %}

{#
    Nav list
    --
    A mixin used in conjunction with the python generated navigation items to
    work out whether the item passed is a parent or child element in the
    navigation tree structure.
#}
{% macro nav_list(item) -%}
    {% if item.parent -%}
        {{ nav_item(item) }}
    {%- else -%}
        {% for child in item.children -%}
            {{ nav_item(child) }}
        {%- endfor %}
    {%- endif %}
{%- endmacro %}

{#
    Nav item
    --
    A mixin used in conjunction with the python generated navigation items to
    build the container for a navigation item and it's sub-list if it is a
    parent item.
#}
{% macro nav_item(item) -%}
    {% if item.data.group %}
        <div class="mh-nav-group">
            {% if item.label %}
                <span class="mh-nav-group__label">{{ item.label }}</span>
            {% endif %}
            <div class="mh-nav-group__items">
                {% for child in item.children -%}
                    {{ nav_list(child) }}
                {%- endfor %}
            </div>
        </div>
    {% else %}
        <div
            class="
                [ mh-nav-item ]
                {{ 'mh-nav-item--has-children' if item.is_parent }}
                {{ 'mh-nav-item--open' if item.is_parent and item.is_open }}
            "
            >
            {{ nav_link(item) }}
            {% if item.is_parent -%}
                <div
                    class="
                        mh-nav-item__children
                        mh-nav-item__children--{{ item.visible_child_count }}
                    "
                    >
                    {% for child in item.children -%}
                        {{ nav_list(child) }}
                    {%- endfor %}
                </div>
            {%- endif %}
        </div>
    {% endif %}
{%- endmacro %}

{#
    Nav link
    --
    A mixin used in conjunction with the python generated navigation items to
    build the link element.
#}
{% macro nav_link(item) -%}
    {% set badge = item.badge %}
    {% set icon = item.data.icon  %}
    {% set link = item.query %}

    {% if item.endpoint -%}
        {% if link.allowed -%}
            <a
                class="
                    [ mh-nav-item__link ]
                    [
                        mh-nav-link
                        {{ 'mh-nav-link--active' if item.is_active }}
                    ]
                "
                href="{{ link.url }}"
                >
                {{ nav_link_label(item.label, badge, icon) }}
            </a>
        {%- else -%}
            <span class="
                [ mh-nav-item__link ]
                [ mh-nav-link  mh-nav-link--disabled ]
                ">
                {{ nav_link_label(item.label, badge, icon) }}
            </span>
        {%- endif %}
    {%- elif item.fixed_url -%}
        <a
            class="[ mh-nav-item__link ]  [ mh-nav-link ]"
            href="{{ item.fixed_url }}"
            target="_blank"
            >
            {{ nav_link_label(item.label, badge, icon) }}
        </a>
    {%- else -%}
        <span class="[ mh-nav-item__link ]  [ mh-nav-link ]">
            {{ nav_link_label(item.label, badge, icon) }}
        </span>
    {%- endif %}
{%- endmacro %}

{#
    Nav link text
    --
    A mixin used in conjunction with the python generated navigation items to
    build the text and badge (if applicable) for the nav link.
#}
{% macro nav_link_label(text, badge, icon) -%}
    <span class="
        mh-nav-link__label
        {{ 'mh-nav-link__label--icon-' + icon if icon }}
        ">
        {{ text }}
    </span>

    {% if badge is sameas True -%}
        <span class="mh-nav-link__badge"></span>
    {%- elif badge -%}
        <span class="mh-nav-link__tally">
            {{ badge if badge < 100 else '...' }}
        </span>
    {%- endif %}
{%- endmacro %}

{#
    User nav
    --
    The containing element for the `user_nav` component. Must be passed `list`
    as a mixin which should contain the list of links used for the navigation.
    It assumes that a badge is passed to the but will default to display the
    user's name if a badge is not available. At least one of these 2 must be
    passed. If neither are available/needed, you can overide the entire
    `user_nav` component tp remove it from the page.
#}
{% macro user_nav(list, user=None, badge=None, mobile_badge=None) -%}
    <div class="
        [ mh-nav__section  mh-nav__section--user ]
        [ mh-nav-section ]
        ">
        <div class="mh-handle">
            <div class="[ mh-handle__user-badge ] [ mh-user-badge ]">
                <div class="mh-user-badge__icon"></div>
                <div class="mh-user-badge__image"></div>

                <div class="mh-user-badge__name">
                    {% if badge %}
                        {{ badge }}
                    {% elif user %}
                        {{ user.first_name }}
                        <br>
                        {{ user.last_name }}
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="mh-nav-section__items">
            <div class="mh-user-badge  mh-user-badge--mobile ]">
                <div class="mh-user-badge__name">
                    {% if mobile_badge %}
                        {{ mobile_badge }}
                    {% elif user %}
                        {{ user.full_name }}
                    {% endif %}
                </div>
            </div>

            {{ list }}
        </div>
    </div>
{%- endmacro %}
