<turbo-stream action="update" target="qub-type-container"><template><div class="flex flex-col gap-3 lg:gap-5" id="parameter-container-qub">
  <div class="flex justify-end lg:justify-between items-center">
    <div class="hidden lg:flex text-3xl">
          Get your qub
    </div>
      <a data-turbo="false" class="flex text-sm" href="/customise_qubs">&lt; Show options</a>
  </div>
  
      <div class="flex border rounded-xl px-5 py-[1.125rem] bg-[#42695B] text-[#F8F8F8] lg:text-[#42695B] lg:bg-[#EEE3DD] lg:border-[#EEE3DD]">
        <div class="flex w-full items-center justify-between">
          <div class="flex">
            <div class="flex">
              qub&nbsp;house+
            </div>
          </div>
          <div class="flex">
              <div>
                140 m2
              </div>
          </div>
          <div class="flex lg:hidden">
              <div>
                €400,000.00
              </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">
    <div class="w-full h-[500px] overflow-hidden">
      <img loading="lazy" class="object-cover w-full h-full" src="https://myqub.com/rails/active_storage/disk/eyJfcmFpbHMiOnsiZGF0YSI6eyJrZXkiOiJsc3hubjU3cWwwcG1qdGR0ejI0aTdtdHUyMDk5IiwiZGlzcG9zaXRpb24iOiJpbmxpbmU7IGZpbGVuYW1lPVwiSU1HLTNjMmU4M2EzNzg4MzM5NDdlODFkZDRkMzkzNTBhMzRiLVYuanBnXCI7IGZpbGVuYW1lKj1VVEYtOCcnSU1HLTNjMmU4M2EzNzg4MzM5NDdlODFkZDRkMzkzNTBhMzRiLVYuanBnIiwiY29udGVudF90eXBlIjoiaW1hZ2UvanBlZyIsInNlcnZpY2VfbmFtZSI6ImxvY2FsIn0sImV4cCI6IjIwMjYtMDQtMDdUMjI6NTg6NDUuNTMxWiIsInB1ciI6ImJsb2Jfa2V5In19--b323cadba6a1bf9bc4ed29f1f36d98aa353c94b5/IMG-3c2e83a378833947e81dd4d39350a34b-V.jpg" />
    </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">140 m2</div>
    </div>

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

<turbo-stream action="update" target="crown-container"><template></template></turbo-stream>
<turbo-stream action="update" target="interior-container"><template></template></turbo-stream>

    <turbo-stream action="update" target="exterior-container"><template><div class="flex flex-col gap-3 lg:gap-5" id="parameter-container-exterior">
  <div class="flex justify-end lg:justify-between items-center">
    <div class="hidden lg:flex text-3xl">
          Choose your exterior
    </div>
  </div>
  
      <div class="flex justify-between items-center text-2xl lg:hidden">
        <span>Choose your exterior</span>
      </div>
          
<a data-turbo-stream="true" class="flex justify-between gap-5 border rounded-xl py-4 px-5 hover:bg-[#EEE3DD]  " href="/customise_qubs/set_exterior?exterior_type=oslo">
  <div class="flex items-center">
    Oslo
  </div>

  <div class="flex gap-2">
        <img class="w-8 h-8 rounded-full" src="/assets/oslo-e8ee9f92.png" />
  </div>
</a>
          
<a data-turbo-stream="true" class="flex justify-between gap-5 border rounded-xl py-4 px-5 hover:bg-[#EEE3DD]  " href="/customise_qubs/set_exterior?exterior_type=urban_soul">
  <div class="flex items-center">
    Urban Soul
  </div>

  <div class="flex gap-2">
        <img class="w-8 h-8 rounded-full" src="/assets/urban_soul-e4611686.png" />
  </div>
</a>
          
<a data-turbo-stream="true" class="flex justify-between gap-5 border rounded-xl py-4 px-5 hover:bg-[#EEE3DD]  " href="/customise_qubs/set_exterior?exterior_type=rome">
  <div class="flex items-center">
    Rome
  </div>

  <div class="flex gap-2">
        <img class="w-8 h-8 rounded-full" src="/assets/travertino_2-f65a1a52.png" />
  </div>
</a>
</div></template></turbo-stream>

  <turbo-stream action="update" target="order-summary-container"><template><div class="flex flex-col gap-5 w-full justify-end">
  <div class="font-normal">Estimated delivery (months): 3</div>

    <div class="w-full flex justify-center items-center p-5 bg-slate-400 text-white rounded-xl cursor-not-allowed" 
         data-tooltip="Please select all of the property attributes"
         data-action="click->customise-qub#showModal">
      Order summary
    </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>
