<turbo-stream method="morph" action="replace" target="booking-main"><template>

<div id="booking-main" class="tw:mx-auto tw:flex tw:max-w-5xl tw:flex-col tw:px-4 tw:mb-12">
  

  
<div class="tw:hidden tw:leading-4 tw:sm:block" data-test="breadcrumbs">

    <div class="tw:inline-block">
      <form class="button_to" method="get" action="https://www.dockspot.com/de/docks/707-figeholms-gasthamn"><button class="tw:btn tw:btn-secondary tw:text-primary" type="submit">Hafen</button></form>
    </div>

    <span class="tw:material-icon tw:inline-block tw:align-middle tw:text-xl tw:text-base-400">chevron_right</span>

  <div class="tw:inline-block">
    <div class="tw:px-6
                tw:py-2
                tw:text-[18px]
                tw:text-center
                tw:rounded-md
                tw:transition-colors
                tw:box-border
                tw:border
                tw:bg-base-100
                tw:border-base-300">
      Spot-Auswahl
    </div>
  </div>
</div>

<div class="tw:sm:hidden">

    <form class="button_to" method="get" action="https://www.dockspot.com/de/docks/707-figeholms-gasthamn"><button class="tw:text-primary tw:flex tw:items-center tw:gap-1" type="submit"><span class="tw:material-icon tw:size-4">arrow_back</span> Zurückgehen</button></form>
</div>


  <header class="tw:mt-4 tw:pb-8">
    <h1 class="tw:text-2xl tw:lg:text-4xl">
        Drop-In
    </h1>
  </header>

    <div class="tw:relative tw:flex tw:items-start">
      <main class="tw:flex-1">
        <form id="drop_in" data-turbo="true" data-turbo-stream="true" data-controller="turbo-submit bookings-drop-in-spot-selection" data-turbo-submit-target="form" data-action="bookings-drop-in-spot-selection:selected-&gt;turbo-submit#requestSubmit" data-bookings-drop-in-spot-selection-bookings-drop-in-spot-selection-map-outlet=".spot-selection-map" class="tw:group" novalidate="novalidate" action="https://www.dockspot.com/de/docks/707-figeholms-gasthamn/drop_in/overnight" accept-charset="UTF-8" method="get">
          <input value="overnight" autocomplete="off" type="hidden" name="stay_type" id="stay_type" />
          <div data-bookings-drop-in-spot-selection-target="formFields">
            <div class="tw:w-full tw:mb-7">
              <label for="spot_display">Ich liege am</label>

<div class="tw:flex tw:gap-2 tw:items-end tw:mb-2">
  <div class="tw:relative tw:mt-2 tw:w-full" id="spot_selection" data-controller="dropdown list-filter list-navigation" data-action="dropdown:selected-&gt;turbo-submit#requestSubmit dropdown:cleared-&gt;turbo-submit#requestSubmit dropdown:opened-&gt;list-filter#focus list-filter:filtered-&gt;list-navigation#reset">

  <div class="tw:hidden">
    <label for="spot_id">Ich liege am</label>
    <select data-dropdown-target="selectInput" data-bookings-drop-in-spot-selection-target="selectInput" data-action="change-&gt;dropdown#refreshFromSelectInput" name="spot_id" id="spot_id"><option value="">— Wähle Liegeplatz —</option>
<option value="5864">Gamla kajen 29</option>
<option value="5865">Gamla kajen 30</option>
<option value="5866">Gamla kajen 31</option>
<option value="5867">Gamla kajen 32</option>
<option value="5868">Gamla kajen 33</option>
<option value="5869">Gamla kajen 34</option>
<option value="5870">Gamla kajen 35</option>
<option value="5871">Gamla kajen 36</option>
<option value="5837">Gamla kajen 37</option>
<option value="5872">Gamla kajen 38</option>
<option value="5873">Gamla kajen 39</option>
<option value="5874">Gamla kajen 40</option>
<option value="5875">Gamla kajen 41</option>
<option value="5876">Gamla kajen 42</option>
<option value="5877">Gamla kajen 43</option>
<option value="5878">Gamla kajen 44</option>
<option value="5879">Gamla kajen 45</option>
<option value="5836">Gamla kajen 46</option>
<option value="5880">Gamla kajen 47</option>
<option value="5881">Gamla kajen 48</option>
<option value="5882">Gamla kajen 49</option>
<option value="5883">Gamla kajen 50</option>
<option value="5884">Gamla kajen 51</option>
<option value="5885">Gamla kajen 52</option>
<option value="5886">Gamla kajen 53</option>
<option value="5887">Gamla kajen 54</option>
<option value="5955">Gamla kajen red/green</option>
<option value="5947">Vasakajen 101</option>
<option value="5948">Vasakajen 102</option>
<option value="5949">Vasakajen 103</option>
<option value="5950">Vasakajen 104</option>
<option value="5951">Vasakajen 105</option>
<option value="5953">Vasakajen red/green</option>
<option value="5954">Vedudden red/green</option></select>
  </div>

  <input type="text" id="spot_display" class="tw:peer/combobox tw:mb-0 tw:cursor-pointer tw:rounded-lg tw:py-1.5 tw:pl-3 tw:pr-12 tw:focus:outline-hidden tw:focus:cursor-text tw:placeholder:font-medium tw:placeholder:text-base-500 tw:focus:border-sky-500" autocomplete="off" placeholder="Suche nach Liegeplatz" data-action="click-&gt;dropdown#open:stop keydown.up-&gt;list-navigation#navigateUp:prevent keydown.down-&gt;list-navigation#navigateDown:prevent keydown.enter-&gt;dropdown#selectActive:prevent keydown.esc-&gt;dropdown#close input-&gt;list-filter#filter:stop" data-dropdown-target="combobox" data-list-filter-target="search" />

  <button name="button" type="button" class="tw:absolute tw:inset-y-0 tw:right-6 tw:flex tw:items-center tw:px-2 tw:text-sky-500 tw:hover:text-sky-800 tw:focus:outline-hidden tw:peer-placeholder-shown/combobox:invisible" data-action="dropdown#clear:stop"><span class="tw:material-icon tw:text-xl">cancel</span></button>

  <button name="button" type="button" class="tw:absolute tw:inset-y-0 tw:right-0 tw:flex tw:items-center tw:px-2 tw:focus:outline-hidden" data-action="click-&gt;dropdown#toggle:stop"><span class="tw:material-icon tw:text-sky-500">unfold_more</span></button>

  <div class="tw:absolute tw:z-10 tw:hidden tw:max-h-60 tw:w-full tw:bg-white tw:overflow-auto tw:rounded-lg tw:pb-1 tw:mt-1 tw:text-base-700 tw:shadow-lg tw:ring-1 tw:ring-black/5 tw:focus:outline-hidden tw:sm:text-base/6 tw:aria-expanded:block" aria-expanded="false" data-dropdown-target="list">

    <ul role="listbox">
        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5864" data-label="Gamla kajen 29" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 29</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5865" data-label="Gamla kajen 30" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 30</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5866" data-label="Gamla kajen 31" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 31</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5867" data-label="Gamla kajen 32" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 32</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5868" data-label="Gamla kajen 33" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 33</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5869" data-label="Gamla kajen 34" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 34</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5870" data-label="Gamla kajen 35" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 35</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5871" data-label="Gamla kajen 36" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 36</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5837" data-label="Gamla kajen 37" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 37</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5872" data-label="Gamla kajen 38" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 38</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5873" data-label="Gamla kajen 39" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 39</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5874" data-label="Gamla kajen 40" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 40</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5875" data-label="Gamla kajen 41" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 41</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5876" data-label="Gamla kajen 42" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 42</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5877" data-label="Gamla kajen 43" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 43</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5878" data-label="Gamla kajen 44" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 44</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5879" data-label="Gamla kajen 45" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 45</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5836" data-label="Gamla kajen 46" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 46</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5880" data-label="Gamla kajen 47" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 47</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5881" data-label="Gamla kajen 48" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 48</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5882" data-label="Gamla kajen 49" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 49</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5883" data-label="Gamla kajen 50" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 50</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5884" data-label="Gamla kajen 51" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 51</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5885" data-label="Gamla kajen 52" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 52</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5886" data-label="Gamla kajen 53" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 53</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5887" data-label="Gamla kajen 54" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen 54</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5955" data-label="Gamla kajen red/green" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Gamla kajen red/green</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5947" data-label="Vasakajen 101" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Vasakajen 101</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5948" data-label="Vasakajen 102" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Vasakajen 102</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5949" data-label="Vasakajen 103" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Vasakajen 103</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5950" data-label="Vasakajen 104" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Vasakajen 104</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5951" data-label="Vasakajen 105" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Vasakajen 105</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5953" data-label="Vasakajen red/green" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Vasakajen red/green</span>
</li>        <li role="option" class="tw:group tw:relative tw:cursor-default tw:select-none tw:py-2 tw:pl-8 tw:pr-9 tw:text-base-900 tw:data-[active=true]:bg-sky-100" tabindex="-1" data-action="click-&gt;dropdown#select mouseover-&gt;list-navigation#navigateTo" data-dropdown-target="option" data-list-filter-target="option" data-list-navigation-target="option" data-value="5954" data-label="Vedudden red/green" data-active="false" aria-selected="false">
          <span class="tw:absolute tw:inset-y-0 tw:left-0 tw:hidden tw:items-center tw:pl-1.5 tw:group-aria-selected:flex"><span class="tw:material-icon">check</span></span>
          <span class="tw:block">Vedudden red/green</span>
</li></ul>
</div></div>

  <a href="#" data-action="click->bookings-drop-in-spot-selection#showMap" class="tw:flex tw:items-center tw:gap-1 tw:btn tw:py-[9px] tw:px-3 tw:leading-7 tw:group-aria-busy:hidden">
    <div class="tw:material-icon">map</div>
    <div>Karte</div>
  </a>

  <span class="tw:items-center tw:gap-1 tw:btn tw:py-[9px] tw:px-3 tw:leading-7 tw:text-base-400 tw:hidden tw:group-aria-busy:flex">
    <div class="tw:material-icon">map</div>
    <div>Karte</div>
  </span>
</div>

<div class="tw:mb-2 tw:mt-2 tw:hidden tw:group-aria-busy:block">
  <i class="tw:material-icon tw:animate-spin tw:text-base-500">refresh</i>
</div>

  <div class="tw:mb-4 tw:mt-2 tw:flex tw:group-aria-busy:hidden">
    <i class="material-icons tw:mr-2 tw:text-brand">info</i>
    <div class="tw:text-base-500">
      Wenn der Liegeplatz nicht in der Liste aufgeführt ist, steht er derzeit nicht zur Verfügung.
    </div>
  </div>

            </div>

              <div class="tw:w-full tw:mb-4">
                  <label for="date_picker_display">Ich möchte bleiben bis</label>


<div class="tw:flex">
  <span
    data-controller="end-date-picker"
    data-end-date-picker-locale-value="de"
    data-end-date-picker-start-date-value="2026-05-26"
    data-end-date-picker-first-selectable-end-date-value="2026-05-27"
    data-end-date-picker-last-selectable-end-date-value="2026-09-25"
    class="tw:max-w-40"
  >
    <input type="text" id="date_picker_display" value="05/27/2026" class="" autocomplete="off" data-end-date-picker-target="display" />
  <input value="2026-05-27" data-end-date-picker-target="value" autocomplete="off" type="hidden" name="checkout_date" id="checkout_date" />
  </span>

    <span class="tw:p-2.5 tw:text-base-500">&mdash; spätestens 12:00 Uhr</span>
</div>


              </div>

                <div class="tw:w-full tw:flex tw:justify-between">
                      <div class="tw:mb-4 tw:grow tw:mx-1">
      <label for="boat_length">Bootslänge</label>

      <div class="tw:flex">
  <input min="0.01" max="100" step="0.01" autocomplete="off" class="tw:rounded-none tw:rounded-l-lg tw:m-0 tw:h-auto tw:leading-8" data-controller="measurement-field" data-action="measurement-field#normalizeAndValidate blur-&gt;measurement-field#roundValue" type="text" name="boat_length" id="boat_length" />
  <span class="tw:text-base-500 tw:border-base-300 tw:border-t tw:border-b tw:border-r tw:rounded-r-lg tw:py-2 tw:px-1">m</span>
</div>


        <p class="tw:italic tw:text-base-800 tw:opacity-40 tw:mt-2">Gesamt (<abbr title="Länge über alles">LOA</abbr>)</p>
    </div>
    <div class="tw:mb-4 tw:grow tw:mx-1">
      <label for="boat_width">Bootsbreite</label>

      <div class="tw:flex">
  <input min="0.01" max="10" step="0.01" autocomplete="off" class="tw:rounded-none tw:rounded-l-lg tw:m-0 tw:h-auto tw:leading-8" data-controller="measurement-field" data-action="measurement-field#normalizeAndValidate blur-&gt;measurement-field#roundValue" type="text" name="boat_width" id="boat_width" />
  <span class="tw:text-base-500 tw:border-base-300 tw:border-t tw:border-b tw:border-r tw:rounded-r-lg tw:py-2 tw:px-1">m</span>
</div>


    </div>
    <div class="tw:mb-4 tw:grow tw:mx-1">
      <label for="boat_depth">Tiefgang</label>

      <div class="tw:flex">
  <input min="0.01" max="10" step="0.01" autocomplete="off" class="tw:rounded-none tw:rounded-l-lg tw:m-0 tw:h-auto tw:leading-8" data-controller="measurement-field" data-action="measurement-field#normalizeAndValidate blur-&gt;measurement-field#roundValue" type="text" name="boat_depth" id="boat_depth" />
  <span class="tw:text-base-500 tw:border-base-300 tw:border-t tw:border-b tw:border-r tw:rounded-r-lg tw:py-2 tw:px-1">m</span>
</div>


    </div>

                </div>

                <div class="tw:mb-4 tw:mt-2 tw:flex">
  <i class="material-icons tw:mr-2 tw:text-brand">warning</i>
  <div class="tw:text-base-500">
      Denken Sie daran, dass Sie bereits am Liegeplatz sein müssen. Eine Erstattung erfolgt nicht, falls der Platz bei Ankunft belegt ist.
  </div>
</div>


              <input type="submit" name="commit" value="zur Kasse gehen" class="tw:btn tw:btn-primary tw:w-full" formaction="https://www.dockspot.com/de/docks/707-figeholms-gasthamn/drop_in" formmethod="POST" data-disable-with="zur Kasse gehen" />
          </div>

          <div
  id="spot-map-8e5f5883-dad6-4ebd-b5e1-ad65b7ce5101"

  data-bookings-drop-in-spot-selection-target="spotMap"
  data-controller="bookings-drop-in-spot-selection-map"
  data-bookings-drop-in-spot-selection-map-config-value="{&quot;center&quot;:{&quot;lat&quot;:57.37123549120528,&quot;lng&quot;:16.554100570911654},&quot;zoom&quot;:17,&quot;maxInitialZoom&quot;:19,&quot;maxSpotZoom&quot;:20,&quot;mapType&quot;:&quot;satellite&quot;,&quot;piers&quot;:[],&quot;mapId&quot;:&quot;86381333d0bd9f95&quot;}"
  data-bookings-drop-in-spot-selection-map-spots-value="[{&quot;id&quot;:5864,&quot;position&quot;:{&quot;lat&quot;:57.37037437792836,&quot;lng&quot;:16.55248195420994},&quot;number&quot;:&quot;Gamla kajen 29&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5865,&quot;position&quot;:{&quot;lat&quot;:57.37036063841742,&quot;lng&quot;:16.55254364501728},&quot;number&quot;:&quot;Gamla kajen 30&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5866,&quot;position&quot;:{&quot;lat&quot;:57.37034979143147,&quot;lng&quot;:16.55258924257054},&quot;number&quot;:&quot;Gamla kajen 31&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5867,&quot;position&quot;:{&quot;lat&quot;:57.3703346056457,&quot;lng&quot;:16.55266970884098},&quot;number&quot;:&quot;Gamla kajen 32&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5868,&quot;position&quot;:{&quot;lat&quot;:57.37032231238599,&quot;lng&quot;:16.55272335302128},&quot;number&quot;:&quot;Gamla kajen 33&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5869,&quot;position&quot;:{&quot;lat&quot;:57.37031146538868,&quot;lng&quot;:16.55277163278355},&quot;number&quot;:&quot;Gamla kajen 34&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5870,&quot;position&quot;:{&quot;lat&quot;:57.37029917212121,&quot;lng&quot;:16.55282930027737},&quot;number&quot;:&quot;Gamla kajen 35&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5871,&quot;position&quot;:{&quot;lat&quot;:57.37031797358749,&quot;lng&quot;:16.55290842544331},&quot;number&quot;:&quot;Gamla kajen 36&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5837,&quot;position&quot;:{&quot;lat&quot;:57.37034183697308,&quot;lng&quot;:16.55293306823863},&quot;number&quot;:&quot;Gamla kajen 37&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5872,&quot;position&quot;:{&quot;lat&quot;:57.3703664234753,&quot;lng&quot;:16.5529607285191},&quot;number&quot;:&quot;Gamla kajen 38&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5873,&quot;position&quot;:{&quot;lat&quot;:57.3703910099611,&quot;lng&quot;:16.55298486840023},&quot;number&quot;:&quot;Gamla kajen 39&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5874,&quot;position&quot;:{&quot;lat&quot;:57.3704127039054,&quot;lng&quot;:16.55300900828137},&quot;number&quot;:&quot;Gamla kajen 40&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5875,&quot;position&quot;:{&quot;lat&quot;:57.37044018288317,&quot;lng&quot;:16.55303448926701},&quot;number&quot;:&quot;Gamla kajen 41&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5876,&quot;position&quot;:{&quot;lat&quot;:57.37046549244973,&quot;lng&quot;:16.55305862914814},&quot;number&quot;:&quot;Gamla kajen 42&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5877,&quot;position&quot;:{&quot;lat&quot;:57.37048574009037,&quot;lng&quot;:16.55307740461125},&quot;number&quot;:&quot;Gamla kajen 43&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5878,&quot;position&quot;:{&quot;lat&quot;:57.37050309520207,&quot;lng&quot;:16.55309483896984},&quot;number&quot;:&quot;Gamla kajen 44&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5879,&quot;position&quot;:{&quot;lat&quot;:57.37052117343472,&quot;lng&quot;:16.55311093222393},&quot;number&quot;:&quot;Gamla kajen 45&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5836,&quot;position&quot;:{&quot;lat&quot;:57.37055275003023,&quot;lng&quot;:16.55309131857051},&quot;number&quot;:&quot;Gamla kajen 46&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5880,&quot;position&quot;:{&quot;lat&quot;:57.3705681767978,&quot;lng&quot;:16.55305594693913},&quot;number&quot;:&quot;Gamla kajen 47&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5881,&quot;position&quot;:{&quot;lat&quot;:57.37057830059121,&quot;lng&quot;:16.55301839601292},&quot;number&quot;:&quot;Gamla kajen 48&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5882,&quot;position&quot;:{&quot;lat&quot;:57.37059059376512,&quot;lng&quot;:16.55298486840023},&quot;number&quot;:&quot;Gamla kajen 49&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5883,&quot;position&quot;:{&quot;lat&quot;:57.37060216380743,&quot;lng&quot;:16.5529432941605},&quot;number&quot;:&quot;Gamla kajen 50&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5884,&quot;position&quot;:{&quot;lat&quot;:57.37061301071878,&quot;lng&quot;:16.55290842544331},&quot;number&quot;:&quot;Gamla kajen 51&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5885,&quot;position&quot;:{&quot;lat&quot;:57.37062313449982,&quot;lng&quot;:16.55287489783062},&quot;number&quot;:&quot;Gamla kajen 52&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5886,&quot;position&quot;:{&quot;lat&quot;:57.37063108889721,&quot;lng&quot;:16.55284941684498},&quot;number&quot;:&quot;Gamla kajen 53&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5887,&quot;position&quot;:{&quot;lat&quot;:57.37064048954648,&quot;lng&quot;:16.55282125365033},&quot;number&quot;:&quot;Gamla kajen 54&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5955,&quot;position&quot;:{&quot;lat&quot;:57.370484111321574,&quot;lng&quot;:16.55186975373423},&quot;number&quot;:&quot;Gamla kajen red/green&quot;,&quot;description&quot;:&quot;Gamla kajen Rot/Grün&quot;},{&quot;id&quot;:5947,&quot;position&quot;:{&quot;lat&quot;:57.37199819808188,&quot;lng&quot;:16.55549914013029},&quot;number&quot;:&quot;Vasakajen 101&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5948,&quot;position&quot;:{&quot;lat&quot;:57.37203146066732,&quot;lng&quot;:16.55558497081877},&quot;number&quot;:&quot;Vasakajen 102&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5949,&quot;position&quot;:{&quot;lat&quot;:57.37206327702512,&quot;lng&quot;:16.55566543708921},&quot;number&quot;:&quot;Vasakajen 103&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5950,&quot;position&quot;:{&quot;lat&quot;:57.37209653955149,&quot;lng&quot;:16.55574053894163},&quot;number&quot;:&quot;Vasakajen 104&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5951,&quot;position&quot;:{&quot;lat&quot;:57.37212401726789,&quot;lng&quot;:16.55581027637602},&quot;number&quot;:&quot;Vasakajen 105&quot;,&quot;description&quot;:&quot;&quot;},{&quot;id&quot;:5953,&quot;position&quot;:{&quot;lat&quot;:57.37187041006004,&quot;lng&quot;:16.55500426930657},&quot;number&quot;:&quot;Vasakajen red/green&quot;,&quot;description&quot;:&quot;Vasakajen rot/grün&quot;},{&quot;id&quot;:5954,&quot;position&quot;:{&quot;lat&quot;:57.37100195254902,&quot;lng&quot;:16.55327472294692},&quot;number&quot;:&quot;Vedudden red/green&quot;,&quot;description&quot;:&quot;Vedudden rot/grün&quot;}]"
  data-bookings-drop-in-spot-selection-map-selected-spot-id-value=""
  data-bookings-drop-in-spot-selection-map-spot-icon-value="https://www.dockspot.com/assets/icons/spots/drop_in/spot-e7b46cfa.svg"
  data-bookings-drop-in-spot-selection-map-spot-selected-icon-value="https://www.dockspot.com/assets/icons/spots/drop_in/spot_selected-f83b3497.svg"
  data-bookings-drop-in-spot-selection-map-delay-marker-icon-update-value="false"
  data-action="bookings-drop-in-spot-selection-map:spotSelected-&gt;bookings-drop-in-spot-selection#selectSpot bookings-drop-in-spot-selection-map:close-&gt;bookings-drop-in-spot-selection#showList"
  class="spot-selection-map tw:fixed tw:left-0 tw:top-0 tw:h-dvh tw:w-full hidden"
  >
  <div data-bookings-drop-in-spot-selection-map-target="map" class="tw:h-dvh tw:w-full"></div>

  <template data-bookings-drop-in-spot-selection-map-target="closeButtonTemplate">
    <button class="tw:btn tw:btn-secondary tw:m-4 tw:material-icon tw:text-2xl tw:p-1">
      close
    </button>
  </template>

  <template data-bookings-drop-in-spot-selection-map-target="infoWindowHeaderTemplate">
    <div class="tw:flex tw:flex-wrap tw:text-lg tw:text-base-500">
      <span class="tw:flex tw:items-center">
        <i class="material-icons tw:mr-2 tw:text-brand">location_on</i>
        <span class="spot-number tw:pr-4">
          PLACEHOLDER SPOT NUMBER
        </span>
      </span>
      <span class="tw:grow"></span>
      <button class="select-button tw:block-inline tw:btn tw:btn-primary tw:text-sm tw:py-1">
        Wählen
      </button>
    </div>
  </template>

  <template data-bookings-drop-in-spot-selection-map-target="infoWindowContentTemplate">
    <div class="tw:text-sm tw:mt-2 tw:max-h-32">
      PLACEHOLDER SPOT DESCRIPTION
    </div>
  </template>
</div>

</form>      </main>

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