<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">
        Tomatensoep
      </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/eirzee8td5pmri2k2yq13yadjyt5" />
      <div class="min-w-0">
        <p class="font-semibold tabular-nums text-gray-900">€5.00</p>
        
      </div>
    </div>


    <form data-overlay-target="form" action="/online/shops/63ee5174-c178-43ac-ab65-4de4d4f9cea3/items?product_id=2" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="EceWZR4i12FLKI1JD_7BIr4cKDJGEnQgw6D-uNiOMUBvY0UJp1fMWjTDms_lX2cZIJyEUVj50npmcizND70ixA" autocomplete="off" />

        <input type="text" name="note" id="note" maxlength="140" placeholder="Opmerking" aria-label="Opmerking" class="mt-5 block w-full rounded-2xl border-0 bg-stone-50 px-4 py-3 text-base text-gray-900 ring-1 ring-stone-900/10 placeholder:text-gray-400 focus:bg-white focus:ring-2 focus:ring-green-600" />

        <button type="submit" class="btn flex w-full items-center justify-center gap-2 rounded-full px-6 py-4 text-lg font-semibold transition active:scale-[0.98] disabled:opacity-60 shadow-lg active:brightness-95 bg-green-600 text-gray-100 sticky bottom-0 mt-5">
    <div class="icon h-6 w-6 text-current   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="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</div>
    Toevoegen
    
</button>
</form>
          </div>
        </div>
      </div>
    </div>
  </template>
</turbo-stream>

