templates/home/show.html.twig line 1

  1. {% extends 'base2.html.twig' %}
  3. {% block title %}Nom du commerce{% endblock %}
  5. {% block body %}
  7.     <div class="font-inter dark:bg-background sticky-header-first-content">
  8.       <section
  9.   class="pt-0 border-b border-gray-200 dark:border-foreground dark:bg-background lg:px-0 px-5"
  10. >
  11.   <div class="container-fluid mx-auto lg:p-0 p-5">
  12.     <!-- Slider main container -->
  13.     <div class="relative">
  14.       <div class="swiper swiper-4-item overflow-x-hidden">
  15.         <!-- Additional required wrapper -->
  16.         <div class="swiper-wrapper relative h-full">
  17.           <!-- Slides -->
  18.           <div class="swiper-slide">
  19.             <div class="relative cursor-pointer">
  20.               <img
  21.                 class="h-96 w-full object-cover fullscreen-image"
  22.                 src="{{ vich_uploader_asset(shopForView, 'picture1') }}"
  23.               />
  24.             </div>
  25.           </div>
  26.           {% if vich_uploader_asset(shopForView, 'picture2') is not null %}
  27.           <div class="swiper-slide">
  28.             <div class="relative cursor-pointer">
  29.               <img class="h-96 w-full object-cover fullscreen-image"
  30.               src="{{ vich_uploader_asset(shopForView, 'picture2') }}" />
  31.             </div>
  32.           </div>
  33.           {% endif %}
  34.           {% if vich_uploader_asset(shopForView, 'picture3') is not null %}
  35.           <div class="swiper-slide">
  36.             <div class="relative cursor-pointer">
  37.               <img
  38.                 class="h-96 w-full object-cover fullscreen-image"
  39.                 src="{{ vich_uploader_asset(shopForView, 'picture3') }}"
  40.               />
  41.             </div>
  42.           </div>
  43.           {% endif %}
  44.           {% if vich_uploader_asset(shopForView, 'picture4') is not null %}
  45.           <div class="swiper-slide">
  46.             <div class="relative cursor-pointer">
  47.               <img
  48.                 class="h-96 w-full object-cover fullscreen-image"
  49.                 src="{{ vich_uploader_asset(shopForView, 'picture4') }}"
  50.               />
  51.             </div>
  52.           </div>
  53.           {% endif %}
  54.           {% if vich_uploader_asset(shopForView, 'picture5') is not null %}
  55.           <div class="swiper-slide">
  56.             <div class="relative cursor-pointer">
  57.               <img
  58.                 class="h-96 w-full object-cover fullscreen-image"
  59.                 src="{{ vich_uploader_asset(shopForView, 'picture5') }}"
  60.               />
  61.             </div>
  62.           </div>
  63.           {% endif %}
  64.           {% if vich_uploader_asset(shopForView, 'picture6') is not null %}
  65.           <div class="swiper-slide">
  66.             <div class="relative cursor-pointer">
  67.               <img
  68.                 class="h-96 w-full object-cover fullscreen-image"
  69.                 src="{{ vich_uploader_asset(shopForView, 'picture6') }}"
  70.               />
  71.             </div>
  72.           </div>
  73.           {% endif %}
  74.         </div>
  76.         <!-- If we need pagination -->
  77.         <div class="swiper-pagination"></div>
  79.         <!-- If we need navigation buttons -->
  80.       </div>
  81.       {% if vich_uploader_asset(shopForView, 'picture5') != null %}
  82.       <div class="swiper-button-prev left-2 lg:left-6 after:hidden">
  83.         <button
  84.           type="button"
  85.           class="bg-white dark:bg-foreground text-blue-500 rounded-full p-2"
  86.         >
  87.           <svg
  88.             xmlns="http://www.w3.org/2000/svg"
  89.             class="h-5 w-5"
  90.             fill="none"
  91.             viewBox="0 0 24 24"
  92.             stroke="currentColor"
  93.           >
  94.             <path
  95.               stroke-linecap="round"
  96.               stroke-linejoin="round"
  97.               stroke-width="2"
  98.               d="M10 19l-7-7m0 0l7-7m-7 7h18"
  99.             />
  100.           </svg>
  101.         </button>
  102.       </div>
  103.       <div class="swiper-button-next absolute right-2 lg:right-6 after:hidden">
  104.         <button
  105.           type="button"
  106.           class="bg-white dark:bg-foreground text-blue-500 rounded-full p-2"
  107.         >
  108.           <svg
  109.             xmlns="http://www.w3.org/2000/svg"
  110.             class="h-5 w-5"
  111.             fill="none"
  112.             viewBox="0 0 24 24"
  113.             stroke="currentColor"
  114.           >
  115.             <path
  116.               stroke-linecap="round"
  117.               stroke-linejoin="round"
  118.               stroke-width="2"
  119.               d="M14 5l7 7m0 0l-7 7m7-7H3"
  120.             />
  121.           </svg>
  122.         </button>
  123.       </div>
  124.         {% endif %}
  125.     </div>
  127.     <div class="bg-gray-100 dark:bg-foreground pt-6 pb-1">
  128.       <div class="container mx-auto px-5">
  129.  
  130.         <div class="flex flex-wrap mb-4">
  132.         <!-- Start - Show categories -->
  133.   
  134.           {% for category in shopForView.categories %}
  135.           <span class="bg-yellow-500 text-xs text-white rounded-full px-4 py-1 flex items-center mr-1 mb-3">   
  136.                             <span class="badge bg-warning text-dark">{{ category.name }}</span>
  137.           </span>
  138.           {% endfor %}
  139.         
  140.         <!-- END - Show categories -->
  142.       
  143.         </div>
  144.         <div class="flex justify-between flex-wrap">
  145.           <div class="mb-4">
  146.             <div class="flex items-center mb-1">
  147.               <h4
  148.                 class="text-gray-700 font-medium dark:text-gray-100 mr-2 lg:text-3xl text-2xl"
  149.               >
  150.                 {{shopForView.name}}
  151.               </h4>
  153.               
  155.               {% if shopForView.verified == true %}
  156.               <svg
  157.                 xmlns="http://www.w3.org/2000/svg"
  158.                 class="h-5 w-5 text-green-500"
  159.                 viewBox="0 0 20 20"
  160.                 fill="currentColor"
  161.               >
  162.                 <path
  163.                   fill-rule="evenodd"
  164.                   d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
  165.                   clip-rule="evenodd"
  166.                 />
  167.               </svg>
  168.               {% endif %}
  171.             </div>
  173.             <div class="flex items-center text-gray-500 dark:text-gray-300">
  174.               <svg
  175.                 xmlns="http://www.w3.org/2000/svg"
  176.                 class="h-5 w-5 mr-1"
  177.                 viewBox="0 0 20 20"
  178.                 fill="currentColor"
  179.               >
  180.                 <path
  181.                   fill-rule="evenodd"
  182.                   d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
  183.                   clip-rule="evenodd"
  184.                 />
  185.               </svg>
  186.               <p class="text-base">
  187.                   {{ shopForView.addressCity }}            
  188.               </p>
  189.             </div>
  190.           </div>
  192.           {% if shopForView.verified == true %}
  193.           <div class="mb-4">
  194.             <button
  195.           type="button"
  196.           class="w-full flex justify-center items-center bg-green-600 rounded-lg text-white p-[0.657rem] mb-3"
  197.         >
  198.           <svg
  199.             class="mr-3"
  200.             width="31"
  201.             height="31"
  202.             viewBox="0 0 31 31"
  203.             fill="none"
  204.             xmlns="http://www.w3.org/2000/svg"
  205.           >
  206.             <path
  207.               d="M3.1001 15.5C3.1001 8.65091 8.65104 3.09998 15.5001 3.09998C22.3492 3.09998 27.9001 8.65091 27.9001 15.5C27.9001 22.349 22.3492 27.9 15.5001 27.9C8.65104 27.9 3.1001 22.349 3.1001 15.5ZM21.1092 13.359C21.6371 12.8311 21.6371 11.9689 21.1092 11.4409C20.5812 10.9129 19.719 10.9129 19.191 11.4409L13.9501 16.6818L11.8092 14.5409C11.2812 14.0129 10.419 14.0129 9.89103 14.5409C9.36307 15.0689 9.36307 15.9311 9.89103 16.459L12.991 19.559C13.519 20.087 14.3812 20.087 14.9092 19.559L21.1092 13.359Z"
  208.               fill="white"
  209.             />
  210.           </svg>
  211.           Etablissement vérifié par Best of Sarlat
  212.         </button> 
  213.           {% endif %}
  214.                   <div class="mb-4">
  215.             <div class="flex flex-wrap items-center mb-1">
  220. {% set rating = apiData.result.rating %}
  222. {% if rating >= 0 and rating < 0.5 %}
  223. <div class='stars-rating' style="--rating: 0;">
  224.   <div class="rating"></div>
  225. </div>
  226. {% elseif rating >= 0.5 and rating < 1.5 %}
  227. <div class='stars-rating' style="--rating: 0.5;">
  228.   <div class="rating"></div>
  229. </div>
  230. {% elseif rating >= 1.5 and rating < 2.5 %}
  231. <div class='stars-rating' style="--rating: 1.5;">
  232.   <div class="rating"></div>
  233. </div>
  234. {% elseif rating >= 2.5 and rating < 3.5 %}
  235. <div class='stars-rating' style="--rating: 2.5;">
  236.   <div class="rating"></div>
  237. </div>
  238. {% elseif rating >= 3.5 and rating < 4.5 %}
  239. <div class='stars-rating' style="--rating: 3.5;">
  240.   <div class="rating"></div>
  241. </div>
  242. {% elseif rating >= 4.5 and rating < 5 %}
  243. <div class='stars-rating' style="--rating: 4.5;">
  244.   <div class="rating"></div>
  245. </div>
  246. {% elseif rating == 5 %}
  247. <div class='stars-rating' style="--rating: 5;">
  248.   <div class="rating"></div>
  249. </div>
  250. {% endif %}
  256.               <span class="text-gray-700 font-medium mr-2 dark:text-gray-400"
  257.                 >{{apiData.result.rating}}</span
  258.               >
  259.               <span class="text-gray-500 dark:text-gray-400 text-sm mr-2"
  260.                 >({{apiData.result.user_ratings_total}} avis donnés)</span
  261.               >
  262.             </div> 
  263.               <span class="text-gray-500 dark:text-gray-400 text-sm mr-2">
  264.                 Note fournie par
  265.                 <a href="{{apiData.result.url}}" target="_blank" class="text-blue-500 underline">Google</a>
  266.               </span>
  267.           </div>
  268.         </div>
  269.       </div>
  270.     </div>
  271.   </div>
  272. </section>
  273. <section class="dark:bg-background pt-20 bg-bodygray lg:px-0 px-5">
  274.   <div class="container mx-auto">
  275.     <div class="grid lg:grid-cols-3 grid-cols-1 gap-7">
  276.       <div class="lg:col-span-2 col-span-1">
  277.         <div
  278.           class="rounded-lg shadow-fornt-2 dark:bg-foreground p-6 bg-white mb-7"
  279.         >
  280.           <h5
  281.             class="text-base font-medium mb-4 text-gray-700 dark:text-gray-100"
  282.           >
  283.             Description
  284.           </h5>
  285.           <p class="text-sm font-normal text-gray-500 dark:text-gray-300">
  286.             {{shopForView.about | raw}}
  287.           </p>
  288.         </div>
  289.         <div
  290.           class="rounded-lg shadow-fornt-2 dark:bg-foreground p-6 bg-white mb-7"
  291.         >
  292.           <div
  293.             class="text-base font-medium mb-4 text-gray-700 dark:text-gray-100"
  294.           >
  295.             Photos
  296.           </div>
  297.           <div class="swiper mySwiper2 mb-7">
  298.             <div class="swiper-wrapper">
  299.               <div class="swiper-slide">
  300.                 <img
  301.                   class="h-96 w-full object-cover rounded-lg"
  302.                   src="{{ vich_uploader_asset(shopForView, 'picture1') }}"
  303.                 />
  304.               </div>
  305.               {% if vich_uploader_asset(shopForView, 'picture2') is not null %} 
  306.               <div class="swiper-slide">
  307.                 <img
  308.                   class="h-96 w-full object-cover rounded-lg"
  309.                   src="{{ vich_uploader_asset(shopForView, 'picture2') }}"
  310.                 />
  311.               </div>
  312.               {% endif %}
  313.               {% if vich_uploader_asset(shopForView, 'picture3') is not null %} 
  314.               <div class="swiper-slide">
  315.                 <img
  316.                   class="h-96 w-full object-cover rounded-lg"
  317.                   src="{{ vich_uploader_asset(shopForView, 'picture3') }}"
  318.                 />
  319.               </div>
  320.               {% endif %}
  321.               {% if vich_uploader_asset(shopForView, 'picture4') is not null %} 
  322.               <div class="swiper-slide">
  323.                 <img
  324.                   class="h-96 w-full object-cover rounded-lg"
  325.                   src="{{ vich_uploader_asset(shopForView, 'picture4') }}"
  326.                 />
  327.               </div>
  328.               {% endif %}
  329.               {% if vich_uploader_asset(shopForView, 'picture5') is not null %} 
  330.               <div class="swiper-slide">
  331.                 <img
  332.                   class="h-96 w-full object-cover rounded-lg"
  333.                   src="{{ vich_uploader_asset(shopForView, 'picture5') }}"
  334.                 />
  335.               </div>
  336.               {% endif %}
  337.               {% if vich_uploader_asset(shopForView, 'picture6') is not null %} 
  338.               <div class="swiper-slide">
  339.                 <img
  340.                   class="h-96 w-full object-cover rounded-lg"
  341.                   src="{{ vich_uploader_asset(shopForView, 'picture6') }}"
  342.                 />
  343.               </div>
  344.               {% endif %}
  345.             </div>
  346.             <div class="swiper-button-next after:hidden">
  347.               <button
  348.                 type="button"
  349.                 class="bg-white dark:bg-foreground text-blue-500 rounded-full p-2"
  350.               >
  351.                 <svg
  352.                   xmlns="http://www.w3.org/2000/svg"
  353.                   class="h-5 w-5"
  354.                   fill="none"
  355.                   viewBox="0 0 24 24"
  356.                   stroke="currentColor"
  357.                   stroke-width="2"
  358.                 >
  359.                   <path
  360.                     stroke-linecap="round"
  361.                     stroke-linejoin="round"
  362.                     d="M9 5l7 7-7 7"
  363.                   />
  364.                 </svg>
  365.               </button>
  366.             </div>
  367.             <div class="swiper-button-prev after:hidden">
  368.               <button
  369.                 type="button"
  370.                 class="bg-white dark:bg-foreground text-blue-500 rounded-full p-2"
  371.               >
  372.                 <svg
  373.                   xmlns="http://www.w3.org/2000/svg"
  374.                   class="h-5 w-5"
  375.                   fill="none"
  376.                   viewBox="0 0 24 24"
  377.                   stroke="currentColor"
  378.                   stroke-width="2"
  379.                 >
  380.                   <path
  381.                     stroke-linecap="round"
  382.                     stroke-linejoin="round"
  383.                     d="M15 19l-7-7 7-7"
  384.                   />
  385.                 </svg>
  386.               </button>
  387.             </div>
  388.           </div>
  389.           <div thumbsSlider="" class="swiper mySwiper">
  390.             <div class="swiper-wrapper">
  391.               <div class="swiper-slide">
  392.                 <img
  393.                   class="h-24 w-full object-cover rounded-lg"
  394.                   src="{{ vich_uploader_asset(shopForView, 'picture1') }}"
  395.                 />
  396.               </div>
  397.               {% if vich_uploader_asset(shopForView, 'picture2') is not null %}
  398.               <div class="swiper-slide">
  399.                 <img
  400.                   class="h-24 w-full object-cover rounded-lg"
  401.                   src="{{ vich_uploader_asset(shopForView, 'picture2') }}"
  402.                 />
  403.               </div>
  404.               {% endif %}
  405.               {% if vich_uploader_asset(shopForView, 'picture3') is not null %} 
  406.               <div class="swiper-slide">
  407.                 <img
  408.                   class="h-24 w-full object-cover rounded-lg"
  409.                   src="{{ vich_uploader_asset(shopForView, 'picture3') }}"
  410.                 />
  411.               </div>
  412.               {% endif %}
  413.               {% if vich_uploader_asset(shopForView, 'picture4') is not null %} 
  414.               <div class="swiper-slide">
  415.                 <img
  416.                   class="h-24 w-full object-cover rounded-lg"
  417.                   src="{{ vich_uploader_asset(shopForView, 'picture4') }}"
  418.                 />
  419.               </div>
  420.               {% endif %}
  421.               {% if vich_uploader_asset(shopForView, 'picture5') is not null %} 
  422.               <div class="swiper-slide">
  423.                 <img
  424.                   class="h-24 w-full object-cover rounded-lg"
  425.                   src="{{ vich_uploader_asset(shopForView, 'picture5') }}"
  426.                 />
  427.               </div>
  428.               {% endif %}
  429.               {% if vich_uploader_asset(shopForView, 'picture6') is not null %} 
  430.               <div class="swiper-slide">
  431.                 <img
  432.                   class="h-24 w-full object-cover rounded-lg"
  433.                   src="{{ vich_uploader_asset(shopForView, 'picture6') }}"
  434.                 />
  435.               </div>
  436.               {% endif %}
  437.             </div>
  438.           </div>
  439.         </div>
  441.         <div
  442.           class="rounded-lg shadow-fornt-2 dark:bg-foreground p-6 bg-white mb-7"
  443.         >
  444.           <h5
  445.             class="text-base font-medium mb-4 text-gray-700 dark:text-gray-100"
  446.           >
  447.             Les petits plus
  448.           </h5>
  450.         <!-- Start - Show tags -->
  451.         
  452.           <div class="grid md:grid-cols-3 grid-cols-2 gap-7">
  453.             {% for tag in shopForView.tags %}
  454.             <div
  455.               class="flex items-center [&>*]:hover:text-blue-500 cursor-pointer"
  456.             >
  457.               <svg
  458.                 class="w-[18px] h-[18px] mr-2 text-gray-500 dark:text-gray-300"
  459.                 width="16"
  460.                 height="16"
  461.                 viewBox="0 0 16 16"
  462.                 fill="none"
  463.                 xmlns="http://www.w3.org/2000/svg"
  464.               >
  465.                 <path
  466.                   d="M7.41762 10.1179C7.24324 10.295 6.95637 10.295 6.78199 10.1179L4.98199 8.31786C4.8048 8.14349 4.8048 7.85661 4.98199 7.68224C5.15637 7.50505 5.44324 7.50505 5.61762 7.68224L7.0998 9.16442L10.382 5.88224C10.5564 5.70505 10.8432 5.70505 11.0176 5.88224C11.1948 6.05661 11.1948 6.34349 11.0176 6.51786L7.41762 10.1179ZM15.1998 8.00005C15.1998 11.9769 11.9767 15.2 7.9998 15.2C4.02293 15.2 0.799805 11.9769 0.799805 8.00005C0.799805 4.02317 4.02293 0.800049 7.9998 0.800049C11.9767 0.800049 15.1998 4.02317 15.1998 8.00005ZM7.9998 1.70005C4.52074 1.70005 1.6998 4.52099 1.6998 8.00005C1.6998 11.4791 4.52074 14.3 7.9998 14.3C11.4789 14.3 14.2998 11.4791 14.2998 8.00005C14.2998 4.52099 11.4789 1.70005 7.9998 1.70005Z"
  467.                   fill="currentColor"
  468.                 />
  469.               </svg>
  470.               <span class="text-sm font-normal text-gray-700 dark:text-gray-300"
  471.                 >{{ tag.name }}</span
  472.               >
  473.             </div>
  474.             {% endfor %}
  475.           </div>
  476.         </div>
  478.         <!-- END - Show tags -->
  479.         
  480.         <div class="mobilehidden">
  481.           <h1
  482.             class="text-gray-700 dark:text-gray-100 lg:text-3xl text-2xl mb-2"
  483.           >
  484.             Dans la même catégorie
  485.           </h1>
  486.           <p class="text-gray-500 dark:text-gray-400 mb-12">
  487.             D'autres commerces qui pourraient vous convenir
  488.           </p>
  490.           <div class="grid lg:grid-cols-2 grid-cols-1 gap-7 mb-10">
  491.           <!-- Slide START --> 
  492.     {% for shop in twoShops %}
  493.             <div class="overflow-hidden rounded-lg">
  494.               <a
  495.                 href="{{ path('app_home_show', {'slug' : shop.slug })}}"
  496.                 class="relative overflow-hidden group"
  497.               >
  498.                 
  499.                 <img
  500.                   class="w-full h-80 object-cover rounded-t-lg group-hover:scale-105 transition-all"
  501.                   src="{{ vich_uploader_asset(shop, 'picture1') }}"
  502.                   alt=""
  503.                 />
  504.                 <div
  505.                   class="absolute bottom-0 overflow-hidden top-1/2 flex items-start flex-col justify-end left-0 pb-5 pl-5 pt-2 card-linear-gradient w-full"
  506.                 >
  507.                   <div class="flex text-white items-center mb-2">
  508.                     <h2 class="text-xl capitalize font-semibold">
  509.                       {{shop.name}}
  510.                     </h2>
  511.                     {% if shop.verified == true %}
  512.                     <svg
  513.                       width="20"
  514.                       height="20"
  515.                       viewBox="0 0 20 20"
  516.                       fill="none"
  517.                       xmlns="http://www.w3.org/2000/svg"
  518.                     >
  519.                       <path
  520.                         d="M15.6562 4.34313C16.4688 5.15625 16.6906 6.31875 16.4031 7.34688C17.3531 7.85 18 8.85 18 10C18 11.15 17.3531 12.15 16.4031 12.6531C16.7188 13.6812 16.4688 14.8156 15.6562 15.6562C14.8156 16.4688 13.6812 16.6906 12.6531 16.4031C12.15 17.3531 11.15 18 10 18C8.85 18 7.85 17.3531 7.34688 16.4031C6.31875 16.7188 5.15625 16.4688 4.34313 15.6562C3.53 14.8156 3.28125 13.6812 3.59687 12.6531C2.64687 12.15 2 11.15 2 10C2 8.85 2.64687 7.85 3.59687 7.34688C3.25312 6.31875 3.53 5.15625 4.34313 4.34313C5.15625 3.53 6.31875 3.28125 7.34688 3.59687C7.85 2.64687 8.85 2 10 2C11.15 2 12.15 2.64687 12.6531 3.59687C13.6812 3.25312 14.8156 3.53 15.6562 4.34313Z"
  521.                         fill="#00AB55"
  522.                       />
  523.                       <path
  524.                         d="M7 10L8.64645 11.6464C8.84171 11.8417 9.15829 11.8417 9.35355 11.6464L13 8"
  525.                         stroke="white"
  526.                         stroke-width="1.2"
  527.                         stroke-linecap="round"
  528.                       />
  529.                     </svg>
  530.                     {% endif %}
  531.                   </div>
  532.                   <p class="text-sm font-normal text-white mb-4">
  533.                     {{shop.AddressCity}}
  534.                   </p>
  535.                 </div>
  536.               </a>
  537.             </div>
  538.   {% endfor %}
  540. <!-- Slide END -->          
  542.           </div>
  543.          
  544.         </div>
  545.       </div>
  546.       <div class="lg:col-span-1 col-span-1">
  547.         <div class="rounded-lg shadow-fornt-2 dark:bg-foreground bg-white mb-7">
  548.           <div class="mapouter">
  549.             <div class="gmap_canvas">
  550.               <iframe
  551.                 class="w-full h-64 rounded-t-md"
  552.                 id="gmap_canvas"
  553.                 src="https://maps.google.com/maps?q={{apiData.result.geometry.location.lat}},{{apiData.result.geometry.location.lng}}&t=&z=13&ie=UTF8&iwloc=&output=embed"
  554.                 frameborder="0"
  555.                 scrolling="no"
  556.                 marginheight="0"
  557.                 marginwidth="0"
  558.               ></iframe>
  559.             </div>
  560.           </div>
  561.           <div class="p-6 border-b border-gray-200 dark:border-gray-800">
  562.             <div
  563.               class="flex items-center text-gray-700 dark:text-gray-300 mb-4"
  564.             >
  565.               <svg
  566.                 xmlns="http://www.w3.org/2000/svg"
  567.                 class="h-4 w-4 mr-2"
  568.                 fill="none"
  569.                 viewBox="0 0 24 24"
  570.                 stroke="currentColor"
  571.                 stroke-width="2"
  572.               >
  573.                 <path
  574.                   stroke-linecap="round"
  575.                   stroke-linejoin="round"
  576.                   d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
  577.                 />
  578.                 <path
  579.                   stroke-linecap="round"
  580.                   stroke-linejoin="round"
  581.                   d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
  582.                 />
  583.               </svg>
  584.               <p class="text-base">{{apiData.result.formatted_address}}</p>
  585.             </div>
  586.             <div
  587.               class="flex items-center text-gray-700 dark:text-gray-300 mb-4"
  588.             >
  589.               <svg
  590.                 class="h-4 w-4 mr-2"
  591.                 xmlns="http://www.w3.org/2000/svg"
  592.                 class="h-6 w-6"
  593.                 fill="none"
  594.                 viewBox="0 0 24 24"
  595.                 stroke="currentColor"
  596.                 stroke-width="2"
  597.               >
  598.                 <path
  599.                   stroke-linecap="round"
  600.                   stroke-linejoin="round"
  601.                   d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
  602.                 />
  603.               </svg>
  604.               <p class="text-base">{{apiData.result.formatted_phone_number}}</p>
  605.             </div>
  607.             {% if shopForView.website %}
  608.             <div
  609.               class="flex items-center text-gray-700 dark:text-gray-300 mb-4"
  610.             >
  611.               <svg
  612.                 xmlns="http://www.w3.org/2000/svg"
  613.                 class="h-4 w-4 mr-2"
  614.                 fill="none"
  615.                 viewBox="0 0 24 24"
  616.                 stroke="currentColor"
  617.                 stroke-width="2"
  618.               >
  619.                 <path
  620.                   stroke-linecap="round"
  621.                   stroke-linejoin="round"
  622.                   d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
  623.                 />
  624.               </svg>
  625.               <a
  626.                 target="_blank"
  627.                 href="{{shopForView.website}}"
  628.                 class="relative overflow-hidden group"
  629.               >
  630.               <p class="text-base">{{shopForView.website}}</p>
  631.               </a>
  632.             </div>
  633.             {% endif %}
  634.           </div>
  635.           {% if shopForView.facebook or shopForView.twitter or shopForView.linkedin or shopForView.instagram %}
  636.           <div class="p-6">
  637.             <h6 class="text-base text-gray-700 dark:text-gray-100 mb-2">
  638.               Suivez-nous sur :
  639.             </h6>
  640.             <div class="flex flex-wrap">
  641.             {% if shopForView.facebook %}
  642.               <button
  643.                 type="button"
  644.                 class="border mr-3 mb-3 border-gray-200 dark:border-gray-800 dark:text-gray-400 p-2 rounded-lg hover:text-blue-500 hover:border-blue-500 dark:hover:text-blue-500 dark:hover:border-blue-500"
  645.               >
  646.               <a
  647.                 target="_blank"
  648.                 href="{{shopForView.facebook}}"
  649.                 class="relative overflow-hidden group"
  650.               >
  651.                 <svg
  652.                   width="20"
  653.                   height="21"
  654.                   viewBox="0 0 20 21"
  655.                   fill="none"
  656.                   xmlns="http://www.w3.org/2000/svg"
  657.                 >
  658.                   <path
  659.                     d="M18 10.5625C18 6.14422 14.4183 2.5625 10 2.5625C5.58172 2.5625 2 6.14422 2 10.5625C2 14.5555 4.92547 17.8652 8.75 18.4653V12.875H6.71875V10.5625H8.75V8.8C8.75 6.795 9.94438 5.6875 11.7717 5.6875C12.6467 5.6875 13.5625 5.84375 13.5625 5.84375V7.8125H12.5538C11.56 7.8125 11.25 8.42922 11.25 9.0625V10.5625H13.4688L13.1141 12.875H11.25V18.4653C15.0745 17.8652 18 14.5555 18 10.5625Z"
  660.                     fill="currentColor"
  661.                   />
  662.                 </svg>
  663.               </a>
  664.               </button>
  665.               {% endif %}
  667.               {% if shopForView.instagram %}
  668.               <button
  669.                 type="button"
  670.                 class="border mr-3 mb-3 border-gray-200 dark:border-gray-800 dark:text-gray-400 p-2 rounded-lg hover:text-blue-500 hover:border-blue-500 dark:hover:text-blue-500 dark:hover:border-blue-500"
  671.               >
  672.               <a
  673.                 target="_blank"
  674.                 href="{{shopForView.instagram}}"
  675.                 class="relative overflow-hidden group"
  676.               >
  677.                 <svg
  678.                   width="20"
  679.                   height="20"
  680.                   viewBox="0 0 17 18"
  681.                   fill="none"
  682.                   xmlns="http://www.w3.org/2000/svg"
  683.                 >
  684.                   <path
  685.                     d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"
  686.                     fill="currentColor"
  687.                   />
  688.                 </svg>
  689.               </a>
  690.               </button>
  691.               {% endif %}
  693.             {% if shopForView.linkedin %}
  694.               <button
  695.                 type="button"
  696.                 class="border mr-3 mb-3 border-gray-200 dark:border-gray-800 dark:text-gray-400 p-2 rounded-lg hover:text-blue-500 hover:border-blue-500 dark:hover:text-blue-500 dark:hover:border-blue-500"
  697.               >
  698.               <a
  699.                 target="_blank"
  700.                 href="{{shopForView.linkedin}}"
  701.                 class="relative overflow-hidden group"
  702.               >
  703.                 <svg
  704.                   width="20"
  705.                   height="21"
  706.                   viewBox="0 0 20 21"
  707.                   fill="none"
  708.                   xmlns="http://www.w3.org/2000/svg"
  709.                 >
  710.                   <path
  711.                     d="M16.8156 2.5625H3.18125C2.52812 2.5625 2 3.07813 2 3.71563V17.4062C2 18.0438 2.52812 18.5625 3.18125 18.5625H16.8156C17.4688 18.5625 18 18.0438 18 17.4094V3.71563C18 3.07813 17.4688 2.5625 16.8156 2.5625ZM6.74687 16.1969H4.37188V8.55937H6.74687V16.1969ZM5.55938 7.51875C4.79688 7.51875 4.18125 6.90312 4.18125 6.14375C4.18125 5.38438 4.79688 4.76875 5.55938 4.76875C6.31875 4.76875 6.93437 5.38438 6.93437 6.14375C6.93437 6.9 6.31875 7.51875 5.55938 7.51875ZM15.6344 16.1969H13.2625V12.4844C13.2625 11.6 13.2469 10.4594 12.0281 10.4594C10.7937 10.4594 10.6062 11.425 10.6062 12.4219V16.1969H8.2375V8.55937H10.5125V9.60313H10.5437C10.8594 9.00313 11.6344 8.36875 12.7875 8.36875C15.1906 8.36875 15.6344 9.95 15.6344 12.0063V16.1969Z"
  712.                     fill="currentColor"
  713.                   />
  714.                 </svg>
  715.               </a>
  716.               </button>
  717.               {% endif %}
  719.             {% if shopForView.twitter %}
  720.               <button
  721.                 type="button"
  722.                 class="border mr-3 mb-3 border-gray-200 dark:border-gray-800 dark:text-gray-400 p-2 rounded-lg hover:text-blue-500 hover:border-blue-500 dark:hover:text-blue-500 dark:hover:border-blue-500"
  723.               >
  724.               <a
  725.                 target="_blank"
  726.                 href="{{shopForView.twitter}}"
  727.                 class="relative overflow-hidden group"
  728.               >
  729.                 <svg
  730.                   width="20"
  731.                   height="21"
  732.                   viewBox="0 0 20 21"
  733.                   fill="none"
  734.                   xmlns="http://www.w3.org/2000/svg"
  735.                 >
  736.                   <path
  737.                     d="M7.03344 16.563C13.0697 16.563 16.3722 11.5608 16.3722 7.22423C16.3722 7.0836 16.3691 6.93985 16.3628 6.79923C17.0052 6.33463 17.5597 5.75916 18 5.09985C17.4017 5.36605 16.7664 5.53991 16.1159 5.61548C16.8009 5.20493 17.3137 4.55997 17.5594 3.80017C16.915 4.18203 16.2104 4.4514 15.4756 4.59673C14.9806 4.0707 14.326 3.7224 13.6131 3.60569C12.9003 3.48898 12.1688 3.61036 11.5318 3.95105C10.8949 4.29175 10.3879 4.83279 10.0892 5.49053C9.7906 6.14827 9.71695 6.88606 9.87969 7.58985C8.575 7.52438 7.29862 7.18546 6.13332 6.59505C4.96802 6.00465 3.9398 5.17595 3.11531 4.16267C2.69627 4.88515 2.56804 5.74008 2.75669 6.55372C2.94534 7.36735 3.43671 8.07862 4.13094 8.54298C3.60975 8.52643 3.09998 8.38611 2.64375 8.1336V8.17423C2.64328 8.93242 2.9054 9.66738 3.38554 10.2542C3.86568 10.841 4.53422 11.2434 5.2775 11.393C4.7947 11.5251 4.28799 11.5443 3.79656 11.4492C4.0063 12.1013 4.41438 12.6716 4.96385 13.0805C5.51331 13.4895 6.17675 13.7167 6.86156 13.7305C5.69895 14.6437 4.26278 15.1391 2.78438 15.1367C2.52219 15.1363 2.26027 15.1203 2 15.0886C3.5019 16.0522 5.24902 16.5639 7.03344 16.563Z"
  738.                     fill="currentColor"
  739.                   />
  740.                 </svg>
  741.               </a>
  742.               </button>
  743.               {% endif %}
  745.             </div>
  746.           </div>
  747.           {% endif %}
  748.         </div>
  749.         <div class="rounded-lg shadow-fornt-2 dark:bg-foreground bg-white mb-7">
  750.           <div
  751.             class="p-6 border-b mb-6 flex justify-between border-gray-200 text-gray-700 font-medium dark:border-gray-800 dark:text-gray-100"
  752.           >
  753.             <div class="flex">
  754.               <svg
  755.                 xmlns="http://www.w3.org/2000/svg"
  756.                 class="h-6 w-6 text-yellow-500 mr-2"
  757.                 fill="none"
  758.                 viewBox="0 0 24 24"
  759.                 stroke="currentColor"
  760.                 stroke-width="2"
  761.               >
  762.                 <path
  763.                   stroke-linecap="round"
  764.                   stroke-linejoin="round"
  765.                   d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
  766.                 />
  767.               </svg>
  768.               <div class="text-base text-gray-700 dark:text-gray-100">
  769.                 Horaires d'ouverture
  770.               </div>
  771.             </div>
  773.             {% if apiData.result.opening_hours.open_now == true %}
  774.                 <div class="bg-green-50 text-xs p-2 rounded-lg text-green-500">
  775.                     Ouvert actuellement
  776.                 </div>
  777.             {% else %}
  778.                 <div class="bg-red-500 text-xs p-2 rounded-lg text-red-500">
  779.                     Fermé
  780.                 </div>
  781.             {% endif %}
  784.           </div>
  785.           
  786.           <div class="">
  787.           <div
  788.               class="px-6 py-3 text-gray-500 dark:text-gray-400 flex justify-between"
  789.             >
  790.               <h6 class="font-medium w-32"></h6>
  791.               <p class="w-32 text-center">Matin</p>
  792.               <p class="w-32 text-center">Après-midi</p>
  793.             </div>
  794. {% for day in [1, 2, 3, 4, 5, 6, 7] %}
  795.   <div class="px-6 py-3 text-gray-500 dark:text-gray-400 flex justify-between">
  796.     <h6 class="font-medium w-32">
  797.       {% set dayMap = {
  798.         1: 'Lundi',
  799.         2: 'Mardi',
  800.         3: 'Mercredi',
  801.         4: 'Jeudi',
  802.         5: 'Vendredi',
  803.         6: 'Samedi',
  804.         7: 'Dimanche'
  805.       } %}
  806.       {{ dayMap[day] }}
  807.     </h6>
  808.     {% set isMorningOpen = false %}
  809.     {% set isAfternoonOpen = false %}
  810.     {% for period in apiData.result.opening_hours.periods %}
  811.       {% if period.open.day == day %}
  812.         {% set isMorningOpen = true %}
  813.         {% set openingTime = period.open.time %}
  814.         {% set closingTime = period.close.time %}
  815.         {% set formattedOpeningTime = openingTime[:2] ~ ':' ~ openingTime[2:] %}
  816.         {% set formattedClosingTime = closingTime[:2] ~ ':' ~ closingTime[2:] %}
  817.         {% set closingHour = closingTime[:2] %}
  818.         {% set isAfternoon = closingHour > '12' %}
  819.         {% if isAfternoon %}
  820.           {% set isAfternoonOpen = true %}
  821.           <p class="w-32 text-center">{{ formattedOpeningTime }} - {{ formattedClosingTime }}</p>
  822.         {% else %}
  823.           <p class="w-32 text-center">{{ formattedOpeningTime }} - {{ formattedClosingTime }}</p>
  824.         {% endif %}
  825.       {% endif %}
  826.     {% endfor %}
  827.     {% if not isMorningOpen %}
  828.       <p class="w-32 text-center">Fermé</p>
  829.     {% endif %}
  830.     {% if not isAfternoonOpen %}
  831.       <p class="w-32 text-center">Fermé</p>
  832.     {% endif %}
  833.   </div>
  834. {% endfor %}
  840.           </div>
  841.         </div>
  842.         
  844.         
  845.         <div
  846.           class="shadow-front-3 bg-white dark:bg-foreground p-6 rounded-lg mb-7"
  847.         >
  848.           <h4
  849.             class="text-base font-medium text-gray-700 dark:text-gray-100 mb-3"
  850.           >
  851.             Toutes les catégories
  852.           </h4>
  853.           {% for category in allCategories %}
  854.             <a
  855.               href="{{ path('app_home_list_category', {'id' : category.id })}}"
  856.               aria-colcount=""
  857.               class="flex hover:text-blue-500 dark:hover:text-blue-500 justify-between text-base text-gray-500 dark:text-gray-400 dark:border-gray-800 border-b border-gray-200 items-center py-3"
  858.             >
  859.               <h6 class="font-medium">{{ category.name }}</h6>
  860.             </a>
  861.           {% endfor %}
  863.         </div>
  864.       </div>
  865.     </div>
  866.   </div>
  867. </section>
  869.       <div class="scroll-top-btn opacity-0 transition-all">
  870.   <button
  871.     type="button"
  872.     class="bg-blue-500 p-2 fixed z-50 bottom-0 hover:-translate-y-2 transition-all right-0 m-10 rounded-full"
  873.   >
  874.     <svg
  875.       xmlns="http://www.w3.org/2000/svg"
  876.       class="h-6 w-6 text-white"
  877.       fill="none"
  878.       viewBox="0 0 24 24"
  879.       stroke="currentColor"
  880.       stroke-width="2"
  881.     >
  882.       <path
  883.         stroke-linecap="round"
  884.         stroke-linejoin="round"
  885.         d="M7 11l5-5m0 0l5 5m-5-5v12"
  886.       />
  887.     </svg>
  888.   </button>
  889. </div>
  892. {% endblock %}