
    {# Left scroll arrow - desktop only #}
    <button
      class="entries-nav-arrow hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"
      aria-label="Scroll left"
      _="on click
         set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft - 200">
      <i class="fa fa-chevron-left"></i>
    </button>

    {# Widget-driven nav items container #}
    <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;"
         _="on load or scroll
            -- Show arrows if content overflows (desktop only)
            if window.innerWidth >= 640 and my.scrollWidth > my.clientWidth
              remove .hidden from .entries-nav-arrow
              add .flex to .entries-nav-arrow
            else
              add .hidden to .entries-nav-arrow
              remove .flex from .entries-nav-arrow
            end">
      <div class="flex flex-col sm:flex-row gap-1">
        {% for wdata in container_nav_widgets %}
          {% with ctx=wdata.ctx %}
            {% include wdata.widget.template with context %}
          {% endwith %}
        {% endfor %}
      </div>
    </div>

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

    {# Right scroll arrow - desktop only #}
    <button
      class="entries-nav-arrow hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"
      aria-label="Scroll right"
      _="on click
         set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft + 200">
      <i class="fa fa-chevron-right"></i>
    </button>
