{% load wagtailcore_tags %}

{# First 4 items are shown #}
{% for item in primarynav|slice:":4" %}
    {% with link=item.value %}
        <li class="nav-item {% if link.is_page and link.page.slug == 'jobs' and job_count > 0 %}nav-item--with-badge{% endif %}">
            <a class="nav-item__link" href="{{ link.url }}" {% if link.is_page %}data-menu-item{% else %}target="_blank" rel="nofollow noreferrer"{% endif %}>
                <span class="nav-item__title">{{ link.text }}</span>
                {% if not link.is_page %}
                    {% include "patterns/atoms/icons/icon.html" with name="external" classname="nav-item__external-link-icon" %}
                {% endif %}
            </a>
            {% if link.is_page and link.page.slug == 'jobs' and job_count > 0 %}
                <a class="nav-item__badge-link" href="/careers/jobs/" aria-label="{{ job_count }} jobs available">
                    {% include "patterns/atoms/badge/badge.html" with total=job_count %}
                </a>
            {% endif %}
        </li>
    {% endwith %}
{% endfor %}

{% if is_desktop %}
    <li class="nav-item nav-item--with-children" x-data="{ isOpen: false }" {% if is_home == False %} data-primary-nav @tab-close="isOpen=false" {% endif %} >
        <button class="nav-item__button" data-subnav-button @click="isOpen = !isOpen" :aria-expanded="isOpen">
            More
            <span class="nav-item__dots"></span>
        </button>
        <ul class="subnav" x-cloak x-show="isOpen" x-transition>
            {# Other menu items are hidden #}
            {% for item in primarynav|slice:"4:" %}
                {% with link=item.value %}
                    <li class="subnav__item {% if link.is_page and link.page.slug == 'jobs' and job_count > 0 %}subnav__item--with-badge{% endif %}">
                        <a class="subnav__link" data-subnav-link href="{{ link.url }}" {% if link.is_page %}data-menu-item{% else %}target="_blank" rel="nofollow noreferrer"{% endif %} data-subnav-menu-item>
                            {{ link.text }}
                            {# external link icon in dropdown #}
                            {% if not link.is_page %}
                                {% include "patterns/atoms/icons/icon.html" with name="external" classname="subnav__external-link-icon" %}
                            {% endif %}
                        </a>
                        {% if link.is_page and link.page.slug == 'jobs' and job_count > 0 %}
                            <a class="subnav__badge-link" data-subnav-badge-link href="/careers/jobs/" aria-label="{{ job_count }} jobs available">
                                {% include "patterns/atoms/badge/badge.html" with total=job_count %}
                            </a>
                        {% endif %}
                    </li>
                {% endwith %}
            {% endfor %}
        </ul>
        {% if is_home == False %}
            <div class="nav-item__background-overlay" data-subnav-background-overlay x-cloak @click="isOpen = !isOpen" x-show="isOpen" x-transition></div>
        {% endif %}
    </li>
{% else %}
    {# Add the rest of the menu for the mobile dropdown #}
    {% for item in primarynav|slice:"4:" %}
        {% with link=item.value %}
            <li class="nav-item {% if link.is_page and link.page.slug == 'jobs' and job_count > 0 %}nav-item--with-badge{% endif %}">
                <a class="nav-item__link" href="{{ link.url }}" {% if link.is_page %}data-menu-item{% else %}target="_blank" rel="nofollow noreferrer"{% endif %}>
                    <span class="nav-item__title">{{ link.text }}</span>
                </a>
                {% if link.is_page and link.page.slug == 'jobs' and job_count > 0 %}
                    <a class="nav-item__badge-link" href="/careers/jobs/" aria-label="{{ job_count }} jobs available">
                        {% include "patterns/atoms/badge/badge.html" with total=job_count %}
                    </a>
                {% endif %}
            </li>
        {% endwith %}
    {% endfor %}
{% endif %}