{% set collapse_breakpoint = '' %}
{% if variant and variant != 'default' %}
  {% set variants = variant|split('__')|map(v => v|replace({(v): 'navbar-' ~ v})|replace({'_': '-'})) %}
  {% set attributes = attributes.addClass(variants) %}

  {# Detect collapse breakpoint. #}
  {% for variant_class in variants %}
    {% set variant_class_parts = variant_class|split('-') %}
    {% if 'expand' in variant_class_parts %}
      {% set collapse_breakpoint = variant_class_parts|last %}
    {% endif %}
  {% endfor %}
{% endif %}

{% set attributes = attributes.addClass('navbar') %}
{% set attributes = 'dark' in variant ? attributes.setAttribute('data-bs-theme', 'dark') : attributes %}

{% set navbar_id = navbar_id|default("navbar-" ~ random()) %}
{% set placement = placement|default('default') %}
{% set toggler_position = toggler_position|default('start') %}
{% set toggle_action = toggle_action|default('collapse') %}
{% set offcanvas_position = offcanvas_position|default('end') %}
{% set attributes = (placement != 'default') ? attributes.addClass(placement) : attributes %}

{% set toggler %}
  <button class="navbar-toggler {{- navigation_collapsible_account or navigation_collapsible_language ? ' ms-1' : '' -}}"
          type="button"
          data-bs-toggle="{{ toggle_action }}"
          data-bs-target="#{{ navbar_id }}"
          aria-controls="{{ navbar_id }}"
          aria-expanded="false"
          aria-label="{{ 'Toggle navigation'|t }}">
    <span class="navbar-toggler-icon"></span>
  </button>
{% endset %}

{% set account_toggler %}
  <button class="navbar-toggler {{- navigation_collapsible_language  ? ' ms-1' : '' -}}"
          type="button"
          data-bs-toggle="{{ toggle_action }}"
          data-bs-target="#{{ navbar_id }}-account"
          aria-controls="{{ navbar_id }}-account"
          aria-expanded="false"
          aria-label="{{ 'Toggle account navigation'|t }}">
    {{ icon('bootstrap', 'person-fill', {size: '30px'}) }}
  </button>
{% endset %}

<nav{{ attributes }}>
  <div class="container-fluid">
    {% if toggler_position == 'start' %}
      {{ toggler }}
      {% if navigation_collapsible_account %}
        {{ account_toggler }}
      {% endif %}
      {% if navigation_collapsible_language %}
        {{ navigation_collapsible_language }}
      {% endif %}
    {% endif %}
    <div class="{{- (toggler_position == 'end') ? 'me-auto' : 'ms-auto' -}}">
      {{ brand|add_class('navbar-brand') }}
      {{ navigation }}
    </div>
    {% if toggler_position == 'end' %}
      {% if navigation_collapsible_language %}
        {{ navigation_collapsible_language }}
      {% endif %}
      {% if navigation_collapsible_account %}
        {{ account_toggler }}
      {% endif %}
      {{ toggler }}
    {% endif %}

    {% if navigation_collapsible %}
      {% if toggle_action == 'offcanvas' %}
        {{ include('ui_suite_bootstrap:offcanvas', {
          'title': offcanvas_label|default('Navigation'|t),
          'body': navigation_collapsible,
          'variant': offcanvas_position,
          'offcanvas_id': navbar_id,
        }, with_context = false) }}
      {% else %}
        <div class="collapse navbar-collapse" id="{{ navbar_id }}">
          {{ navigation_collapsible }}
        </div>
      {% endif %}
    {% endif %}

    {% if navigation_collapsible_account %}
      {% if toggle_action == 'offcanvas' %}
        {{ include('ui_suite_bootstrap:offcanvas', {
          'title':  offcanvas_label_account|default('Account navigation'|t),
          'body': navigation_collapsible_account,
          'variant': offcanvas_position,
          'offcanvas_id':  navbar_id ~ '-account',
        }, with_context = false) }}
      {% else %}
        <div class="collapse navbar-collapse {{- collapse_breakpoint ? ' d-navbar-none d-' ~ collapse_breakpoint ~ '-none'  : '' -}}" id="{{ navbar_id }}-account">
          {{ navigation_collapsible_account }}
        </div>
      {% endif %}
    {% endif %}
  </div>
</nav>
