<turbo-stream action="append" target="body">
  <template>
    <div id="modal" class="relative z-250 h-svh overflow-hidden" role="dialog" aria-modal="true" data-controller="overlay bridge--nfc" data-overlay-target="overlay" data-action="keydown.esc->overlay#remove keydown.enter->overlay#submitForm" data-bridge--nfc-device-type-value="" data-bridge--nfc-target="modal" data-turbo-temporary>
      <div class="fixed inset-0 bg-gray-500/25 overflow-hidden transition-opacity backdrop-blur-[1px] touch-none" aria-hidden="true"></div>
      <div class="fixed overflow-visible inset-x-0 md:inset-y-0 max-md:bottom-0 z-250 flex flex-col w-screen md:pb-5 px-2 md:px-6 lg:px-20 md:pt-20">
        <div class="flex min-h-0 w-full flex-col mt-(--safe-top-distance) px-3 pt-5 pb-4 mx-auto max-w-xl transform rounded-t-xl md:rounded-b-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all duration-300 ease-out" data-overlay-target="content" data-action="click@window->overlay#closeOnClickOutside">
          <div class="relative py-2">
  <div class="inset-0 flex items-center">
    <div class="grow border-t border-gray-300 mx-1"></div>
    <div class="relative flex justify-center">
      <span class="px-2 text-sm text-gray-500">
        Speciaalbier
      </span>
    </div>
    <div class="grow border-t border-gray-300 mx-1"></div>
  </div>

    <div class="absolute inset-0">
      <div data-action="click-&gt;overlay#remove:prevent" class="max-w-14 relative flex items-center shadow-xs py-1 border border-gray-300 leading-5 rounded-full bg-white px-4 focus:outline-hidden cursor-pointer">
        <div class="icon h-5 w-5 text-black   shrink-0 self-center" data=""><svg xmlns="http://www.w3.org/2000/svg" class="h-full w-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>    </div>
</div>


          <div class="min-h-0 max-h-[80vh] overflow-y-auto overscroll-contain px-1 pb-(--safe-bottom-distance) md:pb-1">
            
    <div class="mb-4 flex flex-col gap-4">
        <img alt="" class="mx-auto h-48 w-auto max-w-full rounded-2xl object-contain sm:h-56" src="https://cdn.20tabs.app/public/obj93k2srxon4yyi5xg0phxl5af4" />
      <div class="min-w-0">
        <p class="font-semibold tabular-nums text-gray-900">€6.00</p>
        
      </div>
    </div>

    <div class="flex items-center justify-center gap-2 rounded-2xl bg-stone-100 px-4 py-3 text-sm font-medium text-gray-600">
      <div class="icon h-5 w-5 text-gray-500   shrink-0 self-center" data=""><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-full w-full">
	<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</div>
      Vanaf 09 okt 21:00
    </div>


          </div>
        </div>
      </div>
    </div>
  </template>
</turbo-stream>

