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

{% macro action(item, 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">
            {% if showIcon %}
                <span class="nav-icon" aria-hidden="true">
                    {%- if item.icon is defined -%}
                        {{ iconSvg(item.icon) }}
                    {%- elseif item.fontIcon is defined -%}
                        <span data-icon="{{ item.fontIcon }}"></span>
                    {%- else -%}
                        {% include "_includes/fallback-icon.svg.twig" with { label: item.label } %}
                    {%- endif -%}
                </span>
            {% endif %}
        </span>

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

        {%- 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 -%}
    {% 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) }}

                                {% if item.subnav %}
                                    <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 %}
                            </div>

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

                                        <li>
                                            <div class="nav-item nav-item--sub {% if itemIsSelected %}sel{% endif %}">
                                                {{ _self.action(item|merge({
                                                    linkAttributes:  {
                                                        class: ['sidebar-action--sub'],
                                                        aria: {
                                                            current: itemIsSelected ? 'page' : false,
                                                        },
                                                    }
                                                }, recursive=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>
