templates/page/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% import 'macro/user.html.twig' as user_macro %}
  4. {% block stylesheets %}
  5.     <style>
  6.         .rounded-right {
  7.             border-top-right-radius: 3em;
  8.             border-bottom-right-radius: 3em;
  9.         }
  11.         .whysection h3 {
  12.             font-size: 1.75rem;
  13.             font-weight: bolder;
  14.         }
  16.         .whysection p {
  17.             font-size: 1.2rem;
  18.             line-height: 1.9rem;
  19.             text-align: justify;
  20.         }
  22.         th {
  23.             max-width: 50%;
  24.             width: 50%;
  25.             color: #979797;
  26.         }
  28.         td {
  29.             font-weight: bold;
  30.             color: #000;
  31.         }
  33.         table {
  34.             width: 100%;
  35.         }
  37.         .news-link:visited {
  38.             color: #98a2ea;
  39.         }
  41.         .accordion-header.accordion-white {
  42.             background: #f0faf8;
  43.             color: #000000;
  44.             border: none;
  45.         }
  47.         /*----------------- MODAL ------------------- */
  48.         .modal {
  49.             z-index: 99999;
  50.             max-width: 700px;
  51.             width: 35%;
  52.             position: fixed;
  53.             top: 64%;
  54.             left: 18%;
  55.             transform: translate(-50%, -50%);
  56.             border-radius: 40px;
  57.             background: #f0faf8;
  58.             display: none;
  59.             visibility: hidden;
  60.             opacity: 0;
  61.             transition: visibility 0s, opacity 1s linear;
  62.             box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  63.         }
  66.         .modal.show {
  67.             display: block;
  68.             visibility: visible;
  69.             opacity: 1;
  71.         }
  73.         #close {
  74.             cursor: pointer;
  75.             color: white;
  76.             position: absolute;
  77.             top: -5px;
  78.             font-size: 25px;
  79.             right: -7px;
  80.             padding: 1rem;
  81.             margin-right: 10px;
  82.         }
  84.         .n-page-left-side {
  85.             padding-left: 50px;
  86.             padding-right: 50px;
  87.             margin-bottom: 118px;
  88.         }
  90.         .welcome-text {
  91.             text-align: left;
  92.         }
  94.         .welcome-text h3 {
  95.             font-size: 19px;
  96.         }
  99.         /*.modal__title{font-size: 2.5rem;}
  100.         .modal__title span{display: block;font-weight: 400;}
  101.         .modal__paragraph{font-size: 16px;font-weight: 400;}
  102.         .modal__button{
  103.             background-color:#0a9396;
  104.             border:none;
  105.             color: white;
  106.             padding: 1rem 2rem;
  107.             border-radius:5px;
  108.             box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
  109.             transition: 0.3s background-color ease-in-out;
  110.         }
  111.         .modal__button:hover{background-color:#0a9372;}
  112.         main{text-align: center;}
  113.         .modal__container{
  114.             padding: 1rem 2rem;
  115.             display: flex;
  116.             flex-direction: column;
  117.             justify-content: center;
  118.             align-items: center;
  119.             position: relative;
  120.         }*/
  122.         @media only screen and (min-width: 768px) {
  123.             .modal__container {
  124.                 flex-direction: row;
  125.                 text-align: left;
  126.             }
  128.             .modal__img {
  129.                 max-width: 50%
  130.             }
  131.         }
  133.         @media only screen and (max-width: 500px) {
  134.             .modal__title {
  135.                 font-size: 2rem;
  136.             }
  138.             .modal__img {
  139.                 max-width: 80%
  140.             }
  141.         }
  143.         .welcome-text {
  144.             margin-bottom: 7px;
  145.         }
  147.         #modal .submit-field {
  148.             margin-bottom: 0;
  149.         }
  152.         .n-page-left-side {
  153.             padding-top: 47px;
  154.             padding-left: 25px;
  155.             padding-right: 25px;
  156.             margin-bottom: 118px;
  157.         }
  159.         .welcome-text {
  160.             text-align: left;
  161.             margin-bottom: 5px !important;
  162.         }
  164.         .welcome-text h3 {
  165.             font-size: 19px;
  166.         }
  168.         @media only screen and (min-width: 768px) {
  169.             .modal__container {
  170.                 flex-direction: row;
  171.                 text-align: left;
  172.             }
  174.             .modal__img {
  175.                 max-width: 50%
  176.             }
  177.         }
  179.         @media only screen and (max-width: 500px) {
  180.             .modal__title {
  181.                 font-size: 2rem;
  182.             }
  184.             .modal__img {
  185.                 max-width: 80%
  186.             }
  187.         }
  189.         .welcome-text {
  190.             margin-bottom: 7px;
  191.         }
  193.         #modal .submit-field {
  194.             margin-bottom: 0;
  195.         }
  197.         .uploadButton .uploadButton-file-name {
  198.             overflow: inherit;
  199.             min-height: inherit;
  200.         }
  202.         .uploadButton {
  203.             margin-bottom: inherit;
  204.         }
  207.         /* ------- ALLIN -------- */
  208.         .compact-list-layout .job-listing .job-listing-company-logo {
  209.             max-width: 81px;
  210.         }
  212.         .job-listing .job-listing-company-logo img {
  213.             border-radius: 47px;
  214.         }
  216.         .uploadButton .uploadButton-button {
  217.             background-color: white;
  218.         }
  220.         .h1-title {
  221.             font-size: 40px !important;
  222.         }
  224.         .h3-title {
  225.             font-size: 30px !important;
  226.         }
  228.         @media screen and (max-width: 500px) {
  229.             .h1-title {
  230.                 font-size: 30px !important;
  231.             }
  233.             .h3-title {
  234.                 font-size: 21px !important;
  235.                 line-height: 25px !important;
  236.             }
  237.         }
  239.         @media (max-width: 992px) {
  240.             .intro-banner {
  241.                 padding: 29px 0;
  242.             }
  243.         }
  245.         .submit-field {
  246.             margin-bottom: inherit !important;
  247.         }
  248.     </style>
  250.     {# INTRO BANNER #}
  251.     <style>
  252.         .banner-headline {
  253.             max-width: initial;
  254.         }
  256.         .banner-headline .forum_avatar {
  257.             display: inline-block;
  258.             padding: 0px 6px;
  259.             background-color: #00B28E;
  260.             color: white;
  261.             border-radius: 50px;
  262.             font-size: 14px;
  263.         }
  264.     </style>
  265. {% endblock %}
  267. {% block body %}
  269.     <!-- Intro Banner
  270.     ================================================== -->
  271.     <!-- add class "disable-gradient" to enable consistent background overlay -->
  272.     <div class="intro-banner" data-background-image="images/home-background2.jpg">
  273.         <div class="container">
  275.             <!-- Intro Headline -->
  276.             <div class="row" id="intro-headline">
  277.                 <div class="col-md-6">
  278.                     <div class="banner-headline">
  279.                         <span>
  280.                             <h1 class="h1-title"><strong
  281.                                     class="text-blue">Jobs in Dubai, Abu Dhabi and UAE</strong></h1>
  283.                             <h3 class="text-black h3-title">
  284.                                 100% regular jobs and freelance jobs in Dubai and UAE and 100% free for jobseekers.
  285.                             </h3>
  286.                         </span>
  287.                     </div>
  288.                 </div>
  289.                 <div class="col-md-1"></div>
  290.                 <div class="col-md-5">
  291.                     <div class="banner-headline">
  292.                         {% include('forum/layout/recent_post.html.twig') %}
  293.                     </div>
  294.                 </div>
  295.             </div>
  297.             <!-- Search Bar -->
  298.             <div class="row">
  299.                 <div class="col-md-12">
  300.                     <form action="{{ path('mission_search') }}" method="POST" id="formSearch">
  301.                         <div class="intro-banner-search-form margin-top-95">
  303.                             <!-- Search Field -->
  304.                             <div class="intro-search-field">
  305.                                 <label for="intro-keywords" class="field-title ripple-effect">What are you looking
  306.                                     for?</label>
  307.                                 <input id="search" name="search" id="intro-keywords" type="text" style="width: 600px;"
  308.                                        placeholder="Job title or keyword">
  309.                             </div>
  311.                             <!-- Search Field -->
  312.                             <div class="intro-search-field">
  313.                                 <label for="autocomplete-input" class="field-title ripple-effect">Where?</label>
  314.                                 <select id="location" name="location[]" class="selectpicker default" multiple
  315.                                         data-live-search="true">
  316.                                     <option
  317.                                         value="All UAE" selected>
  318.                                         All UAE
  319.                                     </option>
  320.                                     {% for name,region in regions %}
  321.                                         <optgroup label="{{ name }}">
  322.                                             <option value="{{ name }}">
  323.                                                 All
  324.                                                 {{ name }}</option>
  325.                                             {% for department in region %}
  326.                                                 <option
  327.                                                     value="{{ department }}">
  328.                                                     {{ department }}
  329.                                                 </option>
  330.                                             {% endfor %}
  331.                                         </optgroup>
  332.                                     {% endfor %}
  335.                                 </select>
  336.                             </div>
  338.                             <div class="intro-search-field">
  339.                                 <label for="job-type" class="field-title ripple-effect">What type of job?</label>
  340.                                 <select id="job-type" name="category" class="selectpicker default">
  341.                                     <option value="Full-time">Full-time</option>
  342.                                     <option value="Contract">Contract</option>
  343.                                     <option value="Part-time">Part-time</option>
  344.                                     <option value="Internship">Internship</option>
  345.                                 </select>
  346.                             </div>
  348.                             <!-- Button -->
  349.                             <div class="intro-search-button">
  350.                                 {% if is_granted('ROLE_USER') %}
  351.                                     <button class="button ripple-effect"
  352.                                             type="submit">Search
  353.                                     </button>
  354.                                 {% else %}
  355.                                     <a class="button ripple-effect "
  356.                                        href="{{ path('mission_search', {'url_libelle' : "search"}) }}">Search</a>
  357.                                 {% endif %}
  358.                             </div>
  360.                         </div>
  361.                     </form>
  362.                 </div>
  363.             </div>
  364.         </div>
  365.     </div>
  367.     <!-- Features Jobs -->
  368.     {% if not isNotShow %}
  369.         <div class="section  padding-top-45 padding-bottom-45">
  370.             <div class="container">
  371.                 <div class="row">
  372.                     <div class="col-xl-12">
  374.                         <!-- Section Headline -->
  375.                         <div class="section-headline margin-top-0 margin-bottom-35">
  376.                             <h3>Latest offers</h3>
  377.                             <a href="{{ path('mission_search', {'url_libelle' : "search"}) }}"
  378.                                class="headline-link">
  379.                                 All offers
  380.                             </a>
  381.                         </div>
  383.                         <!-- Jobs Container -->
  384.                         <div class="listings-container compact-list-layout margin-top-35">
  385.                             {% for offer in offers|slice(0, 3) %}
  386.                                 <a href="{{ path('public_mission', {slug : offer.slug}) }}"
  387.                                    class=" job-listing with-apply-button">
  388.                                     <div class="job-listing-details">
  389.                                         <div class="job-listing-company-logo">
  390.                                             {% if offer.society %}
  391.                                                 {{ user_macro.societyPhoto(offer.society.user.photo) }}
  392.                                             {% else %}
  393.                                                 <img src="{{ asset('images/company-logo-05.png') }}"
  394.                                                      alt="">
  395.                                             {% endif %}
  396.                                         </div>
  398.                                         <div class="job-listing-description">
  399.                                             <h3 class="job-listing-title"> {{ offer.title }}</h3>
  401.                                             <div class="job-listing-footer">
  402.                                                 <ul>
  403.                                                     <li>
  404.                                                         <i class="icon-material-outline-business"></i>
  405.                                                         {% if offer.society %}
  406.                                                             {{ offer.society.name }}
  407.                                                         {% else %}
  408.                                                             {{ offer.societyExternName }}
  409.                                                         {% endif %}
  410.                                                     </li>
  411.                                                     <li>
  412.                                                         <i class="icon-material-outline-location-on"></i> {{ offer.location }}
  413.                                                     </li>
  414.                                                     <li>
  415.                                                         <i class="icon-material-outline-business-center text-blue"></i>
  416.                                                         {{ offer.getYearRequired }}
  417.                                                     </li>
  418.                                                     <li>
  419.                                                         <i class="icon-line-awesome-money text-blue"></i>
  420.                                                         {{ offer.salaryPeerMonthText }}
  421.                                                     </li>
  422.                                                 </ul>
  423.                                             </div>
  424.                                         </div>
  426.                                         <span class="button">Apply</span>
  427.                                     </div>
  428.                                 </a>
  429.                             {% endfor %}
  430.                         </div>
  431.                         <!-- Jobs Container / End -->
  432.                     </div>
  433.                 </div>
  434.             </div>
  435.         </div>
  436.     {% endif %}
  438.     <!-- Featured Jobs / End -->
  440.     <!-- Features Cities -->
  441.     <div class="section margin-bottom-65 margin-top-65">
  442.         <div class="container">
  443.             <div class="row">
  445.                 {% for city in cityList %}
  446.                     <div class="col-xl-3 col-md-6">
  447.                         <!-- Photo Box -->
  448.                         <a
  449.                             href="{{ city.link }}"
  450.                             class="photo-box"
  451.                             data-background-image="{{ city.img }}">
  452.                             <div class="photo-box-content">
  453.                                 <h2 class="text-white">{{ city.name }}</h2>
  454.                             </div>
  455.                         </a>
  456.                     </div>
  457.                 {% endfor %}
  458.             </div>
  459.         </div>
  460.     </div>
  461.     <!-- Features Cities / End -->
  463.     {# <!-- Highest Rated Freelancers -->
  464.     <div class="section  padding-top-45 padding-bottom-30">
  465.         <div class="container">
  466.             <div class="row">
  468.                 <div class="col-xl-12">
  469.                     <!-- Section Headline -->
  470.                     <div class="section-headline margin-top-0 margin-bottom-25">
  471.                         <h3>Derniers profils</h3>
  472.                         <a href="{{ is_granted('ROLE_USER') ? path('freelance_search') : '#sign-in-dialog' }}"
  473.                            class="{{ is_granted('ROLE_USER') ? '' : 'popup-with-zoom-anim' }} headline-link">Tous les
  474.                             profils</a>
  475.                     </div>
  476.                 </div>
  478.                 <div class="col-xl-12">
  479.                     <div class="freelancers-container freelancers-grid-layout">
  481.                         {% for profile in profiles %}
  482.                             <div class="freelancer">
  483.                                 <div class="freelancer-overview">
  484.                                     <div class="freelancer-overview-inner">
  485.                                         <div class="freelancer-avatar">
  486.                                             <a href="{{ path('public_profile', {slug : profile.slug}) }}">
  487.                                                 <img
  488.                                                         src="{{ asset( profile.photo  ? 'uploads/avatar/' ~ profile.photo: 'images/user-avatar-placeholder.png') }}"
  489.                                                         alt=""
  490.                                                         class="{{ is_granted('ROLE_USER') ? '' : 'blur-image' }}">
  491.                                             </a>
  492.                                         </div>
  494.                                         <div class="freelancer-name">
  495.                                             <h4>
  496.                                                 <a href="{{ path('public_profile', {slug : profile.slug}) }}">{{ profile.user.firstName }}
  497.                                                     .</a>
  498.                                             </h4>
  499.                                             <span>{{ profile.title }}</span>
  500.                                         </div>
  501.                                     </div>
  502.                                 </div>
  504.                                 <div class="freelancer-details">
  505.                                     <div class="freelancer-details-list">
  506.     #}
  507.     {# @changelog 2022-10-03 [FIX] (Anthony) Modification affichage mobilité sur le titre de la page #}
  508.     {#
  509.     <table>
  510.         <thead>
  511.         <tr>
  512.             <th>Localisation</th>
  513.             <th>T.J.M</th>
  514.             <th>Disponibilité</th>
  515.         </tr>
  516.         </thead>
  517.         <tbody>
  518.         <tr>
  519.             <td>
  520.                 {% set locations = profile.location|split(' ') %}
  521.                 <i class="icon-material-outline-location-on"></i>
  522.                 {% if locations|length > 1 %}
  523.                     {{ locations[1] }}
  524.                 {% else %}
  525.                     {{ locations[0] }}
  526.                 {% endif %}
  527.             </td>
  528.             <td>{{ profile.cost }} €</td>
  529.             <td>{{ profile.disponibility }}</td>
  530.         </tr>
  531.         </tbody>
  532.     </table>
  533. </div>
  534. <a href="{{ is_granted('ROLE_USER') ?  path('public_profile', {slug : profile.slug})  : '#sign-in-dialog' }}"
  535.    class="{{ is_granted('ROLE_USER') ? '' : 'popup-with-zoom-anim' }} button button-sliding-icon ripple-effect">
  536.     Voir le profil <i class="icon-material-outline-arrow-right-alt"></i></a>
  537. </div>
  538. </div>
  539. <!-- Freelancer / End -->
  540. {% endfor %}
  541. </div>
  542. </div>
  544. </div>
  545. </div>
  546. </div>
  547. <!-- Highest Rated Freelancers / End--> #}
  549.     <!-- Highest news -->
  550.     {#<div class="section  padding-bottom-45">
  551.         <div class="container">
  552.             <div class="row">
  554.                 <div class="col-xl-12">
  555.                     <!-- Section Headline -->
  556.                     <div class="section-headline margin-top-0 margin-bottom-25">
  557.                         <h3>News</h3>
  558.                         <a href="{{ path('all_news') }}"
  559.                            class=" headline-link">All news</a>
  560.                     </div>
  561.                 </div>
  563.                 <div class="col-xl-12">
  564.                     <div class="freelancers-container freelancers-grid-layout">
  565.                         <ul style="list-style-type:none;">
  566.                             {% for actu in news %}
  567.                                 <li class="actu">
  568.                                     <strong class="text-blue">{{ actu.date|date('d/m') }} </strong>
  569.                                     -
  570.                                     <a class="news-link text-black" href="{{ actu.newsLink }}"
  571.                                        target="_blank"
  572.                                     >
  573.                                         <span>{{ actu.description|u.truncate(70, '...') }}</span>
  574.                                     </a>
  575.                                     - <small>
  576.                                         <em>
  577.                                             <a href="{{ actu.link }}" target="_blank"
  578.                                                class="text-black">{{ actu.owner }}
  579.                                             </a>
  580.                                         </em>
  581.                                     </small>
  582.                                 </li>
  583.                             {% endfor %}
  584.                         </ul>
  585.                     </div>
  586.                 </div>
  588.             </div>
  589.         </div>
  590.     </div>#}
  591.     <!-- Highest news / End-->
  593.     {# <div class="section gray padding-top-0">
  594.         <div class="d-flex align-items-end ">
  595.             <div class="d-none d-md-block col-md-5 padding-left-0">
  596.                 <img class="rounded-right" style="height:50vh; width:100%; object-fit: cover;"
  597.                      src="{{ asset('images/illustration-1.jpg') }}" title="Pourquoi freelance dispo"
  598.                      alt="Pourquoi freelance dispo">
  599.             </div>
  600.             <div class="col-md-6 whysection">
  601.                 <h3>Pourquoi <span class="text-blue">Freelance Dispo</span> ?</h3>
  602.                 <p class="margin-top-25">
  603.                     <span class="text-blue">Freelance Dispo</span> est une plateforme dont l’inscription et
  604.                     l’utilisation sont
  605.                     <span class="text-blue">100% gratuites pour les freelances</span>. En déposant votre CV vous pourrez
  606.                     être contacté par des recruteurs qui recherchent des
  607.                     freelances pour des missions de moyenne et longue durée, et vous pourrez aussi postuler aux annonces
  608.                     de missions destinées aux freelances informatique et dans le digital. Le TJM du freelance n’est pas
  609.                     du tout impacté, Freelance Dispo ne demande <span class="text-blue">aucune commission ni aux freelances ni aux recruteurs</span>
  610.                     et
  611.                     aucun % de frais de service.
  612.                 </p>
  613.             </div>
  614.         </div>
  615.     </div> #}
  617.     <!-- How it works -->
  618.     <div class="section padding-top-65 padding-bottom-65">
  619.         <div class="container">
  620.             <div class="row">
  622.                 <div class="col-xl-12">
  623.                     <!-- Section Headline -->
  624.                     <div class="section-headline centered margin-top-0 margin-bottom-5">
  625.                         <h3>How does it work?</h3>
  626.                     </div>
  627.                 </div>
  629.                 <div class="col-xl-4 col-md-4">
  630.                     <!-- Icon Box -->
  631.                     <div class="icon-box with-line">
  632.                         <!-- Icon -->
  633.                         <div class="icon-box-circle">
  634.                             <div class="icon-box-circle-inner">
  635.                                 <i class="icon-line-awesome-lock"></i>
  636.                                 <div class="icon-box-check"><i class="icon-material-outline-check"></i></div>
  637.                             </div>
  638.                         </div>
  639.                         <h3>Create an account</h3>
  640.                         <p>Create a free account easily to use 100% of the platform</p>
  641.                     </div>
  642.                 </div>
  644.                 <div class="col-xl-4 col-md-4">
  645.                     <!-- Icon Box -->
  646.                     <div class="icon-box with-line">
  647.                         <!-- Icon -->
  648.                         <div class="icon-box-circle">
  649.                             <div class="icon-box-circle-inner">
  650.                                 <i class="icon-line-awesome-legal"></i>
  651.                                 <div class="icon-box-check"><i class="icon-material-outline-check"></i></div>
  652.                             </div>
  653.                         </div>
  654.                         <h3>Post your CV </h3>
  655.                         <p>
  656.                             Add your informations and add your CV to be able to be contact by all employers in Dubai and
  657.                             UAE
  658.                         </p>
  659.                     </div>
  660.                 </div>
  662.                 <div class="col-xl-4 col-md-4">
  663.                     <!-- Icon Box -->
  664.                     <div class="icon-box">
  665.                         <!-- Icon -->
  666.                         <div class="icon-box-circle">
  667.                             <div class="icon-box-circle-inner">
  668.                                 <i class=" icon-line-awesome-trophy"></i>
  669.                                 <div class="icon-box-check"><i class="icon-material-outline-check"></i></div>
  670.                             </div>
  671.                         </div>
  672.                         <h3>Apply to a position</h3>
  673.                         <p>
  674.                             Apply to a regular job or a freelance job in Dubai, Abu Dhabi or everywhere in United Arab
  675.                             Emirates.
  676.                         </p>
  677.                     </div>
  678.                 </div>
  680.             </div>
  681.         </div>
  682.     </div>
  683.     <!-- How it works / End -->
  686.     <!--FAQ -->
  687.     <div class="section faq " style="background-color: #f0faf8">
  688.         <div class="container-fluid white" style="padding-left: 0px; padding-right: 0px; background-color: white ">
  689.             <svg style="display: block" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
  690.                  viewBox="0 0 1366 74.99">
  691.                 <path
  692.                     d="M.051,44.953C180.175,87.69,501.382,86.386,803.886,24.306a1184.173,1184.173,0,0,1,562.165,20.646c-.213-.782,0,30,0,30H.051Z"
  693.                     transform="translate(-0.051 0.038)" fill="#f0faf8"></path>
  694.             </svg>
  695.         </div>
  696.         <div class="container padding-top-50 padding-bottom-100">
  697.             <div class="row">
  698.                 <div class="col-md-8">
  699.                     <h3>FAQ for <span class="text-blue">jobseekers</span></h3>
  700.                     <div class="margin-top-50 accordion js-accordion no-shadow ">
  702.                         {% for question, answer in faqs %}
  703.                             <div class="accordion__item js-accordion-item">
  704.                                 <div class="accordion-header accordion-white js-accordion-header">
  705.                                     <i class="carret"></i> <span>{{ question }}</span>
  706.                                 </div>
  708.                                 <!-- Accordtion Body -->
  709.                                 <div class="accordion-body js-accordion-body" style="display: none;">
  711.                                     <!-- Accordion Content -->
  712.                                     <div class="accordion-body__contents">
  713.                                         <p class="text-black">
  714.                                             {{ answer }}
  715.                                         </p>
  716.                                     </div>
  718.                                 </div>
  719.                                 <!-- Accordion Body / End -->
  720.                             </div>
  721.                         {% endfor %}
  722.                     </div>
  723.                 </div>
  724.                 {# <div class="col-md-4">
  725.                     <img src="{{ asset('images/home-faq.png') }}" alt="FAQ">
  726.                 </div> #}
  727.             </div>
  728.         </div>
  729.     </div>
  730.     <!--FAQ / End -->
  733.     {% include('page/_modal_action_home.html.twig') %}
  735.     {% if is_granted('ROLE_USER') and app.user.deleteAt %}
  736.         <div id="small-dialog" class="zoom-anim-dialog mfp-hide dialog-with-tabs">
  737.             <div class="sign-in-form">
  739.                 <ul class="popup-tabs-nav">
  740.                     <li><a href="#recup-tab">Compte</a></li>
  741.                 </ul>
  743.                 <div class="popup-tabs-container">
  744.                     <div class="popup-tab-content" id="recup-tab">
  745.                         <form>
  746.                             <div id="report_confirm" class="welcome-text">
  747.                                 <h3> « Souhaitez-vous récupérer votre compte avant sa suppression ? »</h3>
  748.                             </div>
  749.                             <div class="d-flex justify-content-end">
  750.                                 <a href="{{ path('logout') }}" class="button red " style="margin-right: 10px">
  751.                                     Annuler
  752.                                 </a>
  753.                                 <a href="{{ path('account_reactivate') }}" class="button">Récupérer mon compte</a>
  754.                             </div>
  755.                         </form>
  757.                     </div>
  758.                 </div>
  759.             </div>
  760.         </div>
  761.     {% else %}
  762.         {% include 'common/modal/sign_modal.html.twig' %}
  763.         {% include 'common/modal/reset_password_modal.html.twig' %}
  764.     {% endif %}
  766.     {% set paused = false %}
  768.     {% for validation in app.flashes('pause_success') %}
  769.         {% set paused = true %}
  770.     {% endfor %}
  771.     {% if paused %}
  772.         <div id="pause-info-dialog" class="zoom-anim-dialog mfp-hide dialog-with-tabs custom-dialog">
  773.             <div class="sign-in-form">
  775.                 <ul class="popup-tabs-nav">
  776.                     <li><a href="#tabinfo">Compte en pause</a></li>
  777.                 </ul>
  779.                 <div class="popup-tabs-container">
  781.                     <!-- Tab -->
  782.                     <div class="popup-tab-content" id="tabinfo">
  784.                         <!-- Welcome Text -->
  785.                         <div class="welcome-text">
  786.                             <p class="margin-top-15">
  787.                                 Votre compte est en pause à votre demande et sera réactivé le
  788.                                 {{ app.user.society.pauseDate | date('d/m/Y') }}
  789.                                 à {{ app.user.society.pauseDate | date('H:i') }}
  790.                             </p>
  791.                         </div>
  792.                     </div>
  794.                 </div>
  795.             </div>
  796.         </div>
  797.     {% endif %}
  799.     {# ------- BTN LOGIN / REGISTER MOBILE ------ #}
  800.     {% include 'macro/notuser_floatant.html.twig' %}
  801. {% endblock %}
  803. {% block javascripts %}
  804.     <script>
  805.         const regions = JSON.parse(`{% autoescape false %}{{ regionjson }}{% endautoescape %}`);
  806.         $(function () {
  807.             $('#location').change(function () {
  808.                 var location = $(this).val();
  809.                 var newLocation = location;
  811.                 if (location.length > 1) {
  812.                     newLocation = newLocation.filter((value) => value !== 'All UAE');
  813.                 }
  815.                 Object.entries(regions).forEach(([region, departement]) => {
  816.                     if (newLocation.includes(region)) {
  817.                         var dep = Object.keys(departement);
  818.                         newLocation = newLocation.filter((value) => !dep.includes(value));
  819.                     }
  820.                 });
  822.                 $(this).selectpicker('val', newLocation);
  824.             });
  825.             if ($('#small-dialog').length > 0) {
  826.                 $.magnificPopup.open({
  827.                     items: {
  828.                         src: '#small-dialog'
  829.                     },
  830.                     type: 'inline',
  831.                     fixedContentPos: false,
  832.                     fixedBgPos: true,
  833.                     overflowY: 'auto',
  834.                     closeBtnInside: true,
  835.                     preloader: false,
  836.                     midClick: true,
  837.                     removalDelay: 300,
  838.                     mainClass: 'my-mfp-zoom-in'
  839.                 });
  840.             }
  841.             if ($('#pause-info-dialog').length > 0) {
  842.                 $.magnificPopup.open({
  843.                     items: {
  844.                         src: '#pause-info-dialog'
  845.                     },
  846.                     type: 'inline',
  847.                     fixedContentPos: false,
  848.                     fixedBgPos: true,
  849.                     overflowY: 'auto',
  850.                     closeBtnInside: true,
  851.                     preloader: false,
  852.                     midClick: true,
  853.                     removalDelay: 300,
  854.                     mainClass: 'my-mfp-zoom-in'
  855.                 });
  856.             }
  857.             if ($('#recup-dialog').length > 0) {
  858.                 $.magnificPopup.open({
  859.                     items: {
  860.                         src: '#recup-dialog'
  861.                     },
  862.                     type: 'inline',
  863.                     fixedContentPos: false,
  864.                     fixedBgPos: true,
  865.                     overflowY: 'auto',
  866.                     closeBtnInside: true,
  867.                     preloader: false,
  868.                     midClick: true,
  869.                     removalDelay: 300,
  870.                     mainClass: 'my-mfp-zoom-in'
  871.                 });
  872.             }
  873.         })
  874.     </script>
  876.     {# ----- SCRIPT INSCRIPTION ---- #}
  877.     {% if not app.user %}
  878.         <script>
  880.             // MODAL
  881.             const closeBtn = document.getElementById('close');
  882.             const modalMenu = document.getElementById('modal');
  884.             if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  885.                 // true for mobile device
  886.                 console.log('mobile');
  887.             } else {
  888.                 // false for not mobile device
  889.                 document.addEventListener("scroll", (event) => {
  890.                     if (!localStorage.modalShow) {
  891.                         modalMenu.classList.add('show');
  892.                     }
  893.                 })
  894.             }
  896.             closeBtn.addEventListener('click', () => {
  897.                 modalMenu.classList.remove('show');
  898.                 localStorage.modalShow = true;
  899.             });
  900.         </script>
  901.     {% endif %}
  903.     {% if app.user %}
  904.         {# ---- SCRICP FORMATAGE RECHERCHE --- #}
  905.         {{ include('macro/_mission-search.html.twig') }}
  906.     {% endif %}
  908. {% endblock %}