{% extends 'base.html.twig' %} 
{% block title %}City Center {% endblock %} 
{% block body %}
<style>
.card{
    height:110px !important;
}
.cards-wrapper {
  display: flex;
  justify-content: center;
}
.card img {
  max-width: 100%;
  max-height: 100%;
}
.card {
  margin: 0 0.5em;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
  border: none;
  border-radius: 0;
}
.carousel-inner {
  padding: 1em;
}
.carousel-control-prev,
.carousel-control-next {
  background-color: #e1e1e1;
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 768px) {
  .card img {
    height: 11em;
  }
}
</style>
<header class="mobile">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="height:100%">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            {% for promotion in promotions %}
            <div class="carousel-item {% if loop.index == 1 %}active{% endif %}" style="background-image: url('{{ vich_uploader_asset(promotion, 'imagebFile') }}')"></div>
            {% endfor %}
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</header>
<div class="container">
    <section id="" class="fullscreen .d-xl-none mt-3">
        <div class="row">
            <div class="col-12">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="2000">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
                    </ol>
                    <div class="carousel-inner">
                        {% for ouverture in ouvertures %}
                        <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                            <img class="d-block w-100" src="{{ vich_uploader_asset(ouverture, 'imageFile') }}" alt="{{ouverture.name}}" style="height: 450px!important;">
                        </div>
                        {% endfor %}
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-6">
                <div id="carouselExample" class="carousel vert slide" data-ride="carousel" data-interval="2000">
                    <div class="carousel-inner">
                        {% for promotion in promotions %}
                        <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                            <img class="d-block mx-auto img-fluid" src="{{ vich_uploader_asset(promotion, 'imageFile') }}" alt="{{promotion.name}}" style="height:auto">
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div id="carouselExample" class="carousel verti slide" data-ride="carousel" data-interval="2000">
                    <div class="carousel-inner">
                        {% for video in videos %}
                        <div style="height:267px;" class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                            <video class="w-100" autoplay loop muted>
                                    {# <source src="https://mdbcdn.b-cdn.net/img/video/forest.mp4" type="video/mp4" /> #}
                                    <source class="d-block mx-auto " src="{{ vich_uploader_asset(video, 'imageFile') }}" type="video/mp4" alt="{{video.name}} style="height:auto"">
                                </vide>
                            </div>
                        {% endfor %}
                    </div>
                </div>
        </div>
    </div>
    </section>

    <section class="pub mobile">
        <div class="row ">
            <div class="col-6">
                <div id="carouselExample" class="carousel vert slide" data-ride="carousel" data-interval="2000">
                    <div class="carousel-inner">
                        {% for promotion in promotions %}
                        <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                            <img class="d-block mx-auto img-fluid" src="{{ vich_uploader_asset(promotion, 'imageFile') }}" alt="{{promotion.name}}" style="height:auto">
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div id="carouselExample" class="carousel verti slide" data-ride="carousel" data-interval="2000">
                    <div class="carousel-inner">
                        {% for video in videos %}
                        <div style="height:267px;" class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                            <video class="w-100" autoplay loop muted>
                                    {# <source src="https://mdbcdn.b-cdn.net/img/video/forest.mp4" type="video/mp4" /> #}
                                    <source class="d-block mx-auto " src="{{ vich_uploader_asset(video, 'imageFile') }}" type="video/mp4" alt="{{video.name}} style="height:auto"">
                                </vide>
                            </div>
                        {% endfor %}
                    </div>
                </div>
        </div>
    </section>
    {#
    <section class="p-4 section-mailing">
        <div class="container">
            <div class="news">
                <div class="row">
                    <div class="text-center col-lg-8 col-md-12 col-xs-12">
                        <h2>
                            <span style="font-weight: 600;">
									Inscrivez-vous
								</span>
                            <span style="font-weight: 400;">
									à la Newsletter pour ne manquer aucune
								</span>
                            <span style="font-weight: 600;">
									promo !</span>
                        </h2>
                    </div>
                    <div class="text-center col-lg-4 col-md-12 col-xs-12">
                        <div class="form">
                            <form class="sub d-flex">
                                <input class="form-control me-2 mr-3" type="Email" placeholder="Email" aria-label="Email">
                                <!-- <a href="#" class="btn"type="submit">Search</a> -->
                                <button class="btn" type="submit">
										S’inscrire</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> #}

    {# <section id="shopping">
        <div data-aos="fade-left">
            <img class="fullscreen w-100" src="{{asset('img/accueil/4.png')}}" alt="" style="border-radius: 15px;
					                            width: 100%;">
            <a href="{{path('shopping_index')}}" class="mobile">
                <img class="w-100" src="{{asset('img/accueil/Group 426.png')}}" alt="" style="border-radius: 15px;
					                                width: 100%;">
            </a>
            <div class="container">
                <button type="button" class="fullscreen btn zoom">
                    <a href="{{path('shopping_index')}}">Découvrez nos boutiques</a>
                </button>
            </div>
        </div>
    </section> #}
    <section id="shopping">
        <nav class="navbar navbar-expand-lg navbar-light bg-primary" id="navbar1">
            <div class="row">
                <div class="col-md-4">
                    <p style="font-size: 32px;font-weight:700;margin-bottom:0px !important;">Suivez nous</p> <p style="font-size:31px;margin-left:-79px;margin-bottom:0px !important; ">sur nos</p><p style="margin-bottom:0px !important; font-size:31px;margin-left: -79px;"> réseaux</p>
                    <div class="d-flex flex-row">
                        <div class="p-2">
                        <a class="nav-link" href="https://www.facebook.com/CityCenterAlgerie" target="_blank">
                            <img width ="50" style="margin-left: 53px;"src="{{asset('img/Groupe 93.png')}}" alt="">
                        </a></div>
                        <div class="p-2">
                        <a class="nav-link" href="https://www.instagram.com/citycenterdz/" target="_blank">
                            <img  width ="50" src="{{asset('img/Groupe 95.png')}}" alt="">
                        </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                   <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="cards-wrapper">
                                    <div class="card">
                                        <img src="{{asset('img/uploads/concours/cit-web.jpg')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/concours-évente-site-web1.png')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/concours-évente-site-web2.png')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/mobile-h.jpg')}} "  class="card-img-top" alt="...">
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="cards-wrapper">
                                    <div class="card">
                                        <img src="{{asset('img/uploads/concours/cit-web.jpg')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/concours-évente-site-web1.png')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/concours-évente-site-web2.png')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/mobile-h.jpg')}} "  class="card-img-top" alt="...">
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="cards-wrapper">
                                    <div class="card">
                                        <img src="{{asset('img/uploads/concours/cit-web.jpg')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/concours-évente-site-web1.png')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/concours-évente-site-web1.png')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/mobile-h.jpg')}} "  class="card-img-top" alt="...">
                                    </div>
                                </div>
                            </div>
                        </div>
                        {# <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a> #}
                        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                   <div id="carouselExampleControls1" class="carousel slide m" data-ride="carousel" style="    margin-left: -70px !important;">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="cards-wrapper">
                                    <div class="card">
                                        <img src="{{asset('img/uploads/concours/cit-web.jpg')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/concours-évente-site-web1.png')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/concours-évente-site-web2.png')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/mobile-h.jpg')}} "  class="card-img-top" alt="...">
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="cards-wrapper">
                                    <div class="card">
                                        <img src="{{asset('img/uploads/concours/cit-web.jpg')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/concours-évente-site-web1.png')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/concours-évente-site-web2.png')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/mobile-h.jpg')}} "  class="card-img-top" alt="...">
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="cards-wrapper">
                                    <div class="card">
                                        <img src="{{asset('img/uploads/concours/cit-web.jpg')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/concours-évente-site-web1.png')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/concours-évente-site-web1.png')}} "  class="card-img-top" alt="...">
                                    </div>
                                    <div class="card d-none d-md-block">
                                        <img src="{{asset('img/uploads/concours/mobile-h.jpg')}} "  class="card-img-top" alt="...">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleControls1" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        {# <a class="carousel-control-next" href="#carouselExampleControls1" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a> #}
                    </div>
                </div>  
            </div>
        </nav>
    </section>

    <section>
        <div class="row">
            <div class="col-md-4">
                <a href="{{path('shopping_index')}}">
                    <img class="w-100" src="{{asset('img/portfolio/Shopping@2x.png')}}" alt="" data-aos="zoom-in"  style="margin-top:26px">
                </a>
            </div>
            <div class="col-md-8">
                <a href="{{path('restos')}}">
                    <img class="w-100" src="{{asset('img/portfolio/Restos@2x.png')}}" alt="" data-aos="zoom-in" style="width: 100%!important;position:relative;height:280px;">
                </a>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-8 mt-3">
                <div>
                    <a href="{{path('loisir')}}">
                        <img class="w-100" src="{{asset('img/portfolio/Loisirs@2x.png')}}" alt="" data-aos="zoom-in"  style="width: 100%!important; position:relative; height:200px;">
                    </a>
                </div>
                <div class="mt-3">
                    <a href="{{path('service')}}">
                        <img class="w-100" src="{{asset('img/portfolio/Services@2x.png')}}" alt="" data-aos="zoom-in"  style="width: 100%!important; position:relative; height:200px;">
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="carefour">
                {% for hypermarche in hypermarches %}
                <a href="{{path('hypermarche_show', {'id': hypermarche.id}) }}">
                        <img class="w-100" src="{{asset('img/portfolio/Hypermarché@2x.png')}}" alt="" height="416px"; class="fullscreen zoom w-100" alt="" data-aos="zoom-in">

                    {# <img class="d-block w-100" src="{{ vich_uploader_asset(hypermarche, 'imageFile') }}" height="416px"; class="fullscreen zoom w-100" alt="" data-aos="zoom-in">
                    <img  src="{{ vich_uploader_asset(hypermarche, 'imageFile') }}" class="mobile w-100" alt="" data-aos="fade-right"> #}
                </a>
                {% endfor %} {#
                <a href="/hypermarche/carrefour.html">
                    <img src="{{asset('img/accueil/7.png')}}" class="fullscreen zoom w-100" alt="" data-aos="zoom-in">
                    <img src="{{asset('img/accueil/carrefour.png')}}" class="mobile w-100" alt="" data-aos="fade-right">
                </a> #}
            </div>
        </div>
    </section>

    <section class="servi" style="border-radius: 15px; height:100%; background-color: #FFF;">
        <div class="text-center">
            <div class="row">
                <div class="team-img">
                    <img class="img-fluid" src="{{asset('img/accueil/rectangle2.png')}}" alt="">
                </div>
                    <div style="margin-top: -121px;" class="col aos-init aos-animate" data-aos="zoom-in-up" data-aos-easing="ease-out-cubic" data-aos-duration="2000">
                        <img  width="91%" src="img/accueil/Groupe.png" alt="">
                    </div>
                    {# <div style="margin-top: -96px;" class="col aos-init aos-animate" data-aos="zoom-in-up" data-aos-easing="ease-out-cubic" data-aos-duration="2000">
                        <img src="img/accueil/icon/asce.png" alt="">
                        <p>Ascensseur</p>
                    </div>
                    <div style="margin-top: -96px;" class="col aos-init aos-animate" data-aos="zoom-in-up" data-aos-easing="ease-out-cubic" data-aos-duration="2000">
                        <img src="img/accueil/icon/parking.png" alt="">
                        <p>Parking intérieur extérieur</p>
                    </div>
                    <div style="margin-top: -96px;" class="col aos-init aos-animate" data-aos="zoom-in-up" data-aos-easing="ease-out-cubic" data-aos-duration="2000">
                        <img src="img/accueil/icon/rampe.png" alt="">
                        <p>Rampe</p>
                    </div>
                    <div style="margin-top: -96px;" class="col aos-init aos-animate" data-aos="zoom-in-up" data-aos-easing="ease-out-cubic" data-aos-duration="2000">
                        <img src="img/accueil/icon/chaise.png" alt="">
                        <p>Chaise massante</p>
                    </div>  #}
            </div>
        </div>
    </section>

    <section class="plan">
        <!-- <img class="w-100" src="{{asset('img/plan.png')}}" alt=""> -->
    </section>
    <section id="portfolio" class="portfolio">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
            <h2>Notre Centre en image</h2>
            </div>      
            <div class="row portfolio-container mt-3" data-aos="fade-up" data-aos-delay="200">
            <div class="col-lg-4 col-md-6 portfolio-item filter-app mt-2">
                <div class="portfolio-wrap">
                <img src="{{asset('img/portfolio/1')}}.jpg" class="img-fluid" alt="">
                <div class="portfolio-info">
                    <div class="portfolio-links">
                    <a href="{{asset('img/portfolio/1')}}.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 1"><i class="fa fa-plus"></i></a>
                    </div>
                </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-item filter-web mt-2">
                <div class="portfolio-wrap">
                <img src="{{asset('img/portfolio/2')}}.jpg" class="img-fluid" alt="">
                <div class="portfolio-info">
                    <div class="portfolio-links">
                    <a href="{{asset('img/portfolio/2')}}.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 3"><i class="fa fa-plus"></i></a> 
                    </div>
                </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-item filter-app mt-2">
                <div class="portfolio-wrap">
                <img src="{{asset('img/portfolio/3')}}.jpg" class="img-fluid" alt="">
                <div class="portfolio-info">
                    <div class="portfolio-links">
                    <a href="{{asset('img/portfolio/3')}}.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 2"><i class="fa fa-plus"></i></a>       
                    </div>
                </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-item filter-card mt-2">
                <div class="portfolio-wrap">
                <img src="{{asset('img/portfolio/4')}}.jpg" class="img-fluid" alt="">
                <div class="portfolio-info">
                    <div class="portfolio-links">
                    <a href="{{asset('img/portfolio/4')}}.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Card 2"><i class="fa fa-plus"></i></a>   
                    </div>
                </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-item filter-web mt-2">
                <div class="portfolio-wrap">
                <img src="{{asset('img/portfolio/5')}}.jpg" class="img-fluid" alt="">
                <div class="portfolio-info">
                    <div class="portfolio-links">
                    <a href="{{asset('img/portfolio/5')}}.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 2"><i class="fa fa-plus"></i></a>
                    
                    </div>
                </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-item filter-app mt-2">
                <div class="portfolio-wrap">
                <img src="{{asset('img/portfolio/6')}}.jpg" class="img-fluid" alt="">
                <div class="portfolio-info">
                    <div class="portfolio-links">
                    <a href="{{asset('img/portfolio/6')}}.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 3"><i class="fa fa-plus"></i></a>     
                    </div>
                </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-item filter-card mt-2">
                <div class="portfolio-wrap">
                <img src="{{asset('img/portfolio/7')}}.jpg" class="img-fluid" alt="">
                <div class="portfolio-info">
                    <div class="portfolio-links">
                    <a href="{{asset('img/portfolio/7')}}.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Card 1">
                    <i class="fa fa-plus"></i></a> 
                    </div>
                </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-item filter-card mt-2">
                <div class="portfolio-wrap">
                <img src="{{asset('img/portfolio/8')}}.jpg" class="img-fluid" alt="">
                <div class="portfolio-info">
                    <div class="portfolio-links">
                    <a href="{{asset('img/portfolio/8')}}.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Card 3"><i class="fa fa-plus"></i></a>    
                    </div>
                </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-item filter-web mt-2">
                <div class="portfolio-wrap">
                <img src="{{asset('img/portfolio/9')}}.jpg" class="img-fluid" alt="">
                <div class="portfolio-info">
                    <div class="portfolio-links">
                    <a href="{{asset('img/portfolio/9')}}.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 3"><i class="fa fa-plus"></i></a>
                    </div>
                </div>
                </div>
            </div>
            </div>
        </div>
    </section>
    <!-- End Portfolio Section -->
</div>
{% endblock %}
{% block javascripts %}
    <script>
$('#carousel-example').on('slide.bs.carousel', function (e) {
    /*
        CC 2.0 License Iatek LLC 2018 - Attribution required
    */
    var $e = $(e.relatedTarget);
    var idx = $e.index();
    var itemsPerSlide = 5;
    var totalItems = $('.carousel-item').length;
 
    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var i=0; i<it; i++) {
            // append slides to end
            if (e.direction=="left") {
                $('.carousel-item').eq(i).appendTo('.carousel-inner');
            }
            else {
                $('.carousel-item').eq(0).appendTo('.carousel-inner');
            }
        }
    }
});
    </script>
{% endblock %}