<turbo-stream action="replace" target="slidebar"><template>
  <turbo-frame data-turbo-action="advance" id="slidebar" target="_top">
    <div class="slidebar-content panel-reservation" data-slidebar-target="modalContent">
  <header class="slidebar-header">
    <h2 id="slidebar_title">Alle details</h2>
    <ul class="slidebar-actions">
        <li>
          <span class="reservation-check-in">
            <a class="button check-in" data-method="put" data-disable-with="Inchecken..." data-confirm="Nu inchecken?" data-confirm-body="Deze reservering staat gepland voor 20:30." data-confirm-label="Inchecken" data-confirm-class="is-warning" href="about:blank">Inchecken</a>
          </span>
        </li>

        <li class="status">
          <span class="confirmed">
            Bevestigd
          </span>
        </li>

      <li class="slidebar-close" data-action="click->slidebar#close">
        Sluit
      </li>

    </ul>
  </header>
  <div class="slidebar-body">

    <nav class="reservation-quick-actions">
      <ul>
        <li>
          <a class="reservation-details" href="about:blank">Alle details</a>
        </li>
        <li>
          <a class="reservation-clone" title="Dupliceer" data-turbo-stream="true" href="about:blank">Dupliceer</a>
        </li>
      </ul>
    </nav>

      <ul class="reservation-status confirmed">
      </ul>

    <div class="reservation-tags">
      <form data-turbo="true" class="guest-tags formtastic reservation" id="edit_reservation_8438230" novalidate="novalidate" action="about:blank" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="X-BBenY-3G_f5vefWr-rlAMRDrXe0I3f_n-2utf8w3DaYUDZxc3IziMuYpmST9EWIVvl6Ru5zjeus030oEJ8CA" autocomplete="off" />
  <input type="hidden" name="update_section" id="update_section" value="tags" autocomplete="off" />
  <li data-controller="multi-select" data-action="click@document-&gt;multi-select#closeItemListFromBackdrop scroll@window-&gt;multi-select#updateItemListHeight" data-multi-select-open-list-label-value="Tag" data-multi-select-hidden-class="hidden" data-multi-select-visible-class="visible" data-multi-select-selected-class="item-selected" data-multi-select-disabled-class="item-disabled" data-multi-select-item-list-template-value="
      &lt;div class=&quot;tag-select&quot;&gt;
        &lt;header data-multi-select-target=&quot;itemsHeader&quot;&gt;
          &lt;strong&gt;Tags&lt;/strong&gt;
          &lt;a data-action=&quot;click-&gt;multi-select#closeItemList&quot;&gt;Terug&lt;/a&gt;
        &lt;/header&gt;
        &lt;div class=&quot;tag-select-items-search&quot;&gt;
          &lt;input
            type=&quot;search&quot;
            class=&quot;multi-select-search&quot; &#39; +
            placeholder=&quot;Zoek…&quot;
            data-multi-select-target=&quot;search&quot;
            data-action=&quot;keyup-&gt;multi-select#filterItems keydown.esc-&gt;multi-select#clearSearch keydown.enter-&gt;multi-select#selectFirstOption&quot;
          /&gt;
        &lt;/div&gt;
        &lt;ol class=&quot;multi-select-items-list&quot; data-multi-select-target=&quot;itemsList&quot;&gt;
          ${items}
        &lt;/ol&gt;
      &lt;/div&gt;
    " data-multi-select-item-template-value="
      &lt;li class=&quot;multi-select-item&quot; data-multi-select-target=&quot;item&quot; data-action=&quot;click-&gt;multi-select#toggleOption&quot; data-multi-select-value-param=&quot;${option.value}&quot;&gt;
        &lt;span class=&quot;tag ${option.dataset.tagClass}&quot;
          style=&quot;
            ${option.dataset.background ? (&#39;--icon-color: &#39; + option.dataset.background + &#39;;&#39;) : &#39;&#39;}
            ${option.dataset.background ? (&#39;background: &#39; + option.dataset.background + &#39;;&#39;) : &#39;&#39;}
            ${option.dataset.textColor  ? (&#39;color: &#39;      + option.dataset.textColor  + &#39;;&#39;) : &#39;&#39;}
          &quot;&gt;
          ${this.escapeHTML(option.label)}
        &lt;/span&gt;

        &lt;span class=&quot;tag-small&quot;&gt;
          &lt;span class=&quot;tag-color&quot;
            style=&quot;
              ${option.dataset.background ? (&#39;background: &#39; + option.dataset.background + &#39;;&#39;) : &#39;&#39;}
            &quot;&gt;
          &lt;/span&gt;
          &lt;span class=&quot;tag-icon&quot;&gt;&lt;/span&gt;
        &lt;/span&gt;
      &lt;/li&gt;
    " data-multi-select-choice-template-value="
      &lt;li class=&quot;multi-select-choice multi-select-tag ${option.dataset.colorClass} ${option.dataset.tagClass}&quot;
          data-multi-select-target=&quot;choice&quot;
          style=&quot;
            ${option.dataset.background ? (&#39;--icon-color: &#39; + option.dataset.background + &#39;;&#39;) : &#39;&#39;}
            ${option.dataset.background ? (&#39;background: &#39; + option.dataset.background + &#39;;&#39;) : &#39;&#39;}
            ${option.dataset.textColor  ? (&#39;color: &#39;      + option.dataset.textColor  + &#39;;&#39;) : &#39;&#39;}
          &quot;&gt;
        &lt;span&gt;
          ${this.escapeHTML(option.label)}
          &lt;a class=&quot;multi-select-choice-close&quot;
             data-action=&quot;click-&gt;multi-select#deselectOption&quot;
             data-multi-select-value-param=&quot;${option.value}&quot;&gt;
          &lt;/a&gt;
        &lt;/span&gt;
      &lt;/li&gt;
    " data-multi-select-item-group-template-value="
      &lt;li class=&quot;multi-select-item-group&quot;&gt;
        &lt;ol&gt;
          &lt;li class=&quot;multi-select-item-group-header&quot;&gt;${this.escapeHTML(optgroup.label)}&lt;/li&gt;
          ${items}
        &lt;/ol&gt;
      &lt;/li&gt;
    " class="select input optional" id="reservation_generic_list_input"><label for="reservation_generic_list" class="label">Tags</label><span class="select-wrapper"><input name="reservation[generic_list][]" type="hidden" value="" autocomplete="off" /><select multiple="multiple" name="reservation[generic_list][]" id="reservation_generic_list" data-multi-select-target="select" data-action="change-&gt;multi-select#submitForm" data-ignore-changes="true"><optgroup label="Algemeen" data-multi-select-target="optgroup"><option value="google" data-id="google" data-label="Google" data-multi-select-target="option" data-background="#4285F4" data-color-class="light" data-tag-class="google-tag" data-text-color="#FFF">Google</option></optgroup><optgroup label="Allergieën" data-multi-select-target="optgroup"><option value="ei" data-id="ei" data-label="Ei" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="ei-tag" data-text-color="#FFF">Ei</option><option value="gluten" data-id="gluten" data-label="Gluten" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="gluten-tag" data-text-color="#FFF">Gluten</option><option value="lactose" data-id="lactose" data-label="Lactose" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="lactose-tag" data-text-color="#FFF">Lactose</option><option value="lupine" data-id="lupine" data-label="Lupine" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="lupine-tag" data-text-color="#FFF">Lupine</option><option value="melk" data-id="melk" data-label="Melk" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="melk-tag" data-text-color="#FFF">Melk</option><option value="mosterd" data-id="mosterd" data-label="Mosterd" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="mosterd-tag" data-text-color="#FFF">Mosterd</option><option value="noten" data-id="noten" data-label="Noten" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="noten-tag" data-text-color="#FFF">Noten</option><option value="pinda" data-id="pinda" data-label="Pinda" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="pinda-tag" data-text-color="#FFF">Pinda</option><option value="schaaldieren" data-id="schaaldieren" data-label="Schaaldieren" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="schaaldieren-tag" data-text-color="#FFF">Schaaldieren</option><option value="selderij" data-id="selderij" data-label="Selderij" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="selderij-tag" data-text-color="#FFF">Selderij</option><option value="sesam" data-id="sesam" data-label="Sesam" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="sesam-tag" data-text-color="#FFF">Sesam</option><option value="soja" data-id="soja" data-label="Soja" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="soja-tag" data-text-color="#FFF">Soja</option><option value="sulfiet" data-id="sulfiet" data-label="Sulfiet" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="sulfiet-tag" data-text-color="#FFF">Sulfiet</option><option value="tarwe" data-id="tarwe" data-label="Tarwe" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="tarwe-tag" data-text-color="#FFF">Tarwe</option><option value="vis" data-id="vis" data-label="Vis" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="vis-tag" data-text-color="#FFF">Vis</option><option value="weekdieren" data-id="weekdieren" data-label="Weekdieren" data-multi-select-target="option" data-background="#DD5555" data-color-class="light" data-tag-class="weekdieren-tag" data-text-color="#FFF">Weekdieren</option></optgroup><optgroup label="Diëten" data-multi-select-target="optgroup"><option value="caloriearm" data-id="caloriearm" data-label="Caloriearm" data-multi-select-target="option" data-background="#EEAAAA" data-color-class="dark" data-tag-class="caloriearm-tag" data-text-color="#222">Caloriearm</option><option value="eiwitrijk" data-id="eiwitrijk" data-label="Eiwitrijk" data-multi-select-target="option" data-background="#EEAAAA" data-color-class="dark" data-tag-class="eiwitrijk-tag" data-text-color="#222">Eiwitrijk</option><option value="halal" data-id="halal" data-label="Halal" data-multi-select-target="option" data-background="#EEAAAA" data-color-class="dark" data-tag-class="halal-tag" data-text-color="#222">Halal</option><option value="koolhydraatarm" data-id="koolhydraatarm" data-label="Koolhydraatarm" data-multi-select-target="option" data-background="#EEAAAA" data-color-class="dark" data-tag-class="koolhydraatarm-tag" data-text-color="#222">Koolhydraatarm</option><option value="koosjer" data-id="koosjer" data-label="Koosjer" data-multi-select-target="option" data-background="#EEAAAA" data-color-class="dark" data-tag-class="koosjer-tag" data-text-color="#222">Koosjer</option><option value="veganistisch" data-id="veganistisch" data-label="Veganistisch" data-multi-select-target="option" data-background="#EEAAAA" data-color-class="dark" data-tag-class="veganistisch-tag" data-text-color="#222">Veganistisch</option><option value="vegetarisch" data-id="vegetarisch" data-label="Vegetarisch" data-multi-select-target="option" data-background="#EEAAAA" data-color-class="dark" data-tag-class="vegetarisch-tag" data-text-color="#222">Vegetarisch</option><option value="vetarm" data-id="vetarm" data-label="Vetarm" data-multi-select-target="option" data-background="#EEAAAA" data-color-class="dark" data-tag-class="vetarm-tag" data-text-color="#222">Vetarm</option></optgroup></select></span>

</li>
</form>
    </div>

    <turbo-frame data-turbo-action="advance" id="details_reservation_8438230" target="_top">
      <div class="reservation-details"
     data-controller="backend--reservations--autocomplete backend--reservations--tables backend--reservations--duration backend--reservations--notification backend--reservations--questions backend--reservations--availability"
     data-backend--reservations--tables-reservation-id-value="8438230"
     data-backend--reservations--tables-available-url-value="about:blank"
     data-backend--reservations--duration-reservation-id-value="8438230"
     data-backend--reservations--duration-url-value="about:blank"
     data-backend--reservations--duration-squeezed-class="squeezed-reservation"
     data-backend--reservations--questions-url-value="about:blank"
     data-backend--reservations--availability-reservation-id-value="8438230"
     data-backend--reservations--availability-url-value="about:blank">
  <form class="edit-reservation formtastic reservation" id="edit_reservation_8438230" data-controller="form-changes" data-form-changes-carried-value="false" novalidate="novalidate" action="about:blank" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="CSqExX3kCzNHok01hCGchGYr9ZNWiOSMHBhJ_QoJ152Mq4Vmzhcfkrtq2DNM0eYGRGEez5Php2RM1LKzfbdo5Q" autocomplete="off" />
    <div class="wrapper">
      <input type="hidden" name="return_to" id="return_to" autocomplete="off" />

      


      <input autocomplete="off" type="hidden" value="Reservation" name="reservation[type]" id="reservation_type" />

        <div id="availability_warning" class="reservation-availability-warning slidebar-warning" hidden>
  <strong>Geen beschikbaarheid</strong>
</div>



      <fieldset id="reservation-summary" class="inputs"><ol>

          <li class="string input optional stringish" id="reservation_customer_name_input"><label for="reservation_customer_name" class="label">Naam</label><input placeholder="Naam" maxlength="255" id="reservation_customer_name" autocomplete="off" data-autocomplete-name="name" data-backend--reservations--autocomplete-target="customerNameInput" type="text" value="Yara Mulder" name="reservation[customer_name]" />

</li>

        <li class="party_size_picker input required numeric stringish" id="reservation_guests_input"><label for="reservation_guests" class="label">Gasten<abbr title="required">*</abbr></label><div class="field-picker" data-controller="form--party-size-picker"><input id="reservation_guests" min="1" data-backend--reservations--availability-target="guestsInput" data-action="change-&gt;backend--reservations--notification#sendUpdateEmail keyup-&gt;backend--reservations--notification#sendUpdateEmail change-&gt;backend--reservations--availability#check keyup-&gt;backend--reservations--availability#check input-&gt;form--party-size-picker#markTyped" data-form--party-size-picker-target="input" step="any" type="number" value="5" name="reservation[guests]" /><button name="button" type="button" tabindex="-1" class="field-picker-button" data-action="form--party-size-picker#toggle"><img alt="" class="field-picker-icon" src="https://d2nbxhhppfsbve.cloudfront.net/assets/icons/guest-50e71831dec2996f4610f3de4cf4b2d50e1bc31df2c308e3d551e479128009f3.svg" /></button><template data-form--party-size-picker-target="menuTemplate"><div class="field-picker-menu party-size-picker-menu" data-form--party-size-picker-target="menu"><div class="party-size-picker-numpad"><button name="button" type="button" class="party-size-picker-numpad-key" data-action="click-&gt;form--party-size-picker#pressDigit" data-form--party-size-picker-digit-param="1">1</button><button name="button" type="button" class="party-size-picker-numpad-key" data-action="click-&gt;form--party-size-picker#pressDigit" data-form--party-size-picker-digit-param="2">2</button><button name="button" type="button" class="party-size-picker-numpad-key" data-action="click-&gt;form--party-size-picker#pressDigit" data-form--party-size-picker-digit-param="3">3</button><button name="button" type="button" class="party-size-picker-numpad-key" data-action="click-&gt;form--party-size-picker#pressDigit" data-form--party-size-picker-digit-param="4">4</button><button name="button" type="button" class="party-size-picker-numpad-key" data-action="click-&gt;form--party-size-picker#pressDigit" data-form--party-size-picker-digit-param="5">5</button><button name="button" type="button" class="party-size-picker-numpad-key" data-action="click-&gt;form--party-size-picker#pressDigit" data-form--party-size-picker-digit-param="6">6</button><button name="button" type="button" class="party-size-picker-numpad-key" data-action="click-&gt;form--party-size-picker#pressDigit" data-form--party-size-picker-digit-param="7">7</button><button name="button" type="button" class="party-size-picker-numpad-key" data-action="click-&gt;form--party-size-picker#pressDigit" data-form--party-size-picker-digit-param="8">8</button><button name="button" type="button" class="party-size-picker-numpad-key" data-action="click-&gt;form--party-size-picker#pressDigit" data-form--party-size-picker-digit-param="9">9</button><span></span><button name="button" type="button" class="party-size-picker-numpad-key" data-action="click-&gt;form--party-size-picker#pressDigit" data-form--party-size-picker-digit-param="0">0</button><button name="button" type="button" class="party-size-picker-numpad-key" data-action="click-&gt;form--party-size-picker#pressBackspace">⌫</button></div></div></template></div>

</li>
</ol></fieldset>
      <fieldset id="reservation-times" class="inputs"><legend><span>times</span></legend><ol>
        <li class="date_picker input required stringish" id="reservation_date_input"><label for="reservation_date" class="label">Datum<abbr title="required">*</abbr></label><div class="field-picker flatpickr-datepicker" data-controller="form--date-picker" data-form--date-picker-locale-value="nl"><input maxlength="10" size="10" id="reservation_date" data-backend--reservations--tables-target="dateInput" data-backend--reservations--duration-target="dateInput" data-backend--reservations--availability-target="dateInput" data-action="change-&gt;backend--reservations--tables#updateTablesSelect keyup--&gt;backend--reservations--tables#updateTablesSelect change-&gt;backend--reservations--availability#check keyup-&gt;backend--reservations--availability#check" data-form--date-picker-target="input" type="date" step="1" value="2026-10-08" name="reservation[date]" /><button name="button" type="button" tabindex="-1" class="field-picker-button" data-action="form--date-picker#toggle"><img alt="" class="field-picker-icon" src="https://d2nbxhhppfsbve.cloudfront.net/assets/icons/calendar-fc74f8a4222673650ab1fbaec2b3e3c97f99a727817292cf87bcb76894f714da.svg" /></button></div>

</li>

        <li class="time_picker input required stringish" id="reservation_time_input"><label for="reservation_time" class="label">Tijd<abbr title="required">*</abbr></label><div class="field-picker" data-controller="form--time-picker" data-form--time-picker-selected-class="is-selected"><input maxlength="5" size="5" id="reservation_time" step="900" data-backend--reservations--tables-target="startsAtInput" data-backend--reservations--duration-target="timeInput" data-backend--reservations--availability-target="timeInput" data-action="change-&gt;backend--reservations--duration#refresh keyup-&gt;backend--reservations--duration#refresh change-&gt;backend--reservations--notification#sendUpdateEmail keyup-&gt;backend--reservations--notification#sendUpdateEmail change-&gt;backend--reservations--tables#updateTablesSelect keyup--&gt;backend--reservations--tables#updateTablesSelect change-&gt;backend--reservations--availability#check keyup-&gt;backend--reservations--availability#check" data-form--time-picker-target="input" type="time" value="20:30" name="reservation[time]" /><button name="button" type="button" tabindex="-1" class="field-picker-button" data-action="form--time-picker#toggle"><img alt="" class="field-picker-icon" src="https://d2nbxhhppfsbve.cloudfront.net/assets/icons/clock-8bcf6020c97d0110f61e1e4f5565cad416f96cbf4e441008f68295d26e7e1ed4.svg" /></button><template data-form--time-picker-target="menuTemplate"><div class="field-picker-menu time-picker-menu" data-form--time-picker-target="menu"><div class="time-picker-columns"><ul data-form--time-picker-target="hourColumn"></ul><ul data-form--time-picker-target="minuteColumn"></ul></div></div></template><template data-form--time-picker-target="optionTemplate"><li class="time-picker-option" data-value="${value}" data-action="click-&gt;form--time-picker#pick" data-form--time-picker-target="option" data-form--time-picker-column-param="${column}">${value}</li></template></div>

</li>
        <li class="time_picker input optional stringish" id="reservation_ends_at_input"><label for="reservation_ends_at" class="label">tot</label><div class="field-picker" data-controller="form--time-picker" data-form--time-picker-selected-class="is-selected"><input maxlength="5" size="5" id="reservation_ends_at" step="900" data-backend--reservations--tables-target="endsAtInput" data-backend--reservations--duration-target="endsAtInput" data-backend--reservations--availability-target="endsAtInput" data-action="change-&gt;backend--reservations--tables#updateTablesSelect change-&gt;backend--reservations--availability#check" data-form--time-picker-target="input" type="time" value="23:00" name="reservation[ends_at]" /><button name="button" type="button" tabindex="-1" class="field-picker-button" data-action="form--time-picker#toggle"><img alt="" class="field-picker-icon" src="https://d2nbxhhppfsbve.cloudfront.net/assets/icons/clock-8bcf6020c97d0110f61e1e4f5565cad416f96cbf4e441008f68295d26e7e1ed4.svg" /></button><template data-form--time-picker-target="menuTemplate"><div class="field-picker-menu time-picker-menu" data-form--time-picker-target="menu"><div class="time-picker-columns"><ul data-form--time-picker-target="hourColumn"></ul><ul data-form--time-picker-target="minuteColumn"></ul></div></div></template><template data-form--time-picker-target="optionTemplate"><li class="time-picker-option" data-value="${value}" data-action="click-&gt;form--time-picker#pick" data-form--time-picker-target="option" data-form--time-picker-column-param="${column}">${value}</li></template></div>

</li>
</ol></fieldset>
        <fieldset id="customer-fields" data-autocomplete-url="about:blank" data-restaurant-id="130798" data-backend--reservations--autocomplete-target="customerFields" class="inputs"><legend><span>Gast</span></legend><ol>
          <li class="email input optional stringish" id="reservation_customer_email_input"><label for="reservation_customer_email" class="label">E-mailadres</label><input placeholder="E-mail" maxlength="255" id="reservation_customer_email" autocomplete="off" data-autocomplete-name="email" data-backend--reservations--autocomplete-target="customerEmailInput" data-action="change-&gt;backend--reservations--notification#sendNotification change-&gt;backend--reservations--notification#sendUpdateEmail keyup-&gt;backend--reservations--notification#sendUpdateEmail" type="email" name="reservation[customer_email]" />

</li>
          <li class="phone input optional stringish" id="reservation_customer_telephone_input"><label for="reservation_customer_telephone" class="label">Telefoonnummer</label><input placeholder="Telefoon" maxlength="255" id="reservation_customer_telephone" autocomplete="off" data-autocomplete-name="telephone,international_telephone,national_telephone" data-backend--reservations--autocomplete-target="customerTelephoneInput" type="tel" name="reservation[customer_telephone]" />

</li>
</ol></fieldset>
      <fieldset id="reservation-comments" class="inputs has-comment-preview" data-controller="accordion"><legend><span>Opmerkingen</span></legend><ol>
          <li class="reservation-comment-preview">
            <div class="comment-card">
              <div class="content">
                  <p class="comment-placeholder">Belangrijke dieetwensen, allergieën of andere opmerkingen.</p>
              </div>

              <button name="button" type="button" class="edit-comment" title="Wijzig" data-action="accordion#toggle">Wijzig</button>
            </div>
          </li>

        <li class="text input optional" id="reservation_comments_input"><label for="reservation_comments" class="label">Opmerkingen gast</label><textarea rows="2" placeholder="Belangrijke dieetwensen, allergieën of andere opmerkingen." id="reservation_comments" data-controller="autogrow" data-action="focus-&gt;autogrow#grow keydown-&gt;autogrow#grow keyup-&gt;autogrow#grow change-&gt;backend--reservations--notification#sendUpdateEmail keyup-&gt;backend--reservations--notification#sendUpdateEmail" name="reservation[comments]">
</textarea>

<p class="inline-hints"><strong>Let op!</strong> De opmerkingen zijn ook door gasten in te zien. Gebruik notities voor interne communicatie.</p></li>
</ol></fieldset>

      <fieldset id="reservation-seating" class="inputs"><legend><span>seating</span></legend><ol>
          <li data-controller="multi-select" data-action="click@document-&gt;multi-select#closeItemListFromBackdrop scroll@window-&gt;multi-select#updateItemListHeight" data-multi-select-open-list-label-value="Tafel" data-multi-select-hidden-class="hidden" data-multi-select-visible-class="visible" data-multi-select-selected-class="item-selected" data-multi-select-disabled-class="item-disabled" data-multi-select-item-list-template-value="
      &lt;div class=&quot;table-select&quot;&gt;
        &lt;header data-multi-select-target=&quot;itemsHeader&quot;&gt;
          &lt;strong&gt;Tafels&lt;/strong&gt;
          &lt;a data-action=&quot;click-&gt;multi-select#closeItemList&quot;&gt;Terug&lt;/a&gt;
        &lt;/header&gt;
        &lt;div class=&quot;multi-select-items-search&quot;&gt;
          &lt;input
            type=&quot;search&quot;
            class=&quot;multi-select-search&quot; &#39; +
            placeholder=&quot;Zoek…&quot;
            data-multi-select-target=&quot;search&quot;
            data-action=&quot;keyup-&gt;multi-select#filterItems keydown.esc-&gt;multi-select#clearSearch keydown.enter-&gt;multi-select#selectFirstOption&quot;
          /&gt;
        &lt;/div&gt;
        &lt;ol class=&quot;multi-select-items-list&quot; data-multi-select-target=&quot;itemsList&quot;&gt;
          ${items}
        &lt;/ol&gt;
      &lt;/div&gt;
    " data-multi-select-item-group-template-value="
      &lt;li class=&quot;table-select-section&quot;&gt;
        ${
          (optgroup.label.length &gt;= 1) ? (
            &#39;&lt;strong class=&quot;multi-select-item-group-header&quot;&gt;&#39; + this.escapeHTML(optgroup.label) + &#39;&lt;/strong&gt;&#39;
          ) : (
            &#39;&#39;
          )
        }
        &lt;ol class=&quot;table-select-section-items&quot;&gt;
          ${items}
        &lt;/ol&gt;
      &lt;/li&gt;
    " data-multi-select-item-template-value="
      &lt;li class=&quot;table-select-item ${(
            option.dataset.occupied == &#39;true&#39; ? &#39;table-select-item-occupied&#39;
                                              : &#39;table-select-item-available&#39;
          )}&quot;
          data-multi-select-target=&quot;item&quot;
          data-action=&quot;click-&gt;multi-select#toggleOption&quot;
          data-multi-select-value-param=&quot;${option.value}&quot;&gt;
        &lt;span class=&quot;table-select-item-label&quot;&gt;${this.escapeHTML(option.dataset.label)}&lt;/span&gt;
        &lt;span class=&quot;table-select-item-capacity-range&quot;&gt;
          &lt;span&gt;${option.dataset.capacityRange}&lt;/span&gt;
        &lt;/span&gt;
      &lt;/li&gt;
    " class="select input optional" id="reservation_table_ids_input"><label for="reservation_table_ids" class="label">Tafel(s)</label><span class="select-wrapper"><input name="reservation[table_ids][]" type="hidden" value="" autocomplete="off" /><select multiple="multiple" name="reservation[table_ids][]" id="reservation_table_ids" data-placeholder="Selecteer één of meer tafels" data-multi-select-target="select" data-backend--reservations--tables-target="tableSelect" data-backend--reservations--duration-target="tableSelect" data-action="change-&gt;backend--reservations--tables#tableLock change-&gt;backend--reservations--duration#refresh change-&gt;multi-select#refresh backend--reservations--tables:optionsChanged-&gt;multi-select#refresh change-&gt;backend--reservations--tables#save"><optgroup label="Bar" data-multi-select-target="optgroup"><option value="32464" data-id="32464" data-label="A1" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">A1 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32465" data-id="32465" data-label="A2" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">A2 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32466" data-id="32466" data-label="A3" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="true" data-enabled="true" data-multi-select-target="option">A3 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32467" data-id="32467" data-label="A4" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="true" data-enabled="true" data-multi-select-target="option">A4 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32468" data-id="32468" data-label="A5" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="true" data-enabled="true" data-multi-select-target="option">A5 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32469" data-id="32469" data-label="A6" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="true" data-enabled="true" data-multi-select-target="option">A6 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32523" data-id="32523" data-label="A7" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="true" data-enabled="true" data-multi-select-target="option">A7 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option></optgroup><optgroup label="Serre" data-multi-select-target="optgroup"><option value="32490" data-id="32490" data-label="F1" data-capacity="2" data-capacity-range="2" data-maximum-guests="2" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">F1 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;2&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32491" data-id="32491" data-label="F2" data-capacity="2" data-capacity-range="2" data-maximum-guests="2" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">F2 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;2&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32492" data-id="32492" data-label="F3" data-capacity="2" data-capacity-range="2" data-maximum-guests="2" data-minimum-guests="0" data-available="true" data-occupied="true" data-enabled="true" data-multi-select-target="option">F3 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;2&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32493" data-id="32493" data-label="F4" data-capacity="2" data-capacity-range="2" data-maximum-guests="2" data-minimum-guests="0" data-available="true" data-occupied="true" data-enabled="true" data-multi-select-target="option">F4 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;2&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option></optgroup><optgroup label="Terras" data-multi-select-target="optgroup"><option value="32480" data-id="32480" data-label="D1" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">D1 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32481" data-id="32481" data-label="D2" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">D2 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32482" data-id="32482" data-label="D3" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">D3 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32483" data-id="32483" data-label="D4" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="true" data-enabled="true" data-multi-select-target="option">D4 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32484" data-id="32484" data-label="D5" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="true" data-enabled="true" data-multi-select-target="option">D5 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32485" data-id="32485" data-label="D6" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">D6 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32486" data-id="32486" data-label="D7" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">D7 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32487" data-id="32487" data-label="D8" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="true" data-enabled="true" data-multi-select-target="option">D8 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32488" data-id="32488" data-label="E1" data-capacity="8" data-capacity-range="2-8" data-maximum-guests="8" data-minimum-guests="2" data-available="true" data-occupied="true" data-enabled="true" data-multi-select-target="option">E1 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;8&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32489" data-id="32489" data-label="E2" data-capacity="8" data-capacity-range="2-8" data-maximum-guests="8" data-minimum-guests="2" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">E2 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;8&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option></optgroup><optgroup label="Zaal" data-multi-select-target="optgroup"><option value="32470" data-id="32470" data-label="B1" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">B1 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32471" data-id="32471" data-label="B2" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">B2 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32472" data-id="32472" data-label="B3" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">B3 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32473" data-id="32473" data-label="B4" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">B4 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32474" data-id="32474" data-label="B5" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">B5 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32475" data-id="32475" data-label="B6" data-capacity="4" data-capacity-range="4" data-maximum-guests="4" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">B6 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32476" data-id="32476" data-label="C1" data-capacity="6" data-capacity-range="6" data-maximum-guests="6" data-minimum-guests="0" data-available="true" data-occupied="true" data-enabled="true" data-multi-select-target="option">C1 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;6&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option selected="selected" value="32477" data-id="32477" data-label="C2" data-capacity="6" data-capacity-range="6" data-maximum-guests="6" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">C2 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;6&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32478" data-id="32478" data-label="C3" data-capacity="6" data-capacity-range="6" data-maximum-guests="6" data-minimum-guests="0" data-available="true" data-occupied="true" data-enabled="true" data-multi-select-target="option">C3 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;6&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option>
<option value="32479" data-id="32479" data-label="C4" data-capacity="6" data-capacity-range="6" data-maximum-guests="6" data-minimum-guests="0" data-available="true" data-occupied="false" data-enabled="true" data-multi-select-target="option">C4 &lt;span class=&quot;choice-capacity&quot;&gt;(&lt;span class=&quot;counter&quot;&gt;6&lt;/span&gt; &lt;span class=&quot;label&quot;&gt;zitplaatsen&lt;/span&gt;)&lt;/span&gt;</option></optgroup></select></span>

</li>
          <li class="boolean input optional" id="reservation_table_lock_input"><input type="hidden" name="reservation[table_lock]" value="0" autocomplete="off" /><label for="reservation_table_lock" class=""><input type="checkbox" name="reservation[table_lock]" id="reservation_table_lock" value="1" data-backend--reservations--tables-target="tableLock" data-action="change-&gt;backend--reservations--tables#save" /><span class="when-unlocked">Tafelselectie vastzetten</span><span class="when-locked">Tafelselectie vastgezet</span></label>

</li>

</ol></fieldset>
      <turbo-frame data-backend--reservations--questions-target="frame" id="reservation-questions-fields"></turbo-frame>

        <fieldset id="reservation-notes" class="inputs"><legend><span>Restaurantnotities</span></legend><ol>

          
            <li class="rich_text input optional stringish" id="reservation_notes_attributes_0_description_input"><lexxy-editor placeholder="Interne notitie, niet zichtbaar voor de gast" id="reservation_notes_attributes_0_description" input="reservation_notes_attributes_0_description_trix_input_note" name="reservation[notes_attributes][0][description]" class="lexxy-content" data-direct-upload-url="https://gotable.app/rails/active_storage/direct_uploads" data-blob-url-template="https://gotable.app/rails/active_storage/blobs/redirect/:signed_id/:filename"></lexxy-editor>

</li>
</ol></fieldset>
      

      <fieldset id="reservation-preferences" class="inputs"><legend><span>Voorkeuren</span></legend><ol>
          <li class="boolean input optional" id="reservation_send_automatic_notifications_to_customer_input"><input type="hidden" name="reservation[send_automatic_notifications_to_customer]" value="0" autocomplete="off" /><label for="reservation_send_automatic_notifications_to_customer" class=""><input type="checkbox" name="reservation[send_automatic_notifications_to_customer]" id="reservation_send_automatic_notifications_to_customer" value="1" data-backend--reservations--notification-target="sendNotificationsInput sendNotification" data-action="change-&gt;backend--reservations--notification#automaticSendNotificationOff" />Verstuur bevestiging, herinnering en recensieverzoek naar de gast</label>

</li>


        <li class="boolean input optional" id="reservation_subscribe_to_newsletter_input"><input type="hidden" name="reservation[subscribe_to_newsletter]" value="0" autocomplete="off" /><label for="reservation_subscribe_to_newsletter" class=""><input type="checkbox" name="reservation[subscribe_to_newsletter]" id="reservation_subscribe_to_newsletter" value="1" data-backend--reservations--newsletter-target="subscribeToNewsletterInput subscribeToNewsletter" />Aanmelden voor de nieuwsbrief</label>

</li>
</ol></fieldset>
        <div class="reservation-meta">
          <span class="reservation-submitted" title="2026-10-08T00:00:16+02:00">
            ongeveer een uur geleden aangevraagd
          </span>

          <span class="reservation-id">
            8438230
          </span>
        </div>
    </div>

    <fieldset class="actions"><ol>
        <li class="boolean input optional" id="reservation_send_update_email_input"><input type="hidden" name="reservation[send_update_email]" value="0" autocomplete="off" /><label for="reservation_send_update_email" class=""><input type="checkbox" name="reservation[send_update_email]" id="reservation_send_update_email" value="1" data-backend--reservations--notification-target="sendUpdateEmailInput" data-action="change-&gt;backend--reservations--notification#automaticSendUpdateEmailOff" />Informeer de gast per mail over de wijziging</label>

</li>

      <li class="action input_action " id="reservation_submit_action"><input type="submit" name="commit" value="Reservering wijzigen" data-disable-with="Reservering wijzigen" /></li>
</ol></fieldset></form></div>

</turbo-frame>
    

  </div>
</div>

</turbo-frame></template></turbo-stream>