<turbo-stream action="update" target="mobile-header-container"><template>  <div class="block lg:hidden">
      <div class="flex flex-col justify-between items-center lg:items-start gap-2">
      <a data-turbo="false" class="flex text-sm" href="/en/customise_qubs">&lt; back</a>
    <div class="flex text-3xl">
            qub 94
    </div>
      <div>
        94 m2
      </div>
      <div class="border-t-2 border-b-2 py-2 border-light_green w-full">
        <div class="flex w-full items-center justify-center lg:justify-start gap-4">
          <a data-turbo-stream="true" class="px-4 py-1 bg-light_green text-green border-0 rounded-3xl hover:bg-green hover:text-white transition-colors" href="/en/customise_qubs/toggle_2d_plan">
            <div>3D Plan</div>
</a>
            <a data-turbo-stream="true" class="px-4 py-1 bg-light_green text-green border-0 rounded-3xl hover:bg-green hover:text-white transition-colors" href="/en/customise_qubs/toggle_features">
              <div>Features</div>
</a>        </div>
      </div>
  </div>
  </div>
</template></turbo-stream>

<turbo-stream action="update" target="qub-type-container"><template><div class="flex flex-col gap-3" id="parameter-container-qub">
  <div class="hidden lg:block">
      <div class="flex flex-col justify-between items-center lg:items-start gap-2">
      <a data-turbo="false" class="flex text-sm" href="/en/customise_qubs">&lt; back</a>
    <div class="flex text-3xl">
            qub 94
    </div>
      <div>
        94 m2
      </div>
      <div class="border-t-2 border-b-2 py-2 border-light_green w-full">
        <div class="flex w-full items-center justify-center lg:justify-start gap-4">
          <a data-turbo-stream="true" class="px-4 py-1 bg-light_green text-green border-0 rounded-3xl hover:bg-green hover:text-white transition-colors" href="/en/customise_qubs/toggle_2d_plan">
            <div>3D Plan</div>
</a>
            <a data-turbo-stream="true" class="px-4 py-1 bg-light_green text-green border-0 rounded-3xl hover:bg-green hover:text-white transition-colors" href="/en/customise_qubs/toggle_features">
              <div>Features</div>
</a>        </div>
      </div>
  </div>
  </div>


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

<turbo-stream action="update" target="image-container"><template>  <div class="flex flex-col justify-center align-center w-full" data-controller="carousel">
    <div class="w-full h-[500px] overflow-hidden relative">
        <div class="absolute inset-0 w-full h-full bg-white"
             data-carousel-target="slide"
             data-index="0">
          <img loading="lazy" class="object-center object-contain w-full h-full" src="https://myqub.com/rails/active_storage/disk/eyJfcmFpbHMiOnsiZGF0YSI6eyJrZXkiOiJlZWd1eGgydjVjcGQwNnQ1c3lycGhncGdrdDU5IiwiZGlzcG9zaXRpb24iOiJpbmxpbmU7IGZpbGVuYW1lPVwiY29uY3JldGVfZXh0ZXJpb3JfOTUucG5nXCI7IGZpbGVuYW1lKj1VVEYtOCcnY29uY3JldGVfZXh0ZXJpb3JfOTUucG5nIiwiY29udGVudF90eXBlIjoiaW1hZ2UvcG5nIiwic2VydmljZV9uYW1lIjoibG9jYWwifSwiZXhwIjoiMjAyNi0wNS0xOVQwODo0NzoxMC44NjFaIiwicHVyIjoiYmxvYl9rZXkifX0=--74b804e156d65a9a80fbbe15ad6329459376a2c7/concrete_exterior_95.png" />
        </div>
        <div class="absolute inset-0 w-full h-full bg-white"
             data-carousel-target="slide"
             data-index="1">
          <img loading="lazy" class="object-center object-contain w-full h-full" src="https://myqub.com/rails/active_storage/disk/eyJfcmFpbHMiOnsiZGF0YSI6eyJrZXkiOiJ5YWx6dHFpMHdmMHpmZGloMWxjY21lNW0wcTc1IiwiZGlzcG9zaXRpb24iOiJpbmxpbmU7IGZpbGVuYW1lPVwicXViXzk0LnBuZ1wiOyBmaWxlbmFtZSo9VVRGLTgnJ3F1Yl85NC5wbmciLCJjb250ZW50X3R5cGUiOiJpbWFnZS9wbmciLCJzZXJ2aWNlX25hbWUiOiJsb2NhbCJ9LCJleHAiOiIyMDI2LTA1LTE5VDA4OjQ3OjEwLjg2MloiLCJwdXIiOiJibG9iX2tleSJ9fQ==--b5bf7c5c50e8d5561e659a2c1432aa0f3ce68ea9/qub_94.png" />
        </div>
        <div class="absolute inset-0 w-full h-full bg-white"
             data-carousel-target="slide"
             data-index="2">
          <img loading="lazy" class="object-center object-contain w-full h-full" src="https://myqub.com/rails/active_storage/disk/eyJfcmFpbHMiOnsiZGF0YSI6eyJrZXkiOiJ1bjZpcHk2eHlxaW85NmhjNHZ0N3RkNWMwbG8yIiwiZGlzcG9zaXRpb24iOiJpbmxpbmU7IGZpbGVuYW1lPVwiaW50ZXJpb3JfamFwYW5kaS5wbmdcIjsgZmlsZW5hbWUqPVVURi04JydpbnRlcmlvcl9qYXBhbmRpLnBuZyIsImNvbnRlbnRfdHlwZSI6ImltYWdlL3BuZyIsInNlcnZpY2VfbmFtZSI6ImxvY2FsIn0sImV4cCI6IjIwMjYtMDUtMTlUMDg6NDc6MTAuODYzWiIsInB1ciI6ImJsb2Jfa2V5In19--c7cfa2675c610677fd343be73c6ebd41e537389a/interior_japandi.png" />
        </div>
        <div class="absolute inset-0 w-full h-full bg-white"
             data-carousel-target="slide"
             data-index="3">
          <img loading="lazy" class="object-center object-contain w-full h-full" src="https://myqub.com/rails/active_storage/disk/eyJfcmFpbHMiOnsiZGF0YSI6eyJrZXkiOiI5cjNtcW1xMXdqNHR5aHpvanRsNm1lMGQycTR1IiwiZGlzcG9zaXRpb24iOiJpbmxpbmU7IGZpbGVuYW1lPVwibHV4dXJ5LnBuZ1wiOyBmaWxlbmFtZSo9VVRGLTgnJ2x1eHVyeS5wbmciLCJjb250ZW50X3R5cGUiOiJpbWFnZS9wbmciLCJzZXJ2aWNlX25hbWUiOiJsb2NhbCJ9LCJleHAiOiIyMDI2LTA1LTE5VDA4OjQ3OjEwLjg2NFoiLCJwdXIiOiJibG9iX2tleSJ9fQ==--0739f8751c2fac133941fa958b09688fc07c4019/luxury.png" />
        </div>

      <!-- Navigation buttons -->
      <button class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-50 rounded-full p-2 hover:bg-opacity-75 focus:outline-none z-10"
              data-action="click->carousel#prev"
              data-carousel-target="prevButton">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
      </button>

      <button class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-50 rounded-full p-2 hover:bg-opacity-75 focus:outline-none z-10"
              data-action="click->carousel#next"
              data-carousel-target="nextButton">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>

      <!-- Indicators -->
      <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 z-10">
          <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 focus:outline-none bg-opacity-100"
                  data-action="carousel#goToSlide"
                  data-carousel-index-param="0"
                  data-carousel-target="indicator"></button>
          <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 focus:outline-none "
                  data-action="carousel#goToSlide"
                  data-carousel-index-param="1"
                  data-carousel-target="indicator"></button>
          <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 focus:outline-none "
                  data-action="carousel#goToSlide"
                  data-carousel-index-param="2"
                  data-carousel-target="indicator"></button>
          <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 focus:outline-none "
                  data-action="carousel#goToSlide"
                  data-carousel-index-param="3"
                  data-carousel-target="indicator"></button>
      </div>
    </div>
  </div>
</template></turbo-stream>

<turbo-stream action="update" target="qub-info-container"><template>  <div class="hidden lg:flex justify-center gap-5 basis-1/3">
    <div class="flex flex-col gap-5 border-r pr-5 border-gray-400">
      <div class="text-slate-400 font-normal">m2</div>
      <div class="text-3xl">94 m2</div>
    </div>

    <div class="flex flex-col gap-5">
      <div class="text-slate-400 font-normal">Price</div>
      <div class="text-3xl">€ 370,000</div>
    </div>
  </div>
</template></turbo-stream>

  <turbo-stream action="update" target="exterior-container"><template><div class="flex flex-col gap-3" id="parameter-container-exterior">
  <div class="hidden lg:block">
      <div class="flex flex-col justify-between items-center lg:items-start gap-2">
    <div class="flex text-3xl">
    </div>
  </div>
  </div>


</div></template></turbo-stream>
  <turbo-stream action="update" target="interior-container"><template><div class="flex flex-col gap-3" id="parameter-container-interior">
  <div class="hidden lg:block">
      <div class="flex flex-col justify-between items-center lg:items-start gap-2">
    <div class="flex text-3xl">
          <span class="text-xl">
            Interior
          </span>
    </div>
  </div>
  </div>

      <div class="flex justify-between items-center text-2xl lg:hidden">
        <span class="text-base">Interior</span>
      </div>
          
<a data-turbo-stream="true" data-action="click-&gt;carousel-sync#selectInterior" data-interior-type="japandi" class="flex justify-start gap-5 border rounded-[36px] p-2 hover:border-green hover:bg-light_green border-very_light_gray bg-very_light_gray" href="/en/customise_qubs/set_interior?interior_type=japandi">
  <div class="flex gap-2">
      <img class="w-12 h-12 rounded-full" src="/assets/japandi-3dde472d.jpg" />
  </div>
  <div class="flex items-center">
    Japandi
  </div>
</a>
          
<a data-turbo-stream="true" data-action="click-&gt;carousel-sync#selectInterior" data-interior-type="modern" class="flex justify-start gap-5 border rounded-[36px] p-2 hover:border-green hover:bg-light_green border-very_light_gray bg-very_light_gray" href="/en/customise_qubs/set_interior?interior_type=modern">
  <div class="flex gap-2">
      <img class="w-12 h-12 rounded-full" src="/assets/luxury-0d9d9e93.png" />
  </div>
  <div class="flex items-center">
    Modern
  </div>
</a>
</div></template></turbo-stream>
  <turbo-stream action="update" target="optional-container"><template><div class="flex flex-col gap-3" id="parameter-container-optional">
  <div class="hidden lg:block">
      <div class="flex flex-col justify-between items-center lg:items-start gap-2">
    <div class="flex text-3xl">
          <span class="text-xl">
            Optional
          </span>
    </div>
  </div>
  </div>

      <div class="flex justify-between items-center text-2xl lg:hidden">
        <span class="text-base">Optional</span>
      </div>
      <div class="border border-very_light_gray rounded-[20px] bg-very_light_gray py-5 px-6">
          
<div class="flex justify-between gap-2">
  <div class="flex items-center gap-3">
    <div class="relative">
      <input
        type="checkbox"
        id="optional_feature_terrace"
        name="optional_features[]"
        value="terrace"
        checked
        disabled
        class="sr-only peer"
      >
      <div class="w-5 h-5 rounded-full border-2 border-green bg-white peer-checked:bg-white peer-checked:border-green flex items-center justify-center">
        <div class="w-2 h-2 rounded-full bg-green"></div>
      </div>
    </div>

    <label for="optional_feature_terrace">
      Terrace with the roof
    </label>
  </div>
</div>

          
<div class="flex justify-between gap-2">
  <div class="flex items-center gap-3">
    <div class="relative">
      <input
        type="checkbox"
        id="optional_feature_kitchen"
        name="optional_features[]"
        value="kitchen"
        checked
        disabled
        class="sr-only peer"
      >
      <div class="w-5 h-5 rounded-full border-2 border-green bg-white peer-checked:bg-white peer-checked:border-green flex items-center justify-center">
        <div class="w-2 h-2 rounded-full bg-green"></div>
      </div>
    </div>

    <label for="optional_feature_kitchen">
      Kitchen
    </label>
  </div>
</div>

          
<div class="flex justify-between gap-2">
  <div class="flex items-center gap-3">
    <div class="relative">
      <input
        type="checkbox"
        id="optional_feature_furniture"
        name="optional_features[]"
        value="furniture"
        checked
        disabled
        class="sr-only peer"
      >
      <div class="w-5 h-5 rounded-full border-2 border-green bg-white peer-checked:bg-white peer-checked:border-green flex items-center justify-center">
        <div class="w-2 h-2 rounded-full bg-green"></div>
      </div>
    </div>

    <label for="optional_feature_furniture">
      Furniture
    </label>
  </div>
</div>

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


  <turbo-stream action="update" target="summary-container"><template><div class="flex flex-col gap-3" id="parameter-container-summary">
  <div class="hidden lg:block">
      <div class="flex flex-col justify-between items-center lg:items-start gap-2">
    <div class="flex text-3xl">
          <span class="text-xl">
            <span class="translation_missing" title="translation missing: en.views.customise_qub.price">Price</span>
          </span>
    </div>
  </div>
  </div>

      
  <div class="flex flex-col gap-4 w-full border rounded-[20px] bg-light_green border-light_green p-5">
      <div class="flex justify-between items-center text-3.5xl font-semibold">
        <span>370,000</span>
        <span>€</span>
      </div>

     <div class="price opacity-50">1049/month</div>
      <div class="w-full flex justify-center items-center p-4 bg-slate-400 text-white rounded-[35px] cursor-not-allowed"
          data-tooltip="Please select all of the property attributes"
          data-action="click->customise-qub#showModal">
        Book a meet
      </div>
  </div>
  <div class="font-normal text-sm">
    Estimated delivery (months): 3 months
  </div>
  <!-- Modal for incomplete order summary -->
  <div id="order_summary_modal" class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black bg-opacity-50" data-action="click->customise-qub#backdropClick">
    <div class="bg-white rounded-lg shadow-lg max-w-lg w-full p-8 relative">
      <button class="absolute top-4 right-4 text-gray-600 hover:text-black text-2xl font-bold" data-action="click->customise-qub#closeModal">&times;</button>
      <div class="text-3xl mb-5 font-bold">Missing qub attributes</div>
        <div class="text-gray text-[16px]">Please select all of the qub attributes to continue.</div>
      </div>
    </div>


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