templates/components/sectionAccommodationCountry.html.twig line 1

  1. <div class="relative overflow-hidden" id="recent-carousel">
  2.     <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
  3.         {% for building in recentBuildings %}
  4.             {% set filteredFiles2 = building.buildingDocuments|filter(item => item.name starts with 'file' or item.name starts with 'base' or item.name starts with 'cover' or item.name starts with 'imageComplexe') %}
  5.             <div class="flex-shrink-0 w-full bg-white shadow-md rounded-lg overflow-hidden z-10">
  6.                 <div class="relative w-full h-56 overflow-hidden max-lg:h-48">
  7.                     {% if filteredFiles2 is not empty %}
  8.                         <div class="absolute inset-0 flex transition-transform duration-500 ease-in-out" id="carousel-{{ building.id }}">
  9.                             {% for bd in filteredFiles2 %}
  10.                                 <a href="{{ path('detail_building', {id: building.id}) }}" class="w-full flex-shrink-0 bg-cover bg-no-repeat bg-center"
  11.                                     style="background-image: url('{{ asset('images/files/' ~ bd.imageFile) }}'); height: 14rem;">
  12.                                 </a>
  13.                                 {% if building.propertyManager.lessorType and building.propertyManager.lessorType == "Gestionnaire" %}
  14.                                     <img src="{{ asset('/images/site/bandeau-pro.png') }}" alt="Bandeau pro" class="absolute bottom-2 right-2 h-6 opacity-90">
  15.                                 {% endif %}
  16.                             {% endfor %}
  17.                         </div>
  18.                         <div class="flex absolute bottom-2 left-1/2 z-30 space-x-2 -translate-x-1/2" id="carousel-indicators-{{ building.id }}">
  19.                             {% for document in filteredFiles2 %}
  20.                                 <button type="button" class="w-3 h-3 rounded-full border border-gray-400 bg-gray-300 opacity-50" aria-label="Slide {{ loop.index0 }}" data-carousel-slide-to="{{ loop.index0 }}"></button>
  21.                             {% endfor %}
  22.                         </div>
  23.                         {% if filteredFiles2|length > 1 %}
  24.                             <button type="button" class="absolute top-1/2 left-2 z-40 transform -translate-y-1/2 bg-gray-300 p-2 rounded-full shadow-md" data-carousel-prev="{{ building.id }}">
  25.                                 <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  26.                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
  27.                                 </svg>
  28.                             </button>
  29.                             <button type="button" class="absolute top-1/2 right-2 z-40 transform -translate-y-1/2 bg-gray-300 p-2 rounded-full shadow-md" data-carousel-next="{{ building.id }}">
  30.                                 <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  31.                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
  32.                                 </svg>
  33.                             </button>
  34.                         {% endif %}
  35.                     {% endif %}
  36.                 </div>
  37.                 <div class="p-4 flex justify-between items-start max-lg:p-2">
  38.                     <div>
  39.                         {% if building.cityEntity is not null %}
  40.                             <a href="{{ path('detail_building', {id: building.id}) }}" class="block text-sm font-bold">
  41.                                 {{ building.cityEntity.city }}, {{ building.cityEntity.country }}
  42.                             </a>
  43.                         {% else %}
  44.                             <span class="block text-sm font-bold text-red-500">{{ 'City information not available'|trans }}</span>
  45.                         {% endif %}
  46.                         <a href="{{ path('detail_building', {id: building.id}) }}" class="block text-sm font-bold">{{ building.rent / 100 }} € {{ 'accueil.parmois'|trans }}</a>
  47.                         {# <a href="{{ path('detail_building', {id: building.id}) }}" class="block text-gray-500 text-sm">{{ 'accueil.add'|trans }}{{ building.createdAt|date('d/m/y') }}</a> #}
  48.                         {% if building.status == 'Disponible' %}
  49.                             {% if building.dateStartAt %}
  50.                                 <p class="text-gray-500 text-sm">{{ 'accueil.availableDate'|trans }} {{ building.dateStartAt|date('d/m/y') }}</p>
  51.                             {% else %}
  52.                                 <p class="text-gray-500 text-sm">{{ 'accueil.availableDateNow'|trans }}</p>
  53.                             {% endif %}
  54.                         {% elseif building.dateStartAt %}
  55.                             <p class="text-gray-500 text-sm">{{ 'accueil.dateStartAt'|trans }} {{ building.dateStartAt|date('d/m/y') }}</p>
  56.                         {% endif %}
  57.                     </div>
  58.                     <a class="flex items-center justify-center p-3 cursor-pointer rounded-lg mt-2" id="like-button-{{ building.id }}">
  59.                         {% if likedBuildings[building.id] is defined and likedBuildings[building.id] %}
  60.                             <i style="color: #ffcc00" class="fa-solid fa-heart pl-3 fa-2x like-button" data-image-id="{{ building.id }}"></i>
  61.                         {% else %}
  62.                             <i style="color: #ffcc00" class="fa-regular fa-heart pl-3 fa-2x like-button" data-image-id="{{ building.id }}"></i>
  63.                         {% endif %}
  64.                     </a>
  65.                 </div>
  66.             </div>
  67.         {% endfor %}
  68.     </div>
  69.     {% if recentBuildings is empty %}
  70.         <p class="text-gray-500 text-center">{{ 'accueil.noAccommodationAvailable'|trans }}</p>
  71.     {% endif %}
  72. </div>