{% extends 'knp_menu.html.twig' %}

{% block label %}
{%- set translation_domain = item.extra('translation_domain', 'menu') -%}
{%- set label = item.label -%}
{%- if translation_domain is not same as(false) -%}
  {%- set label = label|trans(item.extra('translation_params', {}), translation_domain) -%}
{%- endif -%}
{%- if options.allow_safe_labels and item.extra('safe_label', false) -%}
  {{- label | raw -}}
{%- else -%}
  {{- label -}}
{%- endif -%}
{% endblock %}

{% block list %}
{% if item.hasChildren and options.depth is not same as(0) and item.displayChildren %}
  {% import _self as knp_menu %}
  <ul
    {{ knp_menu.attributes(listAttributes) }}
    {% if item.level == 0 %}
      x-data="{ selected : null }"
    {% endif %}
    {% if item.level > 0 %}
      x-transition:enter="transition-all duration-200 ease-out"
      x-transition:enter-start="transform opacity-0 scale-95"
      x-transition:enter-end="transform opacity-100 scale-100"
    {% endif %}
    {% if item.level == 1 %}
      x-show="selected === '{{ item.name }}'"
      {% elseif item.level > 1 %}
      x-show="open"
      role="menu"
      aria-orientation="vertical"
      aria-labelledby="{{ item.name }}"
    {% endif %}
    class="float-none flex w-full flex-col font-medium ltr:pl-1.5 rtl:pr-1.5">
    {{ block('children') }}
  </ul>
{% endif %}
{% endblock %}

{% block item %}
{% if item.displayed %}
  {# building the class of the item #}
  {%- set classes = item.attribute('class') is not empty ? [item.attribute('class')] : [] %}
  {%- if matcher.isCurrent(item) %}
    {%- set classes = classes|merge([options.currentClass]) %}
    {%- elseif matcher.isAncestor(item, options.matchingDepth) %}
    {%- set classes = classes|merge([options.ancestorClass]) %}
  {%- endif %}
  {%- if item.actsLikeFirst %}
    {%- set classes = classes|merge([options.firstClass]) %}
  {%- endif %}
  {%- if item.actsLikeLast %}
    {%- set classes = classes|merge([options.lastClass]) %}
  {%- endif %}

  {# Mark item as "leaf" (no children) or as "branch" (has children that are displayed) #}
  {% if item.hasChildren and options.depth is not same as(0) %}
    {% if options.branch_class is not empty and item.displayChildren %}
      {%- set classes = classes|merge([options.branch_class]) %}
    {% endif %}
    {% elseif options.leaf_class is not empty %}
    {%- set classes = classes|merge([options.leaf_class]) %}
  {%- endif %}

  {%- set attributes = item.attributes %}
  {%- if classes is not empty %}
    {%- set attributes = attributes|merge({class: classes|join(' ')}) %}
  {%- endif %}
  {# displaying the item #}
  {% import _self as knp_menu %}
  <li
    {{ knp_menu.attributes(attributes|merge({'class': (attributes.class|default('') ~ ' relative')|trim })) }}
    {% if item.level > 1 %}
      {% if matcher.isAncestor(item) or matcher.isCurrent(item) %}
        x-data="{ open: true }"
      {% else %}
        x-data="{ open: false }"
      {% endif %}
      @keydown.escape.stop="open = false"
    {% endif %}
    {% if matcher.isAncestor(item) or matcher.isCurrent(item) %}
      x-data="{ selected : '{{ item.name }}' }"
    {% endif %}>
    {%- if item.uri is not empty and (not matcher.isCurrent(item) or options.currentAsLink) %}
      {{ block('linkElement') }}
    {%- else %}
      {{ block('spanElement') }}
    {%- endif %}
    {# render the list of children #}
    {%- set childrenClasses = item.childrenAttribute('class') is not empty ? [item.childrenAttribute('class')] : [] %}
    {%- set childrenClasses = childrenClasses|merge(['menu_level_' ~ item.level,'block rounded rounded-t-none top-full z-50 ltr:pl-7 rtl:pr-7 py-0.5 ltr:text-left rtl:text-right mb-1 font-normal']) %}
    {%- set listAttributes = item.childrenAttributes|merge({class: childrenClasses|join(' ')}) %}
    {{ block('list') }}
  </li>
{% endif %}
{% endblock %}

{% block spanElement -%}
{%- import _self as knp_menu %}

<a
  {{ knp_menu.attributes(item.labelAttributes) }}
  {% if item.level == 1 %}
    x-on:click="selected !== '{{ item.name }}' ? selected = '{{ item.name }}' : selected = null"
    :class="
      {
          'text-primary dark:text-indigo-400': selected === '{{ item.name }}'
      }
    "
    class="hover:text-primary-hover flex flex-row px-6 py-2.5 dark:hover:text-gray-300"
  {% else %}
    x-on:click="open = !open"
    id="{{ item.name }}"
    :class="{ 'text-primary': open }"
    class="hover:text-primary-hover flex flex-row px-6 py-2.5 dark:hover:text-gray-300"
    aria-haspopup="true"
    x-bind:aria-expanded="open"
    aria-expanded="false"
  {% endif %}
  href="javascript:">
  {% if item.extra('icon') -%}
    <i
      class="inline-block h-4 w-4 ltr:mr-2 rtl:ml-2 bi bi-house-door {{ item.extra('icon') }}"></i>
  {%- endif %}
  <span>{{ block('label') }}</span>
  <span class="ml-auto inline-block">
    {% if item.level == 1 %}
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="currentColor"
        class="bi bi-chevron-down mt-1.5 transform transition duration-300 ltr:-rotate-90 rtl:rotate-90"
        :class='{ "rotate-0": selected === {{ item.name|json_encode|raw }}, "ltr:-rotate-90 rtl:rotate-90": !(selected === {{ item.name|json_encode|raw }}) }'
        width=".8rem"
        height=".8rem"
        viewBox="0 0 16 16">
        <path fill-rule="evenodd"
              d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
      </svg>
      {% elseif item.level > 1 %}
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="currentColor"
        class="bi bi-chevron-down mt-1.5 transform transition duration-300 ltr:-rotate-90 rtl:rotate-90"
        :class="{ 'rotate-0': open, 'ltr:-rotate-90 rtl:rotate-90': !open }"
        width=".8rem"
        height=".8rem"
        viewBox="0 0 16 16">
        <path fill-rule="evenodd"
              d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
      </svg>
    {% endif %}
  </span>
</a>
{% endblock %}
{% block linkElement -%}
{%- import _self as knp_menu %}
<a
  href="{{ item.uri }}"
  {{ knp_menu.attributes(item.linkAttributes) }}
  :class="
    {
        'text-primary': selected === '{{ item.name }}',
        'dark:text-gray-300': selected === '{{ item.name }}'
    }
  "
  x-on:click="selected !== '{{ item.name }}' ? selected = '{{ item.name }}' : selected = null"
  class="hover:text-primary-hover flex flex-row px-6 py-2.5 dark:hover:text-gray-300">
  {% if item.extra('icon') -%}
    <i class="inline-block h-4 w-4 ltr:mr-2 rtl:ml-2 bi bi-house-door {{ item.extra('icon') }}"></i>
  {%- endif %}
  <span>{{ block('label') }}</span>
</a>
{% endblock %}
