templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Tracol | {% block title %}{% endblock %}</title>
  6.     <link rel="icon" type="image/x-icon" href="{{ asset("build/favicon-white.ico") }}">
  7.     {% block metaDescription %}{% endblock %}
  8.     <meta name="viewport" content= "width=device-width, initial-scale=1.0">
  9.     {% block stylesheets %}
  10.         {{ encore_entry_link_tags('app') }}
  11.         <link rel="stylesheet" href="https://unpkg.com/@egjs/flicking/dist/flicking.css" crossorigin="anonymous" />
  12.         <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  13.         <!--link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /-->
  14.     {% endblock %}
  16.     <script id="Cookiebot" src="
  17.     https://consent.cookiebot.com/uc.js"
  18.     data-cbid="d4dd1335-1dc0-4d3c-b4c3-49e9043d2e0e" data-blockingmode="auto" type="text/javascript"></script>
  19.         {% block javascripts %}
  20.         {{ encore_entry_script_tags('app') }}
  21. {#        <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="d4dd1335-1dc0-4d3c-b4c3-49e9043d2e0e" data-blockingmode="auto" type="text/javascript"></script>#}
  22.         <script
  23.                 src="https://code.jquery.com/jquery-3.6.0.min.js"
  24.                 integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  25.                 crossorigin="anonymous">
  26.         </script>
  27.         
  28.         <script src="https://unpkg.com/@egjs/flicking/dist/flicking.pkgd.min.js" crossorigin="anonymous"></script>
  29.         <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  30.         <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  31.         <script src="{{ asset("/lightboxed/lightboxed.js") }}"></script>
  32.         <!--script src="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.js" integrity="sha256-c3VbCrdCtTHmXYAuxRT4D0Cy5VC/0zBnXVRIvJiV9xo=" crossorigin="anonymous"></script-->
  33.         
  34.     {% endblock %}
  35.     <style>
  36.         @media (min-width: 1200px) and (max-width:1498px) {
  37.             .navbar-expand-xl .navbar-collapse {
  38.                 display: flex !important;
  39.                 /* flex-basis: auto; */
  40.                 justify-content: center;
  41.             }
  42.         }
  43.     </style>
  44. </head>
  46. <body>
  47.     {% if popup2024 is defined and popup2024 %}
  48.         {% include '_popup2024.html.twig' %}
  49.     {% endif %}
  50. {#<script id="CookieDeclaration" src="https://consent.cookiebot.com/d4dd1335-1dc0-4d3c-b4c3-49e9043d2e0e/cd.js" type="text/javascript" async></script>#}
  51. {% for success in app.flashes('success') %}
  52.     <div class="alert alert-success" role="alert">
  53.         <p class="alert-link">{{ success }}</p>
  54.     </div>
  55. {% endfor %}
  56. {% for error in app.flashes('error') %}
  57.     <div class="col-lg-8 mx-auto alert alert-danger" role="alert">
  58.         <p class="alert-link">{{ error }}</p>
  59.     </div>
  60. {% endfor %}
  63. {#
  64. <div class="d-flex flex-column flex-shrink-0 bg-light black" style="width: 4rem;">
  65.     <a  href="https://www.facebook.com/tracolimmobilier/"><i class="fab fa-facebook-f"></i></a>
  66.     <a href="https://www.linkedin.com/company/tracol-immobilier-s-a-/"><i class="fab fa-linkedin"></i></a>
  67.     <a href="https://www.instagram.com/tracolimmobilier/"><i class="fab fa-instagram"></i></a>
  68. </div>
  69. <div id="div-newsletter" class="d-flex flex-column flex-shrink-0 bg-light orange">
  70.     <a id="text-vertical" class="text-vertical" href="#">NEWSLETTER</a>
  71.     <div id="div-form-newsletter" style="opacity: 0">
  72.         <span id="span-newsletter" style="opacity: 0">Restez informé ! Abonnez-vous à notre newsletter.</span>
  73.         <form action="{{ path('mailchimp') }}" id="form-newsletter" style="display: none">
  74.             <div class="input-group">
  75.                 <input id="input-email" class="form-control input-email" type="email" name="email" placeholder="Votre adresse mail">
  76.                 <button class="btn btn-primary button-newsletter" type="submit"><i class="fas fa-arrow-right"></i></button>
  77.             </div>
  78.         </form>
  79.     </div>
  80. </div>
  81. #}
  83. {% set propertiesApi = get_properties %}
  85. <nav class="navbar navbar-expand-xl fixed-top homepage">
  86.     <div id="center-nav" class="container-fluid">
  87.         <button class="navbar-toggler"
  88.                 type="button"
  89.                 data-bs-toggle="collapse"
  90.                 data-bs-target="#navbarNav"
  91.                 aria-controls="navbarNav"
  92.                 aria-expanded="false"
  93.                 aria-label="Toggle navigation">
  94.             <span class="navbar-toggler-icon">
  95.                 <i class="fas fa-bars"></i>
  96.             </span>
  97.         </button>
  98.         <a href="{{ path('index') }}" class="tracol-logo">
  99.             <svg xmlns="http://www.w3.org/2000/svg" width="136.339" height="51.127" viewBox="0 0 136.339 51.127">
  100.                 <g id="Groupe_4469" data-name="Groupe 4469" transform="translate(11823.999 14639)">
  101.                     <path id="Tracé_59" data-name="Tracé 59" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-12370.418 -14871.441)" fill="#f6a400"/>
  102.                     <path id="Tracé_60" data-name="Tracé 60" d="M635.6,255.7c0,7.088,3.8,9.434,9.069,9.434a16.669,16.669,0,0,0,6.359-1.2l-.73-4.379a14.765,14.765,0,0,1-5.629,1.147c-2.658,0-4.378-1.2-4.378-5V232.5H635.6Z" transform="translate(-12347.273 -14871.48)"/>
  103.                     <path id="Tracé_61" data-name="Tracé 61" d="M402.171,274.441h4.691V253.593a10.905,10.905,0,0,1,3.962-.573,14.562,14.562,0,0,1,4.117.573l.782-4.378a17.993,17.993,0,0,0-5.108-.626,21.859,21.859,0,0,0-8.444,1.512Zm40.968-12.477c0,8.652,4.639,13.031,12.3,13.031a19.832,19.832,0,0,0,6.984-1.2l-.73-4.378a15.649,15.649,0,0,1-5.942,1.147c-5.525,0-7.922-2.814-7.922-8.912,0-5.264,1.824-8.6,7.557-8.6a12.827,12.827,0,0,1,5.838,1.355l.729-4.482a17.148,17.148,0,0,0-6.672-1.3c-8.339,0-12.144,5.473-12.144,13.343m40.6-.156c0,5.369-1.3,8.756-6.724,8.756-5.473,0-6.828-3.388-6.828-8.756,0-5.316,1.355-8.756,6.828-8.756,5.42,0,6.724,3.44,6.724,8.756m-6.724,13.187c7.975,0,11.467-5.264,11.467-13.187,0-8.131-3.232-13.187-11.467-13.187-8.027,0-11.519,5.316-11.519,13.187,0,8.131,3.284,13.187,11.519,13.187" transform="translate(-12205.374 -14881.258)"/>
  104.                     <path id="Tracé_62" data-name="Tracé 62" d="M349.134,255.7c0,7.088,3.8,9.434,9.069,9.434a16.669,16.669,0,0,0,6.359-1.2l-.73-4.379A14.766,14.766,0,0,1,358.2,260.7c-2.658,0-4.378-1.2-4.378-5V244.778h9.695v-4.43h-9.695V232.5h-4.691Z" transform="translate(-12173.133 -14871.48)"/>
  105.                     <path id="Tracé_63" data-name="Tracé 63" d="M452.277,271.03c-4.851,0-4.851-3.294-4.851-4.165,0-.807.04-3.966,5.213-3.966H463.01v-5.42c0-6.567-4.431-8.809-10.425-8.809a29.621,29.621,0,0,0-7.87,1.146l.678,4.326a20.958,20.958,0,0,1,7.036-1.2c3.7,0,5.942,1.043,5.942,4.066v2.241h-4.9c-6.567,0-10.685,2.137-10.685,7.871,0,5.681,3.8,7.922,10.32,7.922a32.7,32.7,0,0,0,9.9-1.511v-4.091a43.889,43.889,0,0,1-10.733,1.589" transform="translate(-12230.064 -14881.307)"/>
  106.                     <rect id="Rectangle_73" data-name="Rectangle 73" width="1.585" height="8.956" transform="translate(-11803.191 -14596.829)"/>
  107.                     <path id="Tracé_64" data-name="Tracé 64" d="M415.929,339.993h1.5l2.643,4.172,2.628-4.172h1.5v8.956h-1.585v-6.105l-2.448,3.88h-.194l-2.476-3.866v6.092h-1.572Z" transform="translate(-12213.737 -14936.822)"/>
  108.                     <path id="Tracé_65" data-name="Tracé 65" d="M446.472,339.993h1.5l2.643,4.172,2.628-4.172h1.5v8.956h-1.585v-6.105l-2.448,3.88h-.194l-2.476-3.866v6.092h-1.572Z" transform="translate(-12232.305 -14936.822)"/>
  109.                     <path id="Tracé_66" data-name="Tracé 66" d="M480,341.292c-1.808,0-2.113,1.112-2.113,3.058s.334,3.018,2.142,3.018,2.142-1.085,2.142-3.018-.349-3.058-2.171-3.058m-3.7,3.058c0-2.67.736-4.533,3.7-4.533s3.77,1.848,3.77,4.533-.779,4.492-3.741,4.492-3.727-1.822-3.727-4.492" transform="translate(-12250.44 -14936.716)"/>
  110.                     <path id="Tracé_67" data-name="Tracé 67" d="M505.617,345.055v2.42h1.877c1.266,0,1.7-.473,1.7-1.2s-.417-1.224-1.7-1.224Zm0-3.588v2.225h1.711c1.182,0,1.585-.5,1.585-1.126s-.4-1.1-1.585-1.1Zm1.711-1.474c2.309,0,3.185.988,3.185,2.42a1.93,1.93,0,0,1-1.182,1.892,2.046,2.046,0,0,1,1.461,2c0,1.4-1.029,2.642-3.3,2.642h-3.449v-8.956Z" transform="translate(-12267.304 -14936.822)"/>
  111.                     <rect id="Rectangle_74" data-name="Rectangle 74" width="1.586" height="8.956" transform="translate(-11753.034 -14596.829)"/>
  112.                     <path id="Tracé_68" data-name="Tracé 68" d="M543.847,339.993h1.572v7.482h4.117v1.474h-5.689Z" transform="translate(-12291.499 -14936.822)"/>
  113.                     <rect id="Rectangle_75" data-name="Rectangle 75" width="1.586" height="8.956" transform="translate(-11738.931 -14596.829)"/>
  114.                     <path id="Tracé_69" data-name="Tracé 69" d="M581.389,347.475h4.673v1.474h-6.245v-8.957h6.245v1.474h-4.673v2.142h4.117v1.474h-4.117Z" transform="translate(-12313.365 -14936.822)"/>
  115.                     <path id="Tracé_70" data-name="Tracé 70" d="M605.9,341.467V344.1h1.85c1.377,0,1.794-.529,1.794-1.308,0-.834-.417-1.321-1.794-1.321Zm3.255,3.908,2.337,3.574h-1.808l-2.2-3.379H605.9v3.379h-1.572v-8.956h3.421c2.448,0,3.38,1.126,3.38,2.8a2.537,2.537,0,0,1-1.975,2.587" transform="translate(-12328.266 -14936.822)"/>
  116.                 </g>
  117.             </svg>
  119.         </a>
  120.         <button style="background-color: transparent;border-color: transparent; display: none;position: absolute;right:0;top:5px;" id="submit-search-mobile" type="submit" data-bs-toggle="modal" data-bs-target="#exampleModal1">
  121.             <svg style="height: 55px;" class="search-button" xmlns="http://www.w3.org/2000/svg" width="55.982" height="90.97" viewBox="0 0 55.982 90.97">
  122.                 <g id="Groupe_3817" data-name="Groupe 3817" transform="translate(-1528.861 -105)">
  123.                     <path id="Tracé_95" data-name="Tracé 95" d="M729.651,232.441H673.669v90.97l55.982-11.894Z" transform="translate(855.192 -127.441)" fill="#f6a400"/>
  124.                     <g id="Groupe_3794" data-name="Groupe 3794" transform="translate(1545.335 126.696)">
  125.                         <g id="np_search_1868241_000000">
  126.                             <path id="Tracé_92" data-name="Tracé 92" d="M8.287,17.368A8.662,8.662,0,1,1,14.4,14.813a8.679,8.679,0,0,1-6.109,2.555Zm0-15.055a6.36,6.36,0,1,0,4.477,1.881A6.377,6.377,0,0,0,8.287,2.313Z" transform="translate(0.441 -0.012)" fill="#fff"/>
  127.                             <path id="Tracé_93" data-name="Tracé 93" d="M57.82,59.567l1.626-1.633L67.4,65.852l-1.626,1.633Z" transform="translate(-44.591 -44.782)" fill="#fff"/>
  128.                         </g>
  129.                     </g>
  130.                 </g>
  131.             </svg>
  132.         </button>
  135.         <!-- Modal -->
  136.         {% include '_navSearch.html.twig' %}
  138.         <div class="nav-elements collapse navbar-collapse" id="navbarNav">
  139.             <ul class="navbar-nav">
  140.                 {#
  141.                 <li class="nav-item">
  142.                     <a class="nav-link active" aria-current="page" href="{{ path('tracol') }}">Tracol</a>
  143.                 </li>
  144.                 #}
  146.                 <li class="nav-item">
  147.                     <a class="nav-link" href="{{ path('about') }}">Qui sommes-nous ?</a>
  148.                 </li>
  149.                 <li class="nav-item">
  150.                     <a class="nav-link" href="{{ path('properties', {'keyword': 'vente'}) }}">Acheter</a>
  151.                 </li>
  152.                 <li class="nav-item">
  153.                     <a class="nav-link" href="{{ path('properties', {'keyword': 'location'}) }}">Louer</a>
  154.                 </li>
  155.                 <li class="nav-item">
  156.                     <a class="nav-link" href="{{ path('vendre', {'keyword': 'location'}) }}">Vendre</a>
  157.                 </li>
  158.                 <li class="nav-item">
  159.                     <a class="nav-link" href="{{ path('projects', {'keyword': 'location'}) }}">Projets</a>
  160.                 </li>
  161.                 <li class="nav-item">
  162.                     <a class="nav-link" href="{{ path('reference') }}">Références</a>
  163.                 </li>
  165.                 {#
  166.                 <li class="nav-item">
  167.                     <a class="nav-link" href="{{ path('team') }}">Notre equipe</a>
  168.                 </li>
  169.                 #}
  172. {#                <li class="nav-item">#}
  173. {#                    <a class="nav-link" href="#">Actualités</a>#}
  174. {#                </li>#}
  175.                 {#
  176.                 <li class="nav-item">
  177.                     <a class="nav-link" href="{{ path('carrieres') }}">Carrières</a>
  178.                 </li>
  179.                 #}
  181.                 <li id="enveloppe-mobile" class="nav-item">
  182.                     <a class="nav-link" href="{{ path('contact') }}">
  183.                         {#
  184.                         <i class="far fa-envelope"></i>
  185.                         #}
  186.                         Contact
  187.                     </a>
  188.                 </li>
  189.             </ul>
  190.         </div>
  191.         <div class="contacts-social">
  192.             <div class="phone-contact">
  193.                 <div>
  194.                     <svg class="svg-phone" xmlns="http://www.w3.org/2000/svg" width="31.059" height="27.732" viewBox="0 0 31.059 27.732">
  195.                         <g id="np_phone-call_3960627_000000" transform="translate(-6.248 -15.626)">
  196.                             <path id="Tracé_116" data-name="Tracé 116" d="M32.871,43.356H33.98V41.138h3.328V38.919H33.98V34.793l-7.931-2.64-2.973,1.986a19.764,19.764,0,0,1-7.488-7.421l1.9-1.9-2.64-9.2h-8.6v1.109A26.511,26.511,0,0,0,32.871,43.357ZM13.182,17.844l1.808,6.334L12.9,26.307l.377.721a22,22,0,0,0,9.406,9.384l.588.3,3.161-2.119,5.324,1.8v4.748A24.461,24.461,0,0,1,8.467,17.844Z" fill="#5f5f5f" stroke="#5f5f5f" />
  197.                         </g>
  198.                     </svg>
  199.                 </div>
  200.                 <div>
  201.                     <p class="phone">
  202.                         {#
  203.                         Besoin d'informations ? <br>
  204.                         #}
  205.                         <a href="tel:+3522658601">(+352) 26 58 60-1</a>
  206.                     </p>
  207.                 </div>
  208.             </div>
  210.             <div class="socials">
  211.                 <a target="_blank" href="https://www.facebook.com/tracolimmobilier/">
  212.                     <i class="fab fa-facebook-f fa-2x"></i>
  213.                 </a>
  214.                 <a target="_blank" href="https://www.linkedin.com/company/tracol-immobilier-s-a-/">
  215.                     <i class="fab fa-linkedin fa-2x"></i>
  216.                 </a>
  217.                 <a target="_blank" href="https://www.instagram.com/tracolimmobilier/">
  218.                     <i class="fab fa-instagram fa-2x"></i>
  219.                 </a>
  220.                 <a target="_blank" href="https://www.youtube.com/channel/UCLl8G5ZCdyslVR_4ANkD6GA">
  221.                     <i class="fab fa-youtube fa-2x"></i>
  222.                 </a>
  223.             </div>
  224.         </div>
  226.         <div id="footer-nav-mobile" style="display: none">
  227.                 <div>
  228.                     <a href="tel:+3522658601">
  229.                         <svg style="margin: auto;" class="svg-phone" xmlns="http://www.w3.org/2000/svg" width="31.059" height="27.732" viewBox="0 0 31.059 27.732">
  230.                             <g id="np_phone-call_3960627_000000" transform="translate(-6.248 -15.626)">
  231.                                 <path id="Tracé_116" data-name="Tracé 116" d="M32.871,43.356H33.98V41.138h3.328V38.919H33.98V34.793l-7.931-2.64-2.973,1.986a19.764,19.764,0,0,1-7.488-7.421l1.9-1.9-2.64-9.2h-8.6v1.109A26.511,26.511,0,0,0,32.871,43.357ZM13.182,17.844l1.808,6.334L12.9,26.307l.377.721a22,22,0,0,0,9.406,9.384l.588.3,3.161-2.119,5.324,1.8v4.748A24.461,24.461,0,0,1,8.467,17.844Z" fill="#5f5f5f" stroke="#5f5f5f" />
  232.                             </g>
  233.                         </svg>
  234.                     </a>
  235.                 </div>
  236.                 <div>
  237.                     <a href="{{ path('contact') }}"><i style="color: #5f5f5f;" class="far fa-envelope fa-2x"></i></a>
  238.                 </div>
  239.                 <div>
  240.                     <a target="_blank" href="https://www.facebook.com/tracolimmobilier/"><i style="color: #5f5f5f;" class="fab fa-facebook-f"></i></a>
  241.                 </div>
  242.                 <div>
  243.                     <a target="_blank" href="https://www.linkedin.com/company/tracol-immobilier-s-a-/"><i style="color: #5f5f5f;" class="fab fa-linkedin"></i></a>
  244.                 </div>
  245.                 <div>
  246.                     <a target="_blank" href="https://www.instagram.com/tracolimmobilier/"><i style="color: #5f5f5f;" class="fab fa-instagram"></i></a>
  247.                 </div>
  248.                 <div>
  249.                     <a target="_blank" href="https://www.youtube.com/channel/UCLl8G5ZCdyslVR_4ANkD6GA"><i style="color: #5f5f5f;" class="fab fa-youtube fa-2x"></i></a>
  250.                 </div>
  251.         </div>
  252.     </div>
  253. </nav>
  254. {% include '_navSubSearch.html.twig' %}
  256. {% block body %}
  257. {% endblock %}
  259. {% if app.request.attributes.get('_route') == 'home' %}
  260.     <div id="div-newsletter-mobile" class="" style="display: none">
  261.         <div class="col-lg-12" style="display: flex; justify-content:center; margin-top: 20px;">
  262.            <div class="col-lg-12">
  263.                <p class="newsletter-title">NEWSLETTER</p>
  264.            </div>
  265.         </div>
  266.         <div class="col-lg-12" id="div-form-newsletter" style="display: flex; justify-content: space-around;">
  267.             <form method="post" action="{{ path('mailchimp') }}" id="form-newsletter">
  268.                 <div class="input-group">
  269.                     <input class="form-control input-email" type="email" name="email" placeholder="Votre adresse mail">
  270.                     <button class="btn btn-primary button-newsletter" type="submit"><i class="fas fa-arrow-right"></i></button>
  271.                 </div>
  272.             </form>
  273.         </div>
  274.     </div>
  275. {% endif %}
  276. {% set mentions = content('Footer', 'Footer') %}
  277. {% set cgu = content('Footer', 'Footer2') %}
  278. {% set confidentialite = content('Footer', 'Footer3') %}
  279. {% set cookie = content('Footer', 'Footer4') %}
  280. {% set adress = content('Footer', 'Footer adresse') %}
  281. {% set siege = content('Footer', 'Footer siège') %}
  282. <footer class="footer">
  283.     <div class="container-fluid">
  284.         <ul id="footer-menu" class="footer-menu" style="margin-bottom: -15px;margin-top: -15px;">
  285.             <li>
  286.                 © {{ 'now'|date('Y') }} TRACOL - réalisé par <a href="https://www.idp.lu/" target="_blank" style="font-weight:bold">ID+P</a>
  287.             </li>
  288.             <li style="height: 130px">
  289.                 <!--?xml version="1.0" encoding="UTF-8"?-->
  290.                 <svg id="SVGDoc" width="201" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:avocode="https://avocode.com/" viewBox="0 0 201 232"><defs></defs><desc>Generated with Avocode.</desc><g><g><title>Ligne 38</title><path d="M100.5,100v32" fill-opacity="0" fill="#ffffff" stroke-dashoffset="0" stroke-linejoin="miter" stroke-linecap="butt" stroke-opacity="1" stroke="#5f5f5f" stroke-miterlimit="20" stroke-width="10"></path></g></g></svg>
  291.             </li>
  292.             <li class="row col-md-3">
  293.                 <div class="col-md-6">
  294.                     Bureaux commerciaux :<br/>
  295.                     {{ adress.content|raw }}
  296.                 </div>
  297.                 <div class="col-md-6">
  298.                     Siège social : 
  299.                     {{ siege.content|raw }}
  300.                 </div>
  301.             </li>
  302.             <li style="height: 130px">
  303.                 <!--?xml version="1.0" encoding="UTF-8"?-->
  304.                 <svg id="SVGDoc" width="201" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:avocode="https://avocode.com/" viewBox="0 0 201 232"><defs></defs><desc>Generated with Avocode.</desc><g><g><title>Ligne 38</title><path d="M100.5,100v32" fill-opacity="0" fill="#ffffff" stroke-dashoffset="0" stroke-linejoin="miter" stroke-linecap="butt" stroke-opacity="1" stroke="#5f5f5f" stroke-miterlimit="20" stroke-width="10"></path></g></g></svg>
  305.             </li>
  306.             <li class="grey col-md-2 d-flex justify-content-around social">
  307.                 <a target="_blank" href="https://www.facebook.com/tracolimmobilier/"><i class="fab fa-facebook-f fa-2x" style="margin-top:0"></i></a>
  308.                 <a target="_blank" href="https://www.linkedin.com/company/tracol-immobilier-s-a-/"><i class="fab fa-linkedin fa-2x" style="margin-top:0"></i></a>
  309.                 <a target="_blank" href="https://www.instagram.com/tracolimmobilier/"><i class="fab fa-instagram fa-2x" style="cmargin-top:0"></i></a>
  310.                 <a target="_blank" href="https://www.youtube.com/channel/UCLl8G5ZCdyslVR_4ANkD6GA" class="d-flex align-items-end align-items-center"><i class="fab fa-youtube fa-2x"></i></a>
  311.                 <a href="{{ path('contact') }}" class="contact-link"><i class="fa fa-envelope fa-2x"></i></a>
  312.             </li>
  313.             <li class="legal d-flex align-items-center">
  314.                 <div class="d-flex flex-column">
  315.                     <a href="{{ path('mentions') }}" style="margin-bottom:6px;">{{ mentions.name }}</a>
  316.                     <a href="{{ path('cgu') }}" style="margin-bottom:6px">{{ cgu.name }}</a>
  317.                     <a href="{{ path('privacy_policy') }}" style="margin-bottom:6px">{{ confidentialite.name }}</a>
  318.                     <a href="{{ path('cookies') }}" style="margin-bottom:15px">{{ cookie.name }}</a>
  319.                 </div>
  321.             </li>
  322.         </ul>
  324.         <ul id="footer-menu-mobile" class="footer-menu" style="display:none; margin-bottom: -15px;margin-top: -15px;">
  325.             <li class="legal d-flex align-items-center flex-column mt-3">
  326.                 <a href="{{ path('contact') }}" class="grey contact-link mr-0" style="margin-right:0!important;"><i class="fa fa-envelope fa-2x"></i></a>
  327.                 <div class="d-flex flex-column align-items-center">
  328.                     <a href="{{ path('mentions') }}" style="margin-bottom:6px;">{{ mentions.name }}</a>
  329.                     <a href="{{ path('cgu') }}" style="margin-bottom:6px">{{ cgu.name }}</a>
  330.                     <a href="{{ path('privacy_policy') }}" style="margin-bottom:6px">{{ confidentialite.name }}</a>
  331.                     <a href="{{ path('cookies') }}" style="margin-bottom:15px">{{ cookie.name }}</a>
  332.                 </div>
  333.             </li>
  334.             <li>
  335.                 <div>
  336.                     Bureaux commerciaux :<br/>
  337.                     {{ adress.content|raw }}
  338.                 </div>
  339.             </li>
  340.             <li>
  341.                 <div>
  342.                     Siège social : <br />
  343.                     {{ siege.content|raw }}
  344.                 </div>
  345.             </li>
  346.             <li>
  347.                 © 2021 TRACOL - réalisé par <a href="https://www.idp.lu/" target="_blank" style="font-weight:bold">ID+P</a>
  348.             </li>
  349.         </ul>
  350.     </div>
  351. </footer>
  353. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  355. <script>
  356.     if (window.matchMedia("(max-width: 768px)").matches && window.location.pathname === '/') {
  357.         /* the viewport is less than 768 pixels wide */
  358.     //      $('#projects').slick({
  359.     //     dots: false,
  360.     //     infinite: true,
  361.     //     speed: 300,
  362.     //     slidesToShow: 1,
  363.     //     slidesToScroll: 1,
  364.     //     autoplay: true,
  365.     //     responsive: [
  366.     //         {
  367.     //             breakpoint: 576,
  368.     //             settings: {
  369.     //                 slidesToShow: 1,
  370.     //                 slidesToScroll: 1
  371.     //             }
  372.     //         }
  373.     //         // You can unslick at a given breakpoint now by adding:
  374.     //         // settings: "unslick"
  375.     //         // instead of a settings object
  376.     //     ]
  377.     // });
  378.     }
  379.     //
  380.     // const searchMobile = document.getElementById('search-detail-mobile')
  381.     // const searchSubDivMobile = document.getElementById('sub-search-div-mobile')
  382.     //
  383.     // searchMobile.addEventListener('click', function (e) {
  384.     //     e.preventDefault()
  385.     //     searchSubDivMobile.style.display = 'flex'
  386.     //     searchMobile.style.display = 'none'
  387.     // })
  388. </script>
  390. <script>
  392.     if (document.getElementById('filterProperties')) {
  393.         let formSelectProperties = document.getElementById('filterProperties');
  395.         let properties = document.querySelectorAll('#properties .div-img-hover-2');
  396.         let arrayProperties = [];
  397.         for (let property of properties) {
  398.             arrayProperties.push({
  399.                 'property': property,
  400.                 'price': property.getAttribute('data-price'),
  401.                 'date': new Date(property.getAttribute('data-date')),
  402.             });
  403.         }
  405.         formSelectProperties.addEventListener('change', () => {
  406.             if (formSelectProperties.value === 'desc') {
  407.                 arrayProperties.sort((a,b) =>  b.price - a.price )
  408.             } else if (formSelectProperties.value === 'asc') {
  409.                 arrayProperties.sort((a,b) =>  a.price - b.price )
  410.             } else if (formSelectProperties.value === 'date') {
  411.                 arrayProperties.sort((a,b) =>  b.date - a.date )
  412.             }
  414.             let finalProperties = [];
  415.             let containerProperties = document.getElementById('properties');
  416.             containerProperties.innerHTML = '';
  418.             for (let prop of arrayProperties) {
  419.                 containerProperties.insertAdjacentElement('beforeend', prop.property)
  420.             }
  421.         });
  422.     }
  425.     // let searchglobal = document.getElementById('submit-searchglobal');
  426.         // searchglobal.addEventListener('click', function() {
  427.         //     const formSearch = document.getElementById('form-searchglobal-normal')
  428.         //     const subSearch = document.getElementById('sub-searchglobal-div')
  429.         //     const send = document.getElementById('sendGlobal')
  430.         //             formSearch.classList.toggle('stickyYForm')
  431.         //             send.classList.toggle('send-display')
  432.         //             subSearch.classList.toggle('sub-searchglobal-div-height')
  433.         // })
  434. </script>
  436. <script>
  437.     const swiper = new Swiper('.swiper', {
  439.         loop: false,
  440.     });
  442.     if (window.location.pathname === '/') {
  443.         const navbar = document.getElementsByClassName('navbar navbar-expand-xl fixed-top')
  444.         const header = document.getElementsByClassName('header-home')
  445.         navbar[0].style.backgroundColor = "#fff"
  446.         navbar[0].style.position = "fixed"
  447.         header[0].style.marginTop = "0px"
  448.         header[0].style.height = "100vw"
  449.     }
  451.     let widthWindow = window.innerWidth;
  453.     var searchLocation;
  454.     if (widthWindow > 770) {
  455.         searchLocation = document.getElementById('location-drop');
  456.     } else {
  457.         searchLocation = document.getElementById('location-drop-mobile');
  458.     }
  461.     var searchLocationLi;
  462.     if (widthWindow > 770) {
  463.         searchLocationLi = document.getElementById('location-li');
  464.     } else {
  465.         searchLocationLi = document.getElementById('location-li-mobile');
  466.     }
  468.     const url = '/form/search';
  470.     fetch(url, {
  471.         method: 'GET',
  472.         // body: JSON.stringify({
  473.         //     searchLocation: this.value
  474.         // })
  475.     }).then(function(response) {
  476.         return response.json()
  477.     }).then(function (data) {
  478.         searchLocationLi.innerHTML = '';
  479.         var selected = "Tous";
  480.         {% if app.session.get('filter') is defined and app.session.get('filter')['location'] is defined and app.session.get('filter')['location'] != 'Tous' %} selected = '{{ app.session.get('filter')['location'] }}'; {% endif %}
  481.         for (const datum in data) {
  482.             const li = document.createElement('li')
  483.             li.classList.add('item')
  484.             if(selected == data[datum]) li.classList.add('selected')
  486.             li.dataset.value = data[datum]
  487.             li.addEventListener('click', function () {
  488.                 searchLocation.value = this.dataset.itemName
  489.             })
  490.             li.innerHTML += data[datum]
  491.             searchLocationLi.appendChild(li)
  493.             li.addEventListener('click', event => {
  494.                 li.classList.add('selected');
  495.             });
  496.         }
  498.     searchLocation.addEventListener("click", function (){
  500.             searchLocationLi.addEventListener('click', function (e) {
  501.                 let target = e.target;
  502.                 var dropId;
  503.                 if (widthWindow > 770) {
  504.                     dropId = document.getElementById('location-drop');
  505.                 } else {
  506.                     dropId = document.getElementById('location-drop-mobile');
  507.                 }
  509.                 dropId.querySelector('.undroped-subheader').innerHTML = target.innerHTML
  510.                 dropId.querySelector('.input-subheader').value = target.dataset.value
  511.                 dropId.classList.remove('open')
  512.                 dropId.querySelector('.undroped').style.display = 'block'
  513.                 dropId.querySelector('.droped').style.display = 'none'
  514.                 dropId.querySelector('.undroped-subheader').classList.add('selected')
  515.             })
  516.         });
  517.     })
  519.     const searchTransactionLi = document.getElementById('transaction-li');
  520.     const searchPropertyLi = document.getElementById('property-li');
  521.     const searchRoomLi = document.getElementById('rooms-li');
  522.     const searchAreaLi = document.getElementById('area-li');
  524.     searchTransactionLi.addEventListener('click', function (e) {
  525.         let target = e.target;
  526.         const dropId = document.getElementById('transaction-drop')
  527.         dropId.querySelector('.input-subheader').value = target.dataset.value
  528.     });
  530.     searchPropertyLi.addEventListener('click', function (e) {
  531.         let target = e.target;
  532.         const dropId = document.getElementById('property-drop')
  533.         dropId.querySelector('.input-subheader').value = target.dataset.value
  534.     });
  536.     searchRoomLi.addEventListener('click', function (e) {
  537.         let target = e.target;
  538.         const dropId = document.getElementById('rooms-drop');
  539.         dropId.querySelector('.input-subheader').value = target.dataset.value
  540.     });
  542.     searchAreaLi.addEventListener('click', function (e) {
  543.         let target = e.target;
  544.         const dropId = document.getElementById('area-drop')
  545.         dropId.querySelector('.input-subheader').value = target.dataset.value
  546.     });
  548.     for (const eElement of document.getElementsByClassName('projectButton')) {
  549.         eElement.addEventListener('click', function (e) {
  550.             e.preventDefault()
  552.             for (let button of document.getElementsByClassName('projectButton')) {
  553.                 if (button.classList.contains('all')){
  554.                     button.classList.remove('all')
  555.                     button.classList.add('come')
  556.                     button.querySelector('span').classList.replace('span-all', 'span-projects')
  557.                 }
  558.             }
  560.             eElement.classList.remove('come')
  561.             eElement.classList.add('all')
  562.             eElement.querySelector('span').classList.replace('span-projects', 'span-all')
  564.             fetch('projects/home/display/'+this.dataset.id, {
  565.                 method: 'GET',
  566.             })
  567.                 .then(response => response.json())
  568.                 .then(data => {
  569.                     document.getElementById('projects').innerHTML = ''
  570.                     document.getElementById('projects').innerHTML = data.data
  572.                     if (window.matchMedia("(max-width: 768px)").matches && window.location.pathname === '/') {
  573.                         // if (document.getElementById('projects').classList.contains('slick-initialized')) {
  574.                         //     document.getElementById('projects').classList.remove('slick-initialized')
  575.                         //     document.getElementById('projects').classList.remove('slick-slider')
  576.                         // }
  577.                         // $('#projects').slick({
  578.                         //     dots: false,
  579.                         //     infinite: true,
  580.                         //     speed: 300,
  581.                         //     slidesToShow: 1,
  582.                         //     slidesToScroll: 1,
  583.                         //     autoplay: true,
  584.                         //     responsive: [
  585.                         //         {
  586.                         //             breakpoint: 576,
  587.                         //             settings: {
  588.                         //                 slidesToShow: 1,
  589.                         //                 slidesToScroll: 1
  590.                         //             }
  591.                         //         }
  592.                         //     ]
  593.                         // })
  594.                     }
  596.                     _ww = $(window).width();
  597.                     if (_ww > 768){
  598.                         $('.div-img-hover-2').hover(function (e) {
  600.                             $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  601.                             var htext = $(this).find('.project-content').height();
  602.                             if (htext == undefined){htext = 0};
  603.                             $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  604.                             $(this).find('.project-content').css({'visibility': 'visible'});
  605.                             $(this).find('.project-content').animate({opacity: 1}, 150);
  607.                         }, function() {
  608.                             $(this).find('.div-hover-2').animate({height : 85}, 150);
  609.                             $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  611.                             $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  612.                                 $(this).find('.project-content').css({'visibility': 'hidden'});
  613.                             });
  614.                         });
  615.                     } else {
  616.                         $('.div-img-hover-2').on( "click", function( event ) {
  617.                             var opened = $(this).find('.div-hover-2').hasClass('open'),
  618.                                 ht = opened ? 85 : '100%',
  619.                                 vis = opened ? 0 : 1;
  620.                             $(this).find('.div-hover-2').toggleClass('open');
  621.                             $(this).find('.div-hover-2').animate({height : ht}, 150);
  622.                             $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  623.                             $(this).find('.project-content').animate({opacity: 1}, 150);
  625.                         });
  626.                     }
  627.                     $('.div-hover').hover(function (e) {
  628.                         $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  629.                     }, function() {
  630.                         $(this).find('.project-arrow-2').animate({opacity: 0}, 50);
  631.                     });
  633.                     $('.div-hover').hover(function (e) {
  634.                         $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  635.                         var htext = $(this).find('.project-content').height();
  636.                         if (htext == undefined){htext = 0};
  637.                         $(this).animate({height : htext+180}, 150);
  638.                         $(this).find('.project-content').css({'visibility': 'visible'});
  639.                         $(this).find('.project-content').animate({opacity: 1}, 150);
  640.                     }, function() {
  641.                         $(this).find('.project-arrow-2').animate({opacity: 0}, 50);
  642.                         $(this).animate({height : 70}, 150);
  643.                         $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  644.                             $(this).find('.project-content').css({'visibility': 'hidden'});
  645.                         });
  646.                     });
  647.                 })
  649.                 .catch((error) => {
  650.                     console.error('Error:', error);
  651.                 });
  652.         })
  653.     }
  655.     for (const eElement of document.getElementsByClassName('projectButtonref')) {
  656.         eElement.addEventListener('click', function (e) {
  657.             e.preventDefault()
  659.             for (let button of document.getElementsByClassName('projectButtonref')) {
  660.                 if (button.classList.contains('all')){
  661.                     button.classList.remove('all')
  662.                     button.classList.add('come')
  663.                     button.querySelector('span').classList.replace('span-all', 'span-projects')
  664.                 }
  665.             }
  667.             eElement.classList.remove('come')
  668.             eElement.classList.add('all')
  669.             eElement.querySelector('span').classList.replace('span-projects', 'span-all')
  671.             fetch('reference/home/display/'+this.dataset.id, {
  672.                 method: 'GET',
  673.             })
  674.                 .then(response => response.json())
  675.                 .then(data => {
  676.                     document.getElementById('references-home').innerHTML = ''
  677.                     document.getElementById('references-home').innerHTML = data.data
  679.                     _ww = $(window).width();
  680.                     var lightbox = $('.lightbox'),
  681.                         item = 0;
  683.                     $('.lightbox-on').click(function(e){
  684.                         e.stopPropagation();
  685.                         item = 0;
  687.                         var id = $(this).attr('data-id'),
  688.                             max = 0;
  689.                         $('#'+id).toggle();
  690.                         $('#'+id).animate({opacity: 1}, 300);
  691.                         $('#'+id).find('img').each(function( i ) {
  692.                             max = i;
  693.                             item = 1;
  694.                             counter(item, max+1);
  695.                             itemWidth($(this));
  696.                         });
  697.                     });
  699.                     lightbox.click(function(e) {
  700.                         e.stopPropagation();
  701.                         $(this).animate({opacity: 0}, 300, function(){
  702.                             $(this).toggle();
  703.                         });
  704.                     });
  706.                     $('.closer').on('click', function (e) {
  707.                         e.stopPropagation();
  708.                         $(this).parent().animate(
  709.                             {opacity: 0},
  710.                             300,
  711.                             function(){
  712.                                 $(this).toggle();
  713.                             }
  714.                         );
  715.                     });
  717.                     function itemWidth(img){
  718.                         img.closest('.items').width(img.width());
  719.                     }
  721.                     function counter(item, max){
  722.                         $('.counter').text(item + ' / ' + max);
  723.                     }
  725.                     $('.item', lightbox).on('click, swipeleft', function (e) {
  726.                         var wd = $(this).width(),
  727.                             last = $(this).parent().find('.item').last(),
  728.                             img = $(this).find('.img');
  729.                         itemWidth(img);
  731.                         $(this).animate(
  732.                             {marginLeft: -wd, opacity: 0},
  733.                             500,
  734.                             'swing',
  735.                             function(){
  736.                                 $(this).insertAfter(last);
  737.                                 $(this).css({marginLeft: 0, opacity: 1});
  738.                             }
  739.                         );
  740.                     });
  742.                     $('.item', lightbox).on('swiperight', function (e) {
  743.                         var wd = $(this).width(),
  744.                             first = $(this).parent().find('.item').first(),
  745.                             last = $(this).parent().find('.item').last(),
  746.                             img = $(this).find('.img');
  747.                         itemWidth(img);
  749.                         $(last).insertBefore($(this));
  750.                         $(last).css({marginLeft: -wd, opacity: 0});
  751.                         $(this).parent().find('.item').eq(0).animate(
  752.                             {marginLeft: 0, opacity: 1},
  753.                             500,
  754.                             'swing'
  755.                         );
  756.                     });
  758.                     $('.arrows', lightbox).on('click', function (e) {
  759.                         e.stopPropagation();
  761.                         var wd = $(this).siblings('.items').find('.item').eq(0).width(),
  762.                             max = $(this).siblings('.items').find('.item').length,
  763.                             first = $(this).siblings('.items').find('.item').first(),
  764.                             last = $(this).siblings('.items').find('.item').last(),
  765.                             isRight = $(this).hasClass('right'),
  766.                             marginL = isRight ? -wd : 0,
  767.                             marginL0 = isRight ? 0: -wd,
  768.                             opacOn = isRight ? 1 : 0,
  769.                             opacOff = isRight ? 0 : 1;
  771.                         if (!isRight){
  772.                             $(last).insertBefore(first);
  773.                             $(last).css({marginLeft: -wd, opacity: 0});
  774.                             item++;
  775.                             if (item == max+1) {item = 1};
  776.                         } else {
  777.                             item--;
  778.                             if (item == 0) {item = max};
  779.                         };
  781.                         counter(item, max);
  783.                         var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
  784.                         itemWidth(img);
  786.                         $(this).siblings('.items').find('.item').eq(1).animate(
  787.                             {opacity: opacOn},
  788.                             500,
  789.                             'swing');
  791.                         $(this).siblings('.items').find('.item').eq(0).animate(
  792.                             {marginLeft: marginL, opacity: 1},
  793.                             500,
  794.                             'swing',
  795.                             function(){
  796.                                 if (isRight){
  797.                                     $(this).insertAfter(last);
  798.                                     $(this).css({ marginLeft: 0, opacity: 1});
  799.                                 }
  800.                             }
  801.                         );
  802.                     });
  804.                     if (_ww > 768){
  805.                         $('.div-img-hover-2').hover(function (e) {
  806.                             $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  807.                             var htext = $(this).find('.project-content').height();
  808.                             if (htext == undefined){htext = 0};
  809.                             $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  810.                             $(this).find('.project-content').css({'visibility': 'visible'});
  811.                             $(this).find('.project-content').animate({opacity: 1}, 150);
  812.                         }, function() {
  813.                             $(this).find('.div-hover-2').animate({height : 85}, 150);
  814.                             $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  816.                             $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  817.                                 $(this).find('.project-content').css({'visibility': 'hidden'});
  818.                             });
  819.                         });
  821.                     } else {
  822.                         $('.div-img-hover-2').on( "tap", function( event ) {
  823.                             var opened = $(this).find('.div-hover-2').hasClass('open'),
  824.                                 ht = opened ? 85 : '100%',
  825.                                 vis = opened ? 0 : 1;
  826.                             $(this).find('.div-hover-2').toggleClass('open');
  827.                             $(this).find('.div-hover-2').animate({height : ht}, 150);
  828.                             $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  829.                         });
  830.                     }
  831.                 })
  832.                 .catch((error) => {
  833.                     console.error('Error:', error);
  834.                 });
  835.         })
  836.     }
  838.     /*
  839.     window.addEventListener('scroll', function(){
  840.         let search = document.getElementById('submit-search');
  841.         const formSearch = document.getElementById('form-search-normal')
  842.         const subSearch = document.getElementById('sub-search-div')
  843.         const send = document.getElementById('send')
  844.         if (search) {
  845.             search.classList.toggle("stickyY", window.scrollY > 730);
  846.             if (search.classList.contains("stickyY")) {
  847.                 search.setAttribute('type', 'button')
  848.                 search.addEventListener('click', function (e) {
  849.                     e.preventDefault()
  850.                     formSearch.classList.toggle('stickyYForm')
  851.                     send.classList.toggle('send-display')
  852.                     subSearch.classList.toggle('sub-search-div-height')
  853.                 })
  854.             } else  search.setAttribute('type', 'submit')
  855.         }
  856.     })
  857. */
  858. </script>
  860. {#
  861. <script>
  862.     var _dropin = $('.dropdown'),
  863.         _delay = 150,
  864.         _ww = $(window).width();
  866.     $('.undroped', _dropin).on('click', function (e) {
  867.         console.log('CLICKKKK 1')
  868.         $('.dropdown-header').closest('.droped').removeClass('open');
  869.         $('.dropdown-header').closest('.dropdown').find('.undroped').show();
  870.         $('.dropdown-header').closest('.droped').hide();
  871.         $('.dropdown-header').closest('.droped').find('.items').animate({height: 0});
  874.         $(this).hide();
  875.         $(this).siblings('.droped').find('.items').height('auto');
  876.         $(this).siblings('.droped').show();
  878.         var ht = $(this).siblings('.droped').find('.items').height();
  879.         $(this).attr('data-ht', ht);
  880.         $(this).siblings('.droped').find('.items').height(0);
  881.         $(this).siblings('.droped').addClass('open');
  882.         $(this).siblings('.droped').find('.items').animate({height: ht + 40}, _delay);
  883.     });
  885.     $('.dropdown-header', _dropin).on('click', function (e) {
  886.         var ht = $(this).closest('.dropdown').find('.undroped').attr('data-ht');
  888.         $(this).closest('.droped').removeClass('open');
  889.         $(this).closest('.droped').find('.items').animate({height: 0}, _delay, function () {
  890.             $(this).closest('.dropdown').find('.undroped').show();
  891.             $(this).closest('.droped').hide();
  893.         });
  894.     });
  896.     const searchLocationm = document.getElementById('location-drop-mobile');
  897.     const searchLocationLim = document.getElementById('location-li-mobile');
  898.     const urlm = '/form/search';
  900.     searchLocationm.addEventListener("click", function (){
  901.         fetch(urlm, {
  902.             method: 'GET',
  903.             // body: JSON.stringify({
  904.             //     searchLocation: this.value
  905.             // })
  906.         }).then(function(response) {
  907.             return response.json()
  908.         }).then(function (data) {
  909.             searchLocationLim.innerHTML = '';
  910.             for (const datum in data) {
  911.                 const li = document.createElement('li')
  912.                 li.classList.add('item')
  914.                 li.dataset.value = data[datum]
  915.                 li.addEventListener('click', function () {
  916.                     searchLocationm.value = this.dataset.itemName
  917.                 })
  918.                 li.innerHTML += data[datum]
  919.                 searchLocationLim.appendChild(li)
  921.                 li.addEventListener('click', event => {
  922.                     li.classList.add('selected');
  923.                 });
  924.             }
  925.             searchLocationLim.addEventListener('click', function (e) {
  926.                 searchLocationLim.req
  927.                 let target = e.target;
  928.                 const dropId = document.getElementById('location-drop-mobile')
  929.                 dropId.querySelector('.undroped-subheader').innerHTML = target.innerHTML
  930.                 dropId.querySelector('.input-subheader').value = target.dataset.value
  931.                 dropId.classList.remove('open')
  932.                 dropId.querySelector('.undroped').style.display = 'block'
  933.                 dropId.querySelector('.droped').style.display = 'none'
  934.                 dropId.querySelector('.undroped-subheader').classList.add('selected')
  935.             })
  936.         });
  937.     })
  939.     if (window.location.href.includes('action=postule')) {
  940.         let select = document.getElementById('contact_form_object');
  941.         let options = select.childNodes;
  942.         let optionPostule = options[1];
  943.         optionPostule.setAttribute('selected', '')
  944.         console.log(optionPostule)
  945.     }
  946.     /* the viewport is less than 768 pixels wide */
  947.     //      $('#projects').slick({
  948.     //     dots: false,
  949.     //     infinite: true,
  950.     //     speed: 300,
  951.     //     slidesToShow: 1,
  952.     //     slidesToScroll: 1,
  953.     //     autoplay: true,
  954.     //     responsive: [
  955.     //         {
  956.     //             breakpoint: 576,
  957.     //             settings: {
  958.     //                 slidesToShow: 1,
  959.     //                 slidesToScroll: 1
  960.     //             }
  961.     //         }
  962.     //         // You can unslick at a given breakpoint now by adding:
  963.     //         // settings: "unslick"
  964.     //         // instead of a settings object
  965.     //     ]
  966.     // });
  968.     //
  969.     // const searchMobile = document.getElementById('search-detail-mobile')
  970.     // const searchSubDivMobile = document.getElementById('sub-search-div-mobile')
  971.     //
  972.     // searchMobile.addEventListener('click', function (e) {
  973.     //     e.preventDefault()
  974.     //     searchSubDivMobile.style.display = 'flex'
  975.     //     searchMobile.style.display = 'none'
  976.     // })
  977. </script>
  978. #}
  979. </body>
  980. </html>