<nav class="breadcrumbs">
  <ol class="inline-flex items-center md:space-x-2 rtl:space-x-reverse">
    <li>
      <button
        class="btn btn-transparent {% if viewParams.appMenu|length > 0 %} btn-dropdown {% endif %} btn-primary"
        {% if viewParams.appMenu|length == 0 %}
          onclick="location.href='{{ config.projectUrl }}/{{ viewParams.activatedApp.manifest.rootUrlSlug }}';"
        {% endif %}
      >
        <span class="icon"><i class="{{ viewParams.activatedApp.manifest.icon }}"></i></span>
        <span class="text">{{ viewParams.activatedApp.manifest.nameTranslated }}</span>
        {% if viewParams.appMenu|length > 0 %}
          <span class="icon"><i class="fas fa-chevron-down"></i></span>
          <div class="menu">
            <div class="list">
              {% for item in viewParams.appMenu %}
                <a href="{{ config.projectUrl }}/{{ item.url }}" class="btn btn-list-item btn-transparent">
                  <span class="icon"><i class="{{ item.icon }}"></i></span>
                  <span class="text">{{ item.title }}</span>
                </a>
              {% endfor %}
            </div>
          </div>
        {% endif %}
      </button>
    </li>
    {% set i = 0 %}
    {% for item in items %}
      <li class="hidden md:block">
        <div class="flex items-center">
          <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
          </svg>
          {% if item.url %}
            <a
              href="{{ config.projectUrl }}/{{ item.url }}"
              class="ms-1 text-sm dark:text-white"
            >{{ item.content|raw }}</a>
          {% else %}
            <div class="ms-1 text-sm dark:text-white">{{ item.content|raw }}</div>
          {% endif %}
        </div>
      </li>
      {% set i = i + 1 %}
    {% endfor %}
  </ol>
</nav>

<script>
  (function () {
    const getDropdowns = () => Array.from(document.querySelectorAll('.btn-dropdown'));

    function closeAll() {
      getDropdowns().forEach(el => el.classList.remove('open'));
    }

    document.addEventListener('click', (event) => {
      const clicked = event.target;
      const btn = clicked.closest('.btn-dropdown');

      if (!btn) {
        closeAll();
        return;
      }

      const insideMenu = clicked.closest('.menu');
      if (insideMenu && btn.contains(insideMenu)) {
        closeAll();
        return;
      }

      event.preventDefault();
      const wasOpen = btn.classList.contains('open');
      closeAll();
      if (!wasOpen) btn.classList.add('open');
    });

    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape') closeAll();
    });
  })();

</script>