{%- set selectedItem = { href: params.selectedItem } if params.selectedItem is string else params.selectedItem -%}
{%- set selectedSubItem = { href: params.selectedSubItem } if params.selectedSubItem is string else params.selectedSubItem -%}

{% if not params.mobile.disabled %}
<button class="dwp-side-navigation__button" data-module="dwp-side-navigation"
  data-target="dwp-side-navigation-panel"
  data-label-hide="{{ params.mobile.hideButtonText | d("Hide navigation") }}"
  data-label-show="{{ params.mobile.showButtonText | d("Show navigation") }}"
  aria-expanded="false">

  <span class="dwp-side-navigation__section-toggle-focus">
      <span class="dwp-side-navigation__chevron dwp-side-navigation__chevron--down"></span>
      <span class="dwp-side-navigation__section-toggle-text">{{ params.mobile.showButtonText | d("Show navigation") }}</span>
  </span>
</button>
{% endif %}

<nav {% if not params.mobile.disabled %}data-module="dwp-side-navigation-panel"{% endif %} class="dwp-side-navigation{% if not params.mobile.disabled %} dwp-side-navigation--mobile{% endif %}" aria-label="{{ params.ariaLabel or "Side" }}" role="navigation">
    <ul class="dwp-side-navigation__list">
        {% for item in params.items %}
            {% set currentSection = (item.href and item.href === selectedItem.href) or (item.id and item.id === selectedItem.id) %}
            {% set selectedSection = currentSection and not (selectedSubItem.href or selectedSubItem.id) %}
            <li class="dwp-side-navigation__item{{ ' dwp-side-navigation__item--selected' if currentSection }}">
              <a {%- if item.id %} id="{{item.id}}"{% endif %} href="{{ item.href }}" class="dwp-side-navigation__link{{ ' dwp-side-navigation__link--selected' if selectedSection }}"{% if selectedSection %} aria-current="true"{% endif %}>
                  {{ item.text }}
              </a>
              {% if currentSection and (item.subItems.length > 0) %}
                <ul class="dwp-side-navigation__list dwp-side-navigation__list--sub-item">
                  {% for subItem in item.subItems %}
                    {% set currentSubItem = (selectedSubItem.href === subItem.href) or (subItem.id and selectedSubItem.id === subItem.id) %}
                    <li class="dwp-side-navigation__sub-item">
                      <a {%- if subItem.id %} id="{{subItem.id}}"{% endif %} href="{{ subItem.href }}" class="dwp-side-navigation__link{{ ' dwp-side-navigation__link--selected' if currentSubItem }}"{% if currentSubItem %} aria-current="true"{% endif %}>
                        {{subItem.text}}
                      </a>
                    </li>
                  {% endfor %}
                </ul>
              {% endif %}
            </li>
        {% endfor %}
    </ul>
</nav>