<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="/de/customise_qubs">&lt; Zurück</a>
    <div class="flex text-3xl">
            qub 24
    </div>
      <div>
        24 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="/de/customise_qubs/toggle_2d_plan">
              <div>2D 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="/de/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="/de/customise_qubs">&lt; Zurück</a>
    <div class="flex text-3xl">
            qub 24
    </div>
      <div>
        24 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="/de/customise_qubs/toggle_2d_plan">
              <div>2D 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="/de/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">
    <div class="w-full h-[500px] overflow-hidden">
      <img loading="lazy" class="object-fit w-full h-full" src="https://myqub.com/rails/active_storage/disk/eyJfcmFpbHMiOnsiZGF0YSI6eyJrZXkiOiJ2aHkwaXZ6c3JtODhnZWxmOGZrZXA1M2syNWFnIiwiZGlzcG9zaXRpb24iOiJpbmxpbmU7IGZpbGVuYW1lPVwiY29uY3JldGVfZXh0ZXJpb3JfMjQucG5nXCI7IGZpbGVuYW1lKj1VVEYtOCcnY29uY3JldGVfZXh0ZXJpb3JfMjQucG5nIiwiY29udGVudF90eXBlIjoiaW1hZ2UvcG5nIiwic2VydmljZV9uYW1lIjoibG9jYWwifSwiZXhwIjoiMjAyNi0wNC0xOFQwNDowMjozOS44NDJaIiwicHVyIjoiYmxvYl9rZXkifX0=--7a25995e5eb664906e332eaf3d6472e499337a72/concrete_exterior_24.png" />
    </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">24 m2</div>
    </div>

    <div class="flex flex-col gap-5">
      <div class="text-slate-400 font-normal">Preis</div>
      <div class="text-3xl">€ 125,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">
          <span class="text-xl">
            Wähle deinen Außenbereich
          </span>
    </div>
  </div>
  </div>

      <div class="flex justify-between items-center text-2xl lg:hidden">
        <span class="text-base">Wähle deinen Außenbereich</span>
      </div>
          
<a data-turbo-stream="true" class="flex justify-start gap-5 border rounded-[36px] p-2   bg-light_green border-green" href="/de/customise_qubs/set_exterior?exterior_type=concrete">
  <div class="flex gap-2">
        <img class="w-12 h-12 rounded-full" src="/assets/concrete-62885444.png" />
  </div>
  <div class="flex items-center">
    Concrete
  </div>


</a>
</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">
            Wähle deinen Innenbereich
          </span>
    </div>
  </div>
  </div>

      <div class="flex justify-between items-center text-2xl lg:hidden">
        <span class="text-base">Wähle deinen Innenbereich</span>
      </div>
          
<a data-turbo-stream="true" 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="/de/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" 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="/de/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-green peer-checked:bg-green peer-checked:border-green flex items-center justify-center">
        <div class="w-2 h-2 rounded-full bg-white"></div>
      </div>
    </div>

    <label for="optional_feature_terrace" class="cursor-pointer">
      Terrasse mit Dach
    </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-green peer-checked:bg-green peer-checked:border-green flex items-center justify-center">
        <div class="w-2 h-2 rounded-full bg-white"></div>
      </div>
    </div>

    <label for="optional_feature_kitchen" class="cursor-pointer">
      Küche
    </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-green peer-checked:bg-green peer-checked:border-green flex items-center justify-center">
        <div class="w-2 h-2 rounded-full bg-white"></div>
      </div>
    </div>

    <label for="optional_feature_furniture" class="cursor-pointer">
      Möbel
    </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: de.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>125,000</span>
        <span>€</span>
      </div>

     <div class="price opacity-50">1050€/Monat</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">
        Termin buchen
      </div>
  </div>
  <div class="font-normal text-sm">
    Geschätzte Lieferzeit (Monate): 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">Fehlende Qub-Attribute</div>
        <div class="text-gray text-[16px]">Bitte wähle alle Qub-Attribute aus, um fortzufahren.</div>
      </div>
    </div>


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