{% import "_includes/links" as links %}

{% macro action(item, isSubnav, isSelected, showIcon) %}
    {% set showIcon = showIcon ?? true %}
    {% set selected = item.sel ?? isSelected ?? false %}
    {% set badgeCount = item.badgeCount ?? false %}
    {% set external = item.external ?? false %}

    {% set linkAttributes = {
        id: (item.id ?? null) ? "#{item.id}-link" : null,
        href: (item.url ?? false) ? url(item.url) : null,
        class: [
            'sidebar-action',
            (external ? 'external'),
            (selected ? 'sel'),
        ],
        target: external ? '_blank',
        aria: {
            label: item.ariaLabel ?? false,
        },
    }|merge(item.linkAttributes ?? {}, recursive=true) %}

    {% tag 'a' with linkAttributes %}
        <span class="sidebar-action__prefix">
            <span class="nav-icon" aria-hidden="true">
                {% set icon = item.icon ?? false %}
                {%- if icon is not same as(false) and icon is not same as(null) and icon is not same as('') -%}
                    {{ iconSvg(item.icon) }}
                {%- elseif item.fontIcon ?? false -%}
                    <span data-icon="{{ item.fontIcon }}"></span>
                {%- else -%}
                    <span class="nav-indicator"></span>
                {%- endif -%}
            </span>
        </span>

        <span class="sidebar-action__label">
            <span class="label">{{ item.label }}</span>
            {% if external %}
                {{ links.externalLinkIcon() }}
            {% endif %}
        </span>

        <span class="sidebar-action__suffix">
            {%- if badgeCount -%}
                <span class="sidebar-action__badge">
                    <span class="badge" aria-hidden="true">{{ item.badgeCount|number(decimals=0) }}</span>
                    {{ tag('span', {
                        class: 'visually-hidden',
                        data: {
                            notification: true,
                        },
                        text: '{num, number} {num, plural, =1{notification} other{notifications}}'|t('app', {
                            num: item.badgeCount,
                        }),
                    }) }}
                </span>
            {%- endif -%}
            {% if not isSubnav and (item.subnav ?? false) %}
                <craft-disclosure
                    class="nav-item__trigger"
                    state="{{ item.sel ? 'expanded' : 'collapsed' }}"
                >
                    <button
                        type="button"
                        class="btn menubtn hairline"
                        aria-controls="{{ item.id }}-subnav"
                        aria-describedby="{{ item.id }}-link"
                        aria-expanded="{{ item.sel ?  'true' : 'false' }}"
                    >
                        <span class="visually-hidden">{{ 'Open subnavigation' |t('app') }}</span>
                    </button>
                </craft-disclosure>
            {% endif %}
        </span>
    {% endtag %}
{% endmacro %}

<craft-global-sidebar>
    <header id="global-sidebar" class="global-sidebar">
        <div class="global-sidebar__header">
            {% include '_layouts/components/system-info' %}
        </div>

        <div class="global-sidebar__nav">

            <nav id="nav" class="global-nav" aria-label="{{ 'Primary'|t('app') }}">
                <ul>
                    {% for item in craft.cp.nav() %}
                        {% set itemAttributes = {
                            id: item.id,
                            class: [
                                item.subnav ? 'has-subnav'
                            ],
                        } %}
                        <li {{ attr(itemAttributes) }}>
                            <div class="nav-item {% if item.sel %}sel{% endif %}">
                                {{ _self.action(item, false) }}
                            </div>

                            {% if item.subnav %}
                                <ul
                                    class="nav-item__subnav"
                                    id="{{ item.id }}-subnav"
                                    data-state="{{ item.sel ?  'expanded' : 'collapsed' }}"
                                >
                                    {% for subItemId, subItem in item.subnav %}
                                        {% set itemIsSelected = selectedSubnavItem is defined and selectedSubnavItem == subItemId and subItem.url in craft.app.request.fullPath -%}

                                        <li>
                                            <div class="nav-item nav-item--sub {% if itemIsSelected %}sel{% endif %}">
                                                {{ _self.action(subItem|merge({
                                                    linkAttributes:  {
                                                        class: ['sidebar-action--sub'],
                                                        aria: {
                                                            current: itemIsSelected ? 'page' : false,
                                                        },
                                                    }
                                                }, recursive=true), true, itemIsSelected, false) }}
                                            </div>
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </nav>
        </div>

        <div class="global-sidebar__footer">
            <div class="sidebar-actions">
                {% set toggleContent %}
                    <span class="sidebar-action__prefix">
                        <span class="nav-icon" aria-hidden="true" id="sidebar-toggle-icon">
                            {% if craft.app.locale.getOrientation() == 'rtl' %}
                                {{ iconSvg('angle-left') }}
                            {% else %}
                                {{ iconSvg('angle-right') }}
                            {% endif %}
                        </span>
                    </span>
                    <span class="sidebar-action__label">
                        <span class="label">{{ 'Toggle sidebar'|t('app') }}</span>
                    </span>
                {% endset %}

                {% include '_includes/disclosure-toggle' with {
                    id: 'sidebar-trigger',
                    controls: 'global-sidebar',
                    state: sidebarState,
                    content: toggleContent,
                    attributes: {
                        class: 'sidebar-action',
                    },
                } %}
            </div>

            {% if currentUser.admin and devMode %}
                {% set devModeText = 'Craft CMS is running in Dev Mode.'|t('app') %}
                <div id="devmode">
                    {% tag 'span' with {
                        class: 'visually-hidden',
                    } %}
                        {{ devModeText|raw }}
                    {% endtag %}
                </div>
            {% endif %}
        </div>
    </header>
</craft-global-sidebar>