{# Import the nav macro that does the heavy lifting of recursively rendering a navigation structure. #}
{% import '@mds/navigation/nav-macros.twig' as macros %}


{#
 Convert 'props' (template variables) into CSS classes to build up variants/modifiers.
'Root' modifiers can include: `mds-nav--primary`, `mds-nav--drop-down`, `mds-nav--supplementary`.
/**
  * Available variables:
  * - horizontal - boolean
  * - vertical - boolean
  * - title - string
  * - dropdown - boolean to include dropdown
  * - primary - boolean to set element as the primary menu
  * - modifiers - could be anything: universal modifiers, utilities etc.
  *
  */
#}
{% set root_modifiers = {
  "primary_class" : 'mds-nav--primary',
  "supplementary_class" : 'mds-nav--supplementary',
  "dropdown_class": 'mds-nav--drop-down'
} %}

{# Set root HTML tag - can be <nav> or <section>. #}
{% if nav.primary %}
  {# Use <nav> tag as root only if `primary` is set - non-primary navs should probably not use <nav> tag for a11y reasons. #}
  {% set root_tag = 'nav' %}
  {% set nav  = nav|merge({'list_modifiers':'mds-l-flex-col'}) %}
{% else %}
  {# Use <section> tag as root. #}
  {% set root_tag = 'section' %}
{% endif %}

{# If nav.horizontal is true, set some protected variables to pass down to the template and macros. #}
{% if nav.horizontal %}
  {# Set multiple variables within a condition rather than ternary - i.e. setting 'protected' (or private?) variables to use only in the template. #}

  {# Dynamically add and set a property - list_modifiers to the nav object for use in the macro - setting it to use universal flex modifier for horizontal layout of nav-list. #}
  {% set nav  = nav|merge({'list_modifiers':'mds-l-flex-row'}) %}
{% endif %}

{# If nav.vertical is true, set some protected variables to pass down to the template and macros. #}
{% if nav.vertical %}
  {# Dynamically add and set a property - list_modifiers to the nav object for use in the macro - setting it to use universal flex modifier for horizontal layout of nav-list. #}
  {% set nav  = nav|merge({'list_modifiers':'mds-nav--vertical' }) %}
{% endif %}

<{{root_tag}} aria-label="{{ nav.title }} {{ root_tag == 'section' ? 'section' : 'navigation' }}"
  class="mds-nav
  {# Check if primary is set, apply suitable class. #}
  {{ nav.primary ? root_modifiers.primary_class : root_modifiers.supplementary_class }}

  {# Check if dropdown is set, apply suitable class. #}
  {{ nav.dropdown ? root_modifiers.dropdown_class : null }}

  {# Finally append any other modifiers - could be anything: universal modifiers, utilities etc. #}
  {{ nav.modifiers }}"

data-elastic-exclude>
  {# Use the do_nav macro to recursively construct nav. markup. #}
  {{ macros.do_nav(nav) }}
</{{root_tag}}>