{#
  Composable scrollable nav entries container.

  Usage:
    {% call nav_entries_oob(has_items=True) %}
      <a href="..." class="{{styles.nav_button_less_pad}}">...</a>
      <a href="..." class="{{styles.nav_button_less_pad}}">...</a>
    {% endcall %}

  Each domain (events, blog, market) provides its own items via the caller block.
#}

{% macro nav_entries_oob(has_items) %}
{% if has_items %}
  <div class="flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"
       id="entries-calendars-nav-wrapper"
       sx-swap-oob="true">
    <button
      class="entries-nav-arrow hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"
      aria-label="Scroll left"
      onclick="document.getElementById('associated-items-container').scrollLeft -= 200">
      <i class="fa fa-chevron-left"></i>
    </button>

    <div id="associated-items-container"
         class="overflow-y-auto sm:overflow-x-auto sm:overflow-y-visible scrollbar-hide max-h-[50vh] sm:max-h-none"
         style="scroll-behavior: smooth;"
         data-scroll-arrows="entries-nav-arrow"
         onscroll="(function(el){var arrows=document.getElementsByClassName('entries-nav-arrow');var show=window.innerWidth>=640&&el.scrollWidth>el.clientWidth;for(var i=0;i<arrows.length;i++){if(show){arrows[i].classList.remove('hidden');arrows[i].classList.add('flex')}else{arrows[i].classList.add('hidden');arrows[i].classList.remove('flex')}}})(this)">
      <div class="flex flex-col sm:flex-row gap-1">
        {{ caller() }}
      </div>
    </div>

    <style>
    .scrollbar-hide::-webkit-scrollbar { display: none; }
    .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
    </style>

    <button
      class="entries-nav-arrow hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"
      aria-label="Scroll right"
      onclick="document.getElementById('associated-items-container').scrollLeft += 200">
      <i class="fa fa-chevron-right"></i>
    </button>
  </div>
{% else %}
  <div id="entries-calendars-nav-wrapper" sx-swap-oob="true"></div>
{% endif %}
{% endmacro %}