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


    <form data-overlay-target="form" action="/online/shops/63ee5174-c178-43ac-ab65-4de4d4f9cea3/items?product_id=12" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="3J8Ryq60amBP_yIC7ZFn4E9QLc88_5m5byJRQNfOO7l-FFMjHO4S2rnaLmctLNGEe_ZHRjrw7fWQmqW0PndmLA" autocomplete="off" />
          <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">
        Bijgerechten
      </span>
    </div>
    <div class="grow border-t border-gray-300 mx-1"></div>
  </div>

</div>

          

  <div class="grid gap-2 sm:grid-cols-2">
      <div class="flex h-16 min-w-0 items-center px-3 bg-white border border-gray-200 rounded-xl" data-controller="inline-counter" data-inline-counter-max-choices-value="1" data-inline-counter-outline-classes-value="outline-1 -outline-offset-1 outline-blue-500" data-inline-counter-target="row">
        <div class="flex min-w-0 grow flex-col justify-center items-start">
          <span class="block w-full truncate text-base font-semibold select-none">Aardappelgratin</span>
            <span class="block w-full truncate text-xs text-stone-500 select-none">Toeslag: €5.00</span>
        </div>
          <div class="flex shrink-0 flex-col items-center pl-2">
            <div class="flex items-center">
              <span class="opacity-30 rounded-l-xl bg-stone-400 p-2 h-6 flex items-center justify-center" data-inline-counter-target="decrementButton" data-action="click->inline-counter#decrement"><div class="icon h-6 w-6 text-white   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="w-full h-full">
  <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
</svg>
</div></span>
              <input type="text" name="options[1][17]" id="options_1_17" value="0" readonly="readonly" inputmode="numeric" data-inline-counter-target="counter" data-choice-total-target="counter" data-choice-total-option-max="1" class="select-none w-10 px-0 text-center border-0 bg-transparent rounded-md focus:ring-0" />
              <span class="rounded-r-xl bg-stone-400 p-2 h-6 flex items-center justify-center" data-inline-counter-target="incrementButton" data-action="click->inline-counter#increment"><div class="icon h-6 w-6 text-white   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></span>
            </div>
              <span class="text-xs text-stone-500 select-none">max. 1</span>
          </div>
      </div>
      <div class="flex h-16 min-w-0 items-center px-3 bg-white border border-gray-200 rounded-xl" data-controller="inline-counter" data-inline-counter-max-choices-value="1" data-inline-counter-outline-classes-value="outline-1 -outline-offset-1 outline-blue-500" data-inline-counter-target="row">
        <div class="flex min-w-0 grow flex-col justify-center items-start">
          <span class="block w-full truncate text-base font-semibold select-none">Friet</span>
            <span class="block w-full truncate text-xs text-stone-500 select-none">Toeslag: €4.00</span>
        </div>
          <div class="flex shrink-0 flex-col items-center pl-2">
            <div class="flex items-center">
              <span class="opacity-30 rounded-l-xl bg-stone-400 p-2 h-6 flex items-center justify-center" data-inline-counter-target="decrementButton" data-action="click->inline-counter#decrement"><div class="icon h-6 w-6 text-white   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="w-full h-full">
  <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
</svg>
</div></span>
              <input type="text" name="options[1][19]" id="options_1_19" value="0" readonly="readonly" inputmode="numeric" data-inline-counter-target="counter" data-choice-total-target="counter" data-choice-total-option-max="1" class="select-none w-10 px-0 text-center border-0 bg-transparent rounded-md focus:ring-0" />
              <span class="rounded-r-xl bg-stone-400 p-2 h-6 flex items-center justify-center" data-inline-counter-target="incrementButton" data-action="click->inline-counter#increment"><div class="icon h-6 w-6 text-white   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></span>
            </div>
              <span class="text-xs text-stone-500 select-none">max. 1</span>
          </div>
      </div>
</div>

        <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>

