templates/front/accommodation/accommodation-1.html.twig line 96

Open in your IDE?
  1. {% extends 'front/page.html.twig' %}
  2. {% trans_default_domain 'front' %}
  3. {% import "front/_shared/macros.html.twig" as macro %}
  5. {% block body_class %}{{ parent() }} {% endblock %}
  7. {%  block meta_title %}{{ page.metaTitle }}{% endblock %}
  8. {%  block meta_description %}{{ page.metaDescription }}{% endblock %}
  10. {% set isMobile = isMobile() %}
  12. {% block header_class %}
  13.     {{ (isMobile) ? "detail-head" : "dark-header" }}
  14. {% endblock %}
  16. {% block header_content %}
  17.     {% if isMobile %}
  18.         <div id="accommodation-detail-header" class="mobile" style="{% if accommodation.cover %}background-image: url({{ accommodation.cover | imagine_filter('accommodation_slider') }});{% endif %}">
  19.             <div class="intro">
  20.                 <h1><span>{{ accommodation.name }}</span></h1>
  21.                 <h2 class="subtitle">
  22.                     {{ accommodation.address.address }}
  23.                     <br>{{ accommodation.address.zipcode }} {{ accommodation.address.city }}
  24.                 </h2>
  25.             </div>
  26.         </div>
  27.     {% endif %}
  28. {% endblock %}
  30. {% block page_content %}
  32.     {% if not isMobile %}
  33.         <div class="detail-head">
  34.             <div class="detail-title-container container-fluid">
  35.                 <div class="owl-carousel carousel-detail" data-controller="carousel" data-type="detail">
  36.                     {% if accommodation.cover %}
  37.                         <div>
  38.                             <img src="{{ accommodation.cover | imagine_filter('accommodation_inline_slider') }}" alt="">
  39.                         </div>
  40.                     {% endif %}
  41.                     {% for image in accommodation.images %}
  42.                         <div>
  43.                             <img src="{{ image | imagine_filter('accommodation_inline_slider') }}" alt="">
  44.                         </div>
  45.                     {% endfor %}
  46.                 </div>
  47.             </div>
  48.         </div>
  49.     {% else %}
  51.         <div class="lightbox-gallery">
  52.             {% for image in accommodation.images %}
  53.                 <a href="{{ image | imagine_filter('accommodation_slider') }}"></a>
  54.             {% endfor %}
  55.         </div>
  57.         <div id="mobile-gallery-thumbs">
  58.             {% for image in accommodation.images|slice(0,4) %}
  59.                 <div class="image-container">
  60.                     <a href="{{ image | imagine_filter('accommodation_slider') }}" class="open-lightbox-gallery">
  61.                         <img src="{{ image | imagine_filter('accommodation_square_gallery') }}" class="d-block w-100" alt="{{ accommodation.name }} - photo">
  62.                     </a>
  63.                 </div>
  64.             {% endfor %}
  65.         </div>
  67.         <div class="text-center mb-3">
  68.             <button class="btn btn-primary open-lightbox-gallery">VOIR TOUTES LES PHOTOS</button>
  69.         </div>
  70.     {% endif %}
  72.     <main class="detail detail-1" data-controller="accommodation">
  74.         {% if not isMobile %}
  75.             <div class="menu-detail d-none d-lg-block">
  76.                 <ul>
  77.                     <li class="active"><a href="#description">Description</a></li>
  78.                     <li><a href="#services">Services</a></li>
  79.                     <li><a href="#colocataires">Colocataires</a></li>
  80.                     <li><a href="#emplacement">Emplacement</a></li>
  81.                     <li><a href="#chambres">Chambres</a></li>
  82.                     <li><a href="{{ accommodation.virtualTour }}" target="_blank" class="btn-explore"><img src="{{ asset('build/images/icons/icon_play.svg') }}" alt=""> Explorer</a></li>
  83.                 </ul>
  84.             </div>
  86.             <div id="virtual-tour-modal">
  87.             <div class="overlay"></div>
  88.             <div class="content">
  89.                 <button class="btn-close">x</button>
  90.                 <iframe></iframe>
  91.             </div>
  92.         </div>
  93.         {% endif %}
  95.         <div class="bg-info-ctn">
  96.             {% include 'front/accommodation/blocks/infos-1.html.twig' %}
  98.             <section class="container rooms" id="chambres">
  99.                 <div class="row">
  100.                     <div class="col rooms-inner">
  102.                         {% if not isMobile %}
  103.                             <h2 class="title-room">Toutes <span>les chambres</span></h2>
  104.                             <p class="intro-room">
  105.                                 Retrouvez les autres chambres que nous proposons
  106.                             </p>
  107.                             <div class="row mb-5">
  108.                             <div class="col-12 col-md-12 lightbox-gallery text-center">
  109.                                 {% if accommodation.plan %}
  110.                                     <a href="{{ accommodation.plan | imagine_filter('accommodation_slider') }}">
  111.                                         <img class="plan" src="{{ accommodation.plan | imagine_filter('accommodation_wide_thumb') }}" alt="Plan des chambres">
  112.                                     </a>
  113.                                 {% endif %}
  114.                             </div>
  115.                         </div>
  116.                         {% else %}
  117.                             {% if accommodation.virtualTour %}
  118.                                 <h2 class="detail-title">
  119.                                     Visite <span>virtuelle</span>
  120.                                 </h2>
  121.                                 <div id="explore-button-container" style="{% if accommodation.cover %}background-image: url({{ accommodation.cover | imagine_filter('accommodation_slider') }});{% endif %}">
  122.                                     <a href="{{ accommodation.virtualTour }}" target="_blank" class="btn-explore">
  123.                                         <span class="icon-play"></span>
  124.                                         <span class="label">{{ 'title.explore_accommodation'|trans }}</span>
  125.                                     </a>
  127.                                     <div id="virtual-tour-modal">
  128.                                         <div class="overlay"></div>
  129.                                         <div class="content">
  130.                                             <button class="btn-close">x</button>
  131.                                             <iframe></iframe>
  132.                                         </div>
  133.                                     </div>
  134.                                 </div>
  135.                                 <br>
  136.                             {% endif %}
  138.                         {% endif %}
  140.                         {% for room in accommodation.activeRooms %}
  141.                             {% set availabilityDate = room.availablilityDate %}
  143.                             <div class="row room" id="room-{{ room.id }}">
  144.                                 <div class="col-12 col-lg-3 col-xl-3 images">
  145.                                     <div class="owl-carousel carousel-homes" data-controller="carousel" data-type="homes">
  146.                                         {% for image in room.images %}
  147.                                             <div class="illu">
  148.                                                 <img src="{{ image | imagine_filter('room_slider') }}" alt="">
  149.                                             </div>
  150.                                         {% endfor %}
  151.                                     </div> <!-- carousel -->
  153.                                     {% if room.available %}
  154.                                         <div class="available">
  155.                                             <div class="text-ctn">{{ 'label.room_available_now'|trans }}</div>
  156.                                             <img src="{{ asset('build/images/icons/triangle-darkgreen.png') }}">
  157.                                         </div>
  158.                                     {% else %}
  159.                                         <div class="occupied">
  160.                                             {% if availabilityDate is not null %}
  161.                                                 <div class="text-ctn">{{ 'label.available_from'|trans({date: availabilityDate|format_datetime('short', 'none')})|raw }}</div>
  162.                                             {% else %}
  163.                                                 <div class="text-ctn">{{ 'label.room_not_available'|trans }}</div>
  164.                                             {% endif %}
  165.                                             <img src="{{ asset('build/images/icons/triangle-darkgreen.png') }}">
  166.                                         </div>
  167.                                     {% endif %}
  168.                                 </div> <!-- images-->
  169.                                 <div class="col-12 col-lg-9 col-xl-6 infos">
  170.                                     <h2>{{ room.name }}</h2>
  171.                                     <p>{{ room.description }}</p>
  173.                                     <h3>{{ 'label.room_equipment'|trans }}</h3>
  174.                                     <div class="equipment-list" data-controller="equipment-list">
  175.                                         {% set totalEquipment = 0 %}
  176.                                         <ul class="equip-list">
  177.                                             {% if room.privateToilet %}
  178.                                                 {% set totalEquipment = totalEquipment+1 %}
  179.                                                 <li><img src="{{ asset('build/images/icons/toilet.svg') }}" alt=""> {{ 'label.privateToilet'|trans }}</li>
  180.                                             {% endif %}
  181.                                             {% if room.privateBathroom %}
  182.                                                 {% set totalEquipment = totalEquipment+1 %}
  183.                                                 <li><img src="{{ asset('build/images/icons/bathtub.svg') }}" alt=""> {{ 'label.privateBathroom'|trans }}</li>
  184.                                             {% endif %}
  185.                                             {% if room.privateKitchen %}
  186.                                                 {% set totalEquipment = totalEquipment+1 %}
  187.                                                 <li><img src="{{ asset('build/images/icons/kitchen.svg') }}" alt=""> {{ 'label.privateKitchen'|trans }}</li>
  188.                                             {% endif %}
  190.                                             {% set totalEquipment = totalEquipment + room.equipments|length %}
  191.                                             {% for equipment in room.equipments %}
  192.                                                 <li>
  193.                                                     {% if equipment.image %}
  194.                                                         <img src="{{ equipment.image.getUrl() }}" alt="{{ equipment.label }}">
  195.                                                     {% else %}
  196.                                                         <img src="{{ asset('build/images/icons/icon-layers.png') }}" alt="{{ equipment.label }}">
  197.                                                     {% endif %}
  198.                                                     {{ equipment.label }}
  199.                                                 </li>
  200.                                             {% endfor %}
  201.                                         </ul>
  202.                                         {% if totalEquipment > 9 %}
  203.                                             <a href="" class="seemore open-list" data-action="equipment-list#more">Voir tous les équipements</a>
  204.                                             <a href="" class="seemore close-list" data-action="equipment-list#less">Réduire les équipements</a>
  205.                                         {% endif %}
  206.                                     </div>
  208.                                 </div> <!-- infos-->
  209.                                 <div class="col-12 col-lg-12 col-xl-3 resa">
  210.                                     <h3 class="price">{{ room.rent|format_currency('EUR')|currency }} <small>/ {{ 'label.month'|trans }}*</small></h3>
  211.                                     <p class="notice">{{ 'label.maxHousingAssistance'|trans }} <span>-{{ room.maxHousingAssistance|format_currency('EUR')|currency }}</span></p>
  212.                                     <p class="notice">{{ 'label.charges'|trans }} <span>+{{ room.chargesFees|format_currency('EUR')|currency }}</span></p>
  213.                                     {% if room.cleaningFees %}
  214.                                         <p class="notice">{{ 'label.cleaningFees'|trans }} <span>+{{ room.cleaningFees|format_currency('EUR')|currency }}</span></p>
  215.                                     {% endif %}
  216.                                     <h4>{{ 'label.includedInCharges'|trans }}</h4>
  217.                                     <p class="included"><span>•</span> {{ room.chargesDetails|map(c => c.label)|join(', ') }}</p>
  219.                                     {% if room.available %}
  220.                                         {% if not is_granted('IS_AUTHENTICATED_FULLY') %}
  221.                                             <a href="{{ path('front_booking_index', {room: room.id}) }}" class="reserve open-dynamic-modal" data-route="{{ path('front_user_modal_login') }}">{{ 'action.book_room'|trans }}</a>
  222.                                         {% else %}
  223.                                             <a href="{{ path('front_booking_index', {room: room.id}) }}" class="reserve">
  224.                                                 {% if not app.user.isOccupyingRoom %}
  225.                                                     {{ 'action.book_room'|trans }}
  226.                                                 {% else %}
  227.                                                     {{ 'action.change_room'|trans }}
  228.                                                 {% endif %}
  229.                                             </a>
  230.                                         {% endif %}
  231.                                     {% else %}
  232.                                         <a href="#" class="alert open-dynamic-modal" data-route="{{ path('front_accommodation_modal_waiting_list', {id: room.id}) }}">{{ 'action.availability_alert'|trans }}</a>
  233.                                         {% if availabilityDate is not null %}
  234.                                             <p class="alert-notice">{{ 'label.available_from'|trans({date: availabilityDate|format_datetime('short', 'none')})|raw }}</p>
  235.                                         {% endif %}
  236.                                     {% endif %}
  238.                                     <a href="https://api.whatsapp.com/send?phone=" class="whatsapp">Chat Whatsapp</a>
  239.                                 </div> <!-- resa-->
  240.                             </div> <!-- room -->
  241.                         {% endfor %}
  242.                         <div class="btn-contact-room-container">
  243.                             <a href="{{ path('front_page_contact_room', {id: accommodation.id}) }}" class="btn btn-outline-dark btn-contact-room">SE METTRE SUR LISTE D'ATTENTE</a>
  244.                         </div>
  245.                     </div>
  246.                 </div>
  247.             </section> <!-- rooms -->
  248.         </div>
  250.         {% include "front/_shared/faq.html.twig" %}
  251.     </main>
  252. {% endblock %}
  254. {% block javascripts %}
  255.     {{ parent() }}
  256. {% endblock %}
  258. {% block javascripts_footer %}
  259. {% endblock %}