templates/includes/blocks/projectSingleDetailsSection.html.twig line 1

Open in your IDE?
  1.   {# 
  2.   TODO:
  3.   3. Create multi range component (Budget, Area)
  4.   5. Create Show more logic
  5.   6. Create Multi Filtration logic
  6.  #}
  7.   <section class="project-details-section pt-20 lg:pb-24 bg-light text-blue" section-shade="light">
  8.     <div class="big-container flex flex-col lg:flex-row justify-between" batch-wrapp>
  9.       {# Appartment list #}
  10.       {# <div class="lg:w-6/12 lg:max-w-[620px]">
  11.         <h2 class="h3" fade fade-trigger="batch">Apartments / Lots</h2>
  13.         <div class="flex gap-8 mt-8" fade fade-trigger="batch">
  14.           <input-rooms
  15.             label-text="Rooms"
  16.             name="project-rooms"
  17.             :options="[
  18.               { id: '{{"1"|trans}}', text: '{{"1"|trans}}' },
  19.               { id: '{{"2"|trans}}', text: '{{"2"|trans}}' },
  20.               { id: '{{"3"|trans}}', text: '{{"3"|trans}}' },
  21.               { id: '{{"4+"|trans}}', text: '{{"4+"|trans}}' },
  22.             ]"
  23.           ></input-rooms>
  24.         </div>
  26.         <div class="mt-8" fade fade-trigger="batch">
  27.           <input-checkbox
  28.             name="hideSold"
  29.           >
  30.             <p class="text-blue">
  31.               Hide sold 
  32.             </p>
  33.           </input-checkbox>
  34.         </div>
  36.         <div fade fade-trigger="batch">
  37.           <project-items
  38.           :items="[
  39.             {
  40.               img: './assets/oaks-lane/projects/appartment-001.webp',
  41.               title: 'Appartment 001',
  42.               isSold: false,
  43.               price: `CHF 1'490'000.-`,
  44.               area: '139',
  45.               floor: '1 Floor',
  46.               rooms : '2 Rooms',
  47.               href: '#'
  48.             },
  49.             {
  50.               img: './assets/oaks-lane/projects/appartment-002.webp',
  51.               title: 'Appartment 002',
  52.               isSold: false,
  53.               price: `CHF 1'80'000.-`,
  54.               area: '139',
  55.               floor: '1 Floor',
  56.               rooms : '3 Rooms',
  57.               href: '#'
  58.             },
  59.             {
  60.               img: './assets/oaks-lane/projects/appartment-003.webp',
  61.               title: 'Appartment 003 With big title',
  62.               isSold: false,
  63.               price: `CHF 1’490'000.-`,
  64.               area: '152',
  65.               floor: '1 Floor',
  66.               rooms : '4 Rooms',
  67.               href: '#'
  68.             },
  69.             {
  70.               img: './assets/oaks-lane/projects/appartment-003.webp',
  71.               title: 'Appartment 004',
  72.               isSold: true,
  73.               price: `CHF 1’490'000.-`,
  74.               area: '152',
  75.               floor: '1 Floor',
  76.               rooms : '4 Rooms',
  77.               href: '#'
  78.             },
  79.             {
  80.               img: './assets/oaks-lane/projects/appartment-002.webp',
  81.               title: 'Appartment 005',
  82.               isSold: true,
  83.               price: `CHF 1’490'000.-`,
  84.               area: '87',
  85.               floor: '1 Floor',
  86.               rooms : '2 Rooms',
  87.               href: '#'
  88.             },
  89.             
  90.             ]"
  91.           ></project-items>
  92.         </div>
  93.       </div> #}
  95.       {# Appartment list #}
  96.       {# <div class="lg:w-6/12 lg:max-w-[620px] js-apartments">
  97.         <h2 class="h3" fade fade-trigger="batch">Apartments / Lots</h2>
  99.         <div class="grid md:flex gap-8 mt-8" fade fade-trigger="batch">
  100.           <input-rooms
  101.             label-text="Rooms"
  102.             name="project-rooms"
  103.             :apartments="apartments"
  104.             v-model="filters.rooms"
  105.           ></input-rooms>
  107.           <div class="md:w-0 md:flex-grow">
  108.             <input-interval label-text="Budget" v-model="filters.budget" :enable-cross="false" :min="0" :max="10000000" :interval="10000" prefix="CHF" suffix=".-"/>
  109.           </div>
  110.           <div class="md:w-0 md:flex-grow">
  111.             <input-interval label-text="Area" v-model="filters.area" :enable-cross="false" :min="0" :max="500" :interval="1" />
  112.           </div>
  113.         </div>
  115.         <div class="mt-8" fade fade-trigger="batch">
  116.           <input-checkbox
  117.             :checked="filters.hideSold"
  118.             @input="handleHideSoldChange"
  119.           >
  120.             <p class="text-blue">
  121.               Hide sold 
  122.             </p>
  123.           </input-checkbox>
  124.         </div>
  126.         <div fade fade-trigger="batch">
  127.           <project-items :items="paginatedAndFilteredApartments" price-prefix="CHF" price-suffix=".-"></project-items>
  129.           <button
  130.             v-if="canLoadMore"
  131.             @click="loadMore"
  132.             class="w-full flex items-center justify-center gap-9 bg-white text-blue text-lg sm:text-xl xl:text-2xl h-20 outline-none border border-transparent group shadow-transparent hover:shadow-md hover:scale-[1.01] focus-visible:shadow-md focus-visible:border-blue/50 duration-300 mt-2"
  133.           >
  134.             <p class="group-hover:-translate-y-1 group-focus-visible:-translate-y-1 duration-200">
  135.               Show more
  136.             </p>
  138.             <svg class="shrink-0 w-2 h-6 group-hover:-translate-y-1 group-focus-visible:-translate-y-1 duration-200">
  139.               <use xlink:href="#arrow-down"></use>
  140.             </svg>
  141.           </button>
  142.         </div>
  143.       </div> #}
  145.       {# Details side #}
  146.       <div class="bg-white lg:bg-transparent mt-12 -mx-8 lg:m-0 pt-16 pb-6 lg:p-0 px-8 lg:w-5/12 xl:w-6/12 xl:pr-24">
  147.         <h2 class="h3" fade fade-trigger="batch">{{ content.projectDetailsTitle }}</h2>
  149.         <ul class="flex flex-col gap-6 mt-6">
  150.           {% for item in content.details %}
  151.           
  153.           {% if item.detailsType == 'Lots' %}
  154.               {% set icon = 'lots' %}
  156.           {% elseif item.detailsType == 'Floors' %}
  157.               {% set icon = 'floors' %}
  159.           {% elseif item.detailsType == 'Gross-floor-area' %}
  160.               {% set icon = 'gross-floor' %}
  162.           {% elseif item.detailsType == 'Garden' %}
  163.               {% set icon = 'garden' %}
  165.           {% elseif item.detailsType == 'Terrace' %}
  166.               {% set icon = 'terrace' %}
  168.           {% elseif item.detailsType == 'Basement' %}
  169.               {% set icon = 'basement' %}
  171.           {% elseif item.detailsType == 'Number-of-rooms' %}
  172.               {% set icon = 'number-of-rooms' %}
  174.           {% elseif item.detailsType == 'M2-weighted' %}
  175.               {% set icon = 'warning' %}
  177.           {% elseif item.detailsType == 'Price-without-parking' %}
  178.               {% set icon = 'price-without-parking' %}
  180.           {% elseif item.detailsType == 'Price-with-parking' %}
  181.               {% set icon = 'price-with-parking' %}
  183.           {% elseif item.detailsType == 'Parking-space' %}
  184.               {% set icon = 'parking-space' %}
  186.           {% elseif item.detailsType == 'Status' %}
  187.               {% set icon = 'warning' %}
  189.           {% else %}
  190.               {% set icon = '' %}
  191.           {% endif %}
  194.             <li class="flex justify-between gap-8 pb-6 border-b border-gray" fade fade-trigger="batch">
  195.               <p class="flex gap-5">
  196.                 <svg class="shrink-0 w-6 h-6">
  197.                   <use xlink:href="#{{icon}}"></use>
  198.                 </svg>
  200.                 <span>{{item.detailsTitle}}</span>
  201.               </p>
  203.               <p class="text-right">{{item.detailsText | raw}}</p>
  204.             </li>
  205.           {% endfor %}
  206.         </ul>
  207.       </div>
  208.     </div>
  209.   </section>