templates/vitrine/base.html.twig line 1
{% set route = app.request.attributes.get('_route', 'web_vitrine') %}
{% set _locale = locale(app.request.locale|default('fr')) %}
{% set _langpath = _locale == 'fr'? 'france.svg' : 'flag.svg'%}
<!doctype html>
<html lang="fr" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{% block title %}FilmAfrik{% endblock %} </title>
<meta name="description" content="{{"FilmAfrik, est un site web de streaming offre uniquement les films produit par les africains."|trans}}">
<meta name="keywords" content="FilmAfrik, streaming, film , séries, series">
<meta name="author" content="FilmAfrik">
<meta name="DC.title" content=" FilmAfrik">
<!-- Google Font Api KEY-->
<meta name="google_font_api" content="AIzaSyBG58yNdAjc20_8jAvLNSVi9E4Xhwjau_k">
<!-- Favicon -->
<link rel="shortcut icon" href="{{ asset('vitrine/images/favicon-filmafrik.ico') }}">
<!-- Library / Plugin Css Build -->
<link rel="stylesheet" href="{{ asset('vitrine/css/core/libs.min.css') }}">
<link rel="stylesheet" href="{{ asset('vitrine/librairies/intl/build/css/intlTelInput.css') }}">
<!-- font-awesome css -->
{# <link rel="stylesheet" href="{{ asset('app/vendor/toastr/toastr.min.css') }}"> #}
<link rel="stylesheet" href="{{ asset('app/vendor/sweetalert2/dist/sweetalert2.min.css') }}">
<link rel="stylesheet" href="{{ asset('app/vendor/select2/dist/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('vitrine/vendor/font-awesome/css/all.min.css') }}">
<!-- Iconly css -->
<link rel="stylesheet" href="{{ asset('vitrine/vendor/iconly/css/style.css') }}">
<!-- Animate css -->
<link rel="stylesheet" href="{{ asset('vitrine/vendor/animate.min.css') }}">
<!-- SwiperSlider css -->
<link rel="stylesheet" href="{{ asset('vitrine/vendor/swiperSlider/swiper.min.css') }}">
<!-- Streamit Design System Css -->
<link rel="stylesheet" href="{{ asset('vitrine/css/streamit.min.css?v=1.0.0') }}">
<!-- Custom Css -->
<link rel="stylesheet" href="{{ asset('vitrine/css/custom.min.css?v=1.0.0') }}">
<!-- Rtl Css -->
<link rel="stylesheet" href="{{ asset('vitrine/css/rtl.min.css?v=1.0.0') }}">
<link rel="stylesheet" href="{{ asset('app/css/urban.formvalidation.css') }}">
{# <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"> #}
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300&display=swap" rel="stylesheet">
<style>
.indicator-progress{display: none;}
[data-kt-indicator=on] > .indicator-progress {display: inline-block;}
[data-kt-indicator=on] > .indicator-label {display: none;}
.full-button .btn {
width: 100%;
}
hr{
border: red solid 1px;
}
#search-offcanvas{
margin-top: 75px;
width: 80%;
}
@media(max-width: 1199px){
#search-offcanvas {
margin-top: 190px;
}
}
</style>
{% block stylesheets %}{% endblock %}
</head>
<body class=" ">
<span class="screen-darken"></span>
<!-- loader Start -->
<!-- loader Start -->
<div class="loader simple-loader">
<div class="loader-body">
{# <img src="{{ asset('vitrine/images/loader.gif') }}" alt="loader" class="img-fluid " width="300"> #}
<img src="{{ asset('vitrine/images/logo-filmafrik.webp') }}" alt="loader" class="img-fluid " width="300">
</div>
</div>
<!-- loader END --> <!-- loader END -->
<main class="main-content">
<!--Nav Start-->
<header class="header-center-home header-default header-sticky">
<nav class="nav navbar navbar-expand-xl navbar-light iq-navbar header-hover-menu py-xl-0">
<div class="container-fluid navbar-inner">
<div class="d-flex align-items-center justify-content-between w-100 landing-header">
<div class="d-flex gap-3 gap-xl-0 align-items-center">
<div>
<button type="button" data-bs-toggle="offcanvas" data-bs-target="#navbar_main"
aria-controls="navbar_main"
class="d-xl-none btn bg-primary rounded-pill p-1 pt-0 toggle-rounded-btn">
<svg width="20px" class="icon-20" viewBox="0 0 24 24">
<path fill="currentColor"
d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg>
</button>
</div>
<!--Logo -->
<div class="logo-default">
<a class="navbar-brand text-primary" href="{{path('web_vitrine')}}">
<img class="img-fluid logo filmAfrik" src="{{ asset('vitrine/images/logo-filmafrik.webp') }}" loading="lazy" alt="FILMAFRIK" />
</a>
</div>
<div class="logo-hotstar">
<a class="navbar-brand text-primary" href="{{path('web_vitrine')}}">
<img class="img-fluid logo" src="{{ asset('vitrine/images/logo-filmafrik.webp') }}" loading="lazy" alt="FILMAFRIK" />
</a>
</div>
<div class="logo-prime">
<a class="navbar-brand text-primary" href="{{path('web_vitrine')}}">
<img class="img-fluid logo" src="{{ asset('vitrine/images/logo-filmafrik.webp') }}" loading="lazy" alt="FILMAFRIK" />
</a>
</div>
<div class="logo-hulu">
<a class="navbar-brand text-primary" href="{{path('web_vitrine')}}">
<img class="img-fluid logo" src="{{ asset('vitrine/images/logo-filmafrik.webp') }}" loading="lazy" alt="FILMAFRIK" />
</a>
</div>
</div>
<nav id="navbar_main" class="offcanvas mobile-offcanvas nav navbar navbar-expand-xl hover-nav horizontal-nav mega-menu-content py-xl-0">
<div class="container-fluid p-lg-0">
<div class="offcanvas-header px-0">
<div class="navbar-brand ms-3">
<!--Logo -->
<div class="logo-default">
<a class="navbar-brand text-primary" href="{{path('web_vitrine')}}">
<img class="img-fluid logo" src="{{ asset('vitrine/images/logo-filmafrik.webp') }}" loading="lazy" alt="FILMAFRIK" />
</a>
</div>
<div class="logo-hotstar">
<a class="navbar-brand text-primary" href="{{path('web_vitrine')}}">
<img class="img-fluid logo" src="{{ asset('vitrine/images/logo-filmafrik.webp') }}" loading="lazy" alt="FILMAFRIK" />
</a>
</div>
<div class="logo-prime">
<a class="navbar-brand text-primary" href="{{path('web_vitrine')}}">
<img class="img-fluid logo" src="{{ asset('vitrine/images/logo-filmafrik.webp') }}" loading="lazy" alt="FILMAFRIK" />
</a>
</div>
<div class="logo-hulu">
<a class="navbar-brand text-primary" href="{{path('web_vitrine')}}">
<img class="img-fluid logo" src="{{ asset('vitrine/images/logo-filmafrik.webp') }}" loading="lazy" alt="FILMAFRIK" />
</a>
</div>
</div>
<button type="button" class="btn-close float-end px-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<ul class="navbar-nav iq-nav-menu list-unstyled" id="header-menu">
<li class="nav-item">
<a class="nav-link {{ menu(route, 'web_vitrine') }}" href="{{path('web_vitrine')}}" >
<span class="item-name">{{"Accueil"|trans}}</span>
{# <span class="menu-icon">
<i class="fa fa-caret-down toggledrop-desktop right-icon" aria-hidden="true"></i>
<span class="toggle-menu">
<i class="fa fa-plus arrow-active text-white" aria-hidden="true"></i>
<i class="fa fa-minus arrow-hover text-white" aria-hidden="true"></i>
</span>
</span> #}
</a>
{# <ul class="sub-nav mega-menu-item collapse justify-content-center list-unstyled" id="homePages">
<li class="nav-item">
<a class="nav-link p-0 active" href="{{path('web_vitrine')}}">
<img src="{{ asset('vitrine/images/mega-menu/new-home.webp') }}" alt="img" class="img-fluid d-xl-block d-none">
<span class="d-inline-block ">OTT Home</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-0 " href="./home.html">
<img src="{{ asset('vitrine/images/mega-menu/home.webp') }}" alt="img" class="img-fluid d-xl-block d-none">
<span class="d-inline-block ">Home</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-0 " href="./movie.html">
<img src="{{ asset('vitrine/images/mega-menu/movie.webp') }}" alt="img" class="img-fluid d-xl-block d-none">
<span class="d-inline-block ">Movie</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-0 " href="./tv-show.html">
<img src="{{ asset('vitrine/images/mega-menu/tv-show.webp') }}" alt="img" class="img-fluid d-xl-block d-none">
<span class="d-inline-block ">TV Show</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-0 " href="./video.html">
<img src="{{ asset('vitrine/images/mega-menu/video.webp') }}" alt="img" class="img-fluid d-xl-block d-none">
<span class="d-inline-block ">Video</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-0 " href="./merchandise-store.html">
<img src="{{ asset('vitrine/images/mega-menu/shop-home.webp') }}" alt="img" class="img-fluid d-xl-block d-none">
<span class="d-inline-block ">Merchandise Store</span>
</a>
</li>
</ul> #}
</li>
<li class="nav-item">
<a class="nav-link {{ menu(route, 'web_view_all_serie') }}" href="{{path('web_view_all_serie')}}" >
<span class="item-name">{{"Séries" | trans}}</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link {{ menu(route, 'web_view_all_movie') }}" href="{{path('web_view_all_movie')}}" >
<span class="item-name">{{"Films" | trans}}</span>
</a>
</li>
{# <li class="nav-item">
<a class="nav-link" href="{{path('web_pricing')}}">
<span class="item-name">{{"Pricing plan" | trans}}</span>
</a>
</li> #}
<li class="nav-item">
<a class="nav-link {{ menu(route, 'web_live') }}" href="{{path('web_live')}}" >
<span class="item-name">{{"Diffusion" | trans}}</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link {{ menu(route, 'web_view_all_casting') }}" href="{{path('web_view_all_casting')}}" >
<span class="item-name">{{"Casting" | trans}}</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link {{ menu(route, 'web_contact') }}" href="{{path('web_contact')}}">
<span class="item-name">{{"Contact" | trans}}</span>
</a>
</li>
{% if not app.user %}
<li class="nav-item" style="margin-left: 2em; margin-right: 0em;">
<a class="nav-link call-register" href="{{path('web_register_index')}}" id="call-register" style="padding-right: 0.5em;">
<span class="item-name">{{"S'inscrire" | trans}}</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link call-login" href="{{path('app_login')}}" id="call-login" style="padding-left: 0.5em;">
<span class="item-name">{{"Connexion" | trans}}</span>
</a>
</li>
{% endif %}
{# <li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#features" role="button" aria-expanded="false" aria-controls="homePages">
<span class="item-name">Features</span>
<span class="menu-icon">
<i class="fa fa-caret-down toggledrop-desktop right-icon" aria-hidden="true"></i>
<span class="toggle-menu">
<i class="fa fa-plus arrow-active text-white" aria-hidden="true"></i>
<i class="fa fa-minus arrow-hover text-white" aria-hidden="true"></i>
</span>
</span>
</a>
<ul class="sub-nav collapse list-unstyled" id="features">
<li class="nav-item">
<a class="nav-link " href="./restricted-content.html"> Restricted Content </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./related-merchandise.html"> Related Merchandise </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./playlist.html"> Playlist </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./geners.html"> Geners </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./cast.html"> Cast </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./tags.html"> Tags </a>
</li>
</ul>
</li> #}
{# <li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#pages" role="button" aria-expanded="false" aria-controls="homePages">
<span class="item-name">Pages</span>
<span class="menu-icon">
<i class="fa fa-caret-down toggledrop-desktop right-icon" aria-hidden="true"></i>
<span class="toggle-menu">
<i class="fa fa-plus arrow-active text-white" aria-hidden="true"></i>
<i class="fa fa-minus arrow-hover text-white" aria-hidden="true"></i>
</span>
</span>
</a>
<ul class="sub-nav collapse list-unstyled" id="pages">
<li class="nav-item">
<a class="nav-link " href="./about-us.html"> About Us </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./contact-us.html"> Contact Us </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./faq.html"> FAQ </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./privacy-policy.html"> Privacy Policy </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./pricing-plan.html"> Pricing Plan </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./coming-soon.html"> Coming Soon </a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#error-page" role="button" aria-expanded="false" aria-controls="error-page">
<span class="item-name">Error Page</span>
<span class="menu-icon">
<i class="fa fa-caret-right toggledrop-desktop right-icon" aria-hidden="true"></i>
<span class="toggle-menu">
<i class="fa fa-plus arrow-active text-white" aria-hidden="true"></i>
<i class="fa fa-minus arrow-hover text-white" aria-hidden="true"></i>
</span>
</span>
</a>
<ul class="sub-nav collapse list-unstyled" id="error-page">
<li class="nav-item">
<a class="nav-link " href="./error-page-one.html"> Error Page 1 </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./error-page-two.html"> Error Page 2 </a>
</li>
</ul>
</li>
</ul>
</li> #}
{# <li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#blog" role="button" aria-expanded="false" aria-controls="blog">
<span class="item-name">Blog</span>
<span class="menu-icon">
<i class="fa fa-caret-down toggledrop-desktop right-icon" aria-hidden="true"></i>
<span class="toggle-menu">
<i class="fa fa-plus arrow-active text-white" aria-hidden="true"></i>
<i class="fa fa-minus arrow-hover text-white" aria-hidden="true"></i>
</span>
</span>
</a>
<ul class="sub-nav collapse list-unstyled" id="blog">
<li class="nav-item">
<a class="nav-link " href="./blog/blog-listing.html"> Listing </a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#blog-grid" role="button" aria-expanded="false" aria-controls="blog-grid">
<span class="item-name">Blog Grid</span>
<span class="menu-icon">
<i class="fa fa-caret-right toggledrop-desktop right-icon" aria-hidden="true"></i>
<span class="toggle-menu">
<i class="fa fa-plus arrow-active text-white" aria-hidden="true"></i>
<i class="fa fa-minus arrow-hover text-white" aria-hidden="true"></i>
</span>
</span>
</a>
<ul class="sub-nav collapse list-unstyled" id="blog-grid">
<li class="nav-item">
<a class="nav-link " href="./blog/one-column.html"> 1 Column </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./blog/two-column.html"> 2 Column </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./blog/three-column.html"> 3 Column </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./blog/four-column.html"> 4 Column </a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#blog-sidebar" role="button" aria-expanded="false" aria-controls="blog-sidebar">
<span class="item-name">Blog Sidebar</span>
<span class="menu-icon">
<i class="fa fa-caret-right toggledrop-desktop right-icon" aria-hidden="true"></i>
<span class="toggle-menu">
<i class="fa fa-plus arrow-active text-white" aria-hidden="true"></i>
<i class="fa fa-minus arrow-hover text-white" aria-hidden="true"></i>
</span>
</span>
</a>
<ul class="sub-nav collapse list-unstyled" id="blog-sidebar">
<li class="nav-item">
<a class="nav-link " href="./blog/left-sidebar.html"> Left Sidebar </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./blog/right-sidebar.html"> Right Sidebar </a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#blog-single" role="button" aria-expanded="false" aria-controls="blog-single">
<span class="item-name">Blog Single</span>
<span class="menu-icon">
<i class="fa fa-caret-right toggledrop-desktop right-icon" aria-hidden="true"></i>
<span class="toggle-menu">
<i class="fa fa-plus arrow-active text-white" aria-hidden="true"></i>
<i class="fa fa-minus arrow-hover text-white" aria-hidden="true"></i>
</span>
</span>
</a>
<ul class="sub-nav collapse list-unstyled" id="blog-single">
<li class="nav-item">
<a class="nav-link " href="./blog/blog-template.html"> Blog Template </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./blog/blog-detail.html"> Standard </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./blog/blog-audio.html"> Audio </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./blog/blog-video.html"> Video </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./blog/blog-link.html"> Link </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./blog/blog-quote.html"> Quote </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./blog/blog-gallery.html"> Gallery </a>
</li>
</ul>
</li>
</ul>
</li> #}
{# <li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#shop" role="button" aria-expanded="false" aria-controls="shop">
<span class="item-name">Shop</span>
<span class="menu-icon">
<i class="fa fa-caret-down toggledrop-desktop right-icon" aria-hidden="true"></i>
<span class="toggle-menu">
<i class="fa fa-plus arrow-active text-white" aria-hidden="true"></i>
<i class="fa fa-minus arrow-hover text-white" aria-hidden="true"></i>
</span>
</span>
</a>
<ul class="sub-nav collapse list-unstyled" id="shop">
<li class="nav-item">
<a class="nav-link " href="./shop/shop.html"> Shop </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./shop/my-account.html"> My Account Page </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./shop/cart.html"> Cart Page </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./shop/wishlist.html"> Wishlist Page </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./shop/checkout.html"> Checkout Page </a>
</li>
<li class="nav-item">
<a class="nav-link " href="./shop/order-tracking.html"> Order Tracking </a>
</li>
</ul>
</li> #}
</ul>
</div>
<!-- container-fluid.// -->
</nav>
<div class="right-panel">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-btn">
<span class="navbar-toggler-icon"></span>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav align-items-center ms-auto mb-2 mb-xl-0">
<li class="nav-item theme-scheme-dropdown dropdown">
<a href="{{path(route, app.request.get('_route_params')|default([])|merge({'_locale':_locale}))}}" class="nav-link" id="mode-drop" data-bs-toggle="dropdown">
<img class="rounded" src="{{asset(_langpath,'flags')}}" width="14" alt="en"/>
</a>
<ul class="list-unstyled dropdown-menu dropdown-content" style="min-width:min-content">
<li data-setting="radio">
<a href="{{path(route, app.request.get('_route_params')|default([])|merge({'_locale':'fr'}))}}">
<div class="dropdown-item d-flex align-items-center text-primary">
<img class="rounded" src="{{asset('france.svg','flags')}}" width="14" alt="fr"/>
<span class="mx-2 mb-0">{{"Fr"|trans}}</span>
</div>
</a>
</li>
<li data-setting="radio">
<a href="{{path(route, app.request.get('_route_params')|default([])|merge({'_locale':'en'}))}}">
<div class="dropdown-item d-flex align-items-center text-primary">
<img class="rounded" src="{{asset('flag.svg','flags')}}" width="14" alt="en"/>
<span class="mx-2 mb-0">{{"En"|trans}}</span>
</div>
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown iq-responsive-menu">
<div class="search-box">
<a href="#" class="nav-link p-0" id="search-drop" data-bs-toggle="dropdown">
<div class="btn-icon btn-sm rounded-pill btn-action">
<span class="btn-inner">
<svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="11.7669" cy="11.7666" r="8.98856" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
</circle>
<path d="M18.0186 18.4851L21.5426 22" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
</path>
</svg>
</span>
</div>
</a>
<ul class="dropdown-menu p-0 dropdown-search m-0 iq-search-bar" style="width: 20rem;">
<li class="p-0">
<div class="form-group input-group mb-0">
<input type="text" class="form-control border-0" placeholder="{{"Recherche..."|trans}}" id="search-input">
<button type="submit" class="search-submit">
<svg class="icon-15" width="15" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="11.7669" cy="11.7666" r="8.98856" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
</circle>
<path d="M18.0186 18.4851L21.5426 22" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
</path>
</svg>
</button>
</div>
</li>
</ul>
</div>
</li>
<li class="nav-item dropdown" id="itemdropdown1">
{% if app.user %}
<a class="nav-link d-flex align-items-center" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<div class="btn-icon rounded-pill user-icons">
<span class="btn-inner">
<svg class="icon-18" width="18" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.87651 15.2063C6.03251 15.2063 2.74951 15.7873 2.74951 18.1153C2.74951 20.4433 6.01251 21.0453 9.87651 21.0453C13.7215 21.0453 17.0035 20.4633 17.0035 18.1363C17.0035 15.8093 13.7415 15.2063 9.87651 15.2063Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.8766 11.886C12.3996 11.886 14.4446 9.841 14.4446 7.318C14.4446 4.795 12.3996 2.75 9.8766 2.75C7.3546 2.75 5.3096 4.795 5.3096 7.318C5.3006 9.832 7.3306 11.877 9.8456 11.886H9.8766Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"></path>
<path d="M19.2036 8.66919V12.6792" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M21.2497 10.6741H17.1597" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-user border-0 p-0 m-0"
aria-labelledby="navbarDropdown">
<li class="user-info d-flex align-items-center gap-3 mb-3">
<img src="{{ asset(app.user.profilePhoto, 'avatar') }}" class="img-fluid" alt="" loading="lazy">
<span class="font-size-14 fw-500 text-capitalize text-white">
<h6 class="mb-0 font-size-14 fw-normal">{{app.user.firstname}}</h6>
<h6 class="mb-0 font-size-12 fw-normal">{{app.user.email}}</h6>
</span>
</li>
{% if permission('DASH0', app.user) %}
<li>
<a href="{{path('web_dashboard_index')}}" class="iq-sub-card d-flex align-items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 22" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.84455 20.6621C4.15273 20.6621 1 20.0876 1 17.7868C1 15.486 4.13273 13.3621 7.84455 13.3621C11.5364 13.3621 14.6891 15.4654 14.6891 17.7662C14.6891 20.066 11.5564 20.6621 7.84455 20.6621Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.83725 10.1738C10.26 10.1738 12.2236 8.21015 12.2236 5.78742C12.2236 3.36469 10.26 1.40015 7.83725 1.40015C5.41452 1.40015 3.44998 3.36469 3.44998 5.78742C3.4418 8.20196 5.3918 10.1656 7.80634 10.1738C7.81725 10.1738 7.82725 10.1738 7.83725 10.1738Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<h6 class="mb-0 font-size-14 fw-normal">{{"Tableau de board"|trans}}</h6>
</a>
</li>
{% endif %}
<li>
<a href="{{path('web_account',{'edit':1})}}" class="iq-sub-card d-flex align-items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 22" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.84455 20.6621C4.15273 20.6621 1 20.0876 1 17.7868C1 15.486 4.13273 13.3621 7.84455 13.3621C11.5364 13.3621 14.6891 15.4654 14.6891 17.7662C14.6891 20.066 11.5564 20.6621 7.84455 20.6621Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.83725 10.1738C10.26 10.1738 12.2236 8.21015 12.2236 5.78742C12.2236 3.36469 10.26 1.40015 7.83725 1.40015C5.41452 1.40015 3.44998 3.36469 3.44998 5.78742C3.4418 8.20196 5.3918 10.1656 7.80634 10.1738C7.81725 10.1738 7.82725 10.1738 7.83725 10.1738Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<h6 class="mb-0 font-size-14 fw-normal">{{"Mon compte"|trans}}</h6>
</a>
</li>
<li>
<a href="{{path('web_account')}}" class="iq-sub-card d-flex align-items-center gap-3">
<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m0 0h24v24h-24z" fill="#fff" opacity="0"
transform="matrix(-1 0 0 -1 24 24)" />
<path
d="m19 11h-6v-6a1 1 0 0 0 -2 0v6h-6a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2z"
fill="currentColor" />
</svg>
<h6 class="mb-0 font-size-14 fw-normal">{{"Liste de lecture"|trans}}</h6>
</a>
</li>
<li>
<a href="{{path('app_logout')}}"
class="iq-sub-card iq-logout-2 mt-1 d-flex justify-content-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path
d="M1.82209 15.9999C1.46654 15.9999 1.16283 15.874 0.910981 15.6221C0.659129 15.3703 0.533203 15.0666 0.533203 14.711V1.73322C0.533203 1.37767 0.659129 1.07397 0.910981 0.822114C1.16283 0.570262 1.46654 0.444336 1.82209 0.444336H7.95543V1.44434H1.82209C1.74802 1.44434 1.68135 1.47397 1.62209 1.53322C1.56283 1.59248 1.5332 1.65915 1.5332 1.73322V14.711C1.5332 14.7851 1.56283 14.8517 1.62209 14.911C1.68135 14.9703 1.74802 14.9999 1.82209 14.9999H7.95543V15.9999H1.82209ZM12.0888 11.5999L11.3554 10.8888L13.5332 8.73322H5.68876V7.711H13.511L11.3332 5.55545L12.0665 4.82211L15.4665 8.24434L12.0888 11.5999Z"
fill="currentColor"></path>
</svg>
<h6 class="mb-0 font-size-14 fw-normal">{{"Déconnexion"|trans}}</h6>
</a>
</li>
</ul>
{% else %}
<a class="nav-link d-flex align-items-center" href="{{path('app_login')}}" id="login-customer" role="button">
<div class="btn-icon rounded-pill user-icons">
<span class="btn-inner">
<svg class="icon-18" width="18" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.87651 15.2063C6.03251 15.2063 2.74951 15.7873 2.74951 18.1153C2.74951 20.4433 6.01251 21.0453 9.87651 21.0453C13.7215 21.0453 17.0035 20.4633 17.0035 18.1363C17.0035 15.8093 13.7415 15.2063 9.87651 15.2063Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.8766 11.886C12.3996 11.886 14.4446 9.841 14.4446 7.318C14.4446 4.795 12.3996 2.75 9.8766 2.75C7.3546 2.75 5.3096 4.795 5.3096 7.318C5.3006 9.832 7.3306 11.877 9.8456 11.886H9.8766Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"></path>
<path d="M19.2036 8.66919V12.6792" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M21.2497 10.6741H17.1597" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</a>
{% endif %}
</li>
{# <li class="nav-item dropdown iq-responsive-menu">
<div class="movie-detail-select ">
<select name="movieselect" id="lang" class="form-control movie-select select2-basic-single js-states">
<option value="1">{{"Fr"| trans}}</option>
<option value="2">{{"En"| trans}}</option>
</select>
</div>
</li> #}
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
<!--Nav End-->
<!--bread-crumb-->
<!--bread-crumb-->
{% block body %}{% endblock %}
<!-- <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#connexion-modal">Modal</button> -->
<footer class="footer footer-default">
<div class="container-fluid">
<div class="footer-top">
<div class="row">
<div class="col-xl-3 col-lg-6 mb-5 mb-lg-0">
<div class="footer-logo">
<!--Logo -->
<div class="logo-default">
<a class="navbar-brand text-primary" href="{{path('web_vitrine')}}">
<img class="img-fluid logo filmAfrik" src="{{ asset('vitrine/images/logo-filmafrik.webp') }}" loading="lazy" alt="FILMAFRIK" />
</a>
</div>
<div class="logo-hotstar">
<a class="navbar-brand text-primary" href="{{path('web_vitrine')}}">
<img class="img-fluid logo filmAfrik" src="{{ asset('vitrine/images/logo-filmafrik.webp') }}" loading="lazy" alt="FILMAFRIK" />
</a>
</div>
<div class="logo-prime">
<a class="navbar-brand text-primary" href="{{path('web_vitrine')}}">
<img class="img-fluid logo filmAfrik" src="{{ asset('vitrine/images/logo-filmafrik.webp') }}" loading="lazy" alt="FILMAFRIK" />
</a>
</div>
<div class="logo-hulu">
<a class="navbar-brand text-primary" href="{{path('web_vitrine')}}">
<img class="img-fluid logo filmAfrik" src="{{ asset('vitrine/images/logo-filmafrik.webp') }}" loading="lazy" alt="FILMAFRIK" />
</a>
</div>
</div>
<p class="mb-4 font-size-14">{{"Email"|trans}} : <span class="text-white">customer@filmafrik.com</span>
</p>
<p class="text-uppercase letter-spacing-1 font-size-14 mb-1">{{"Service clientèl"|trans}}</p>
<p class="mb-0 contact text-white">+ (480) 555-0103</p>
</div>
<div class="col-xl-2 col-lg-6 mb-5 mb-lg-0">
<h4 class="footer-link-title">{{"Autres liens"|trans}}</h4>
<ul class="list-unstyled footer-menu">
{# <li class="mb-3">
<a href="./about-us.html" class="ms-3">about us</a>
</li> #}
{# <li class="mb-3">
<a href="./blog/blog-listing.html" class="ms-3">Blog</a>
</li> #}
{# <li class="mb-3">
<a href="{{path('web_pricing')}}" class="ms-3">Pricing Plan</a>
</li> #}
<li>
<a href="{{path('web_faq')}}" class="ms-3">FAQ</a>
</li>
</ul>
</div>
<div class="col-xl-2 col-lg-6 mb-5 mb-lg-0">
<h4 class="footer-link-title">Tendances</h4>
<ul class="list-unstyled footer-menu">
<li class="mb-3">
<a href="{{path('web_top_trending')}}" class="ms-3">{{"Nouvelles"|trans }}</a>
</li>
<li class="mb-3">
<a href="{{path('web_view_all_movie')}}" class="ms-3">{{"Recommandés"|trans }}</a>
</li>
<li class="mb-3">
<a href="{{path('web_view_all_movie')}}" class="ms-3">{{"Populaires"| trans}}</a>
</li>
<li>
<a href="{{path('web_view_all_casting')}}" class="ms-3">{{"Casting"| trans}}</a>
</li>
</ul>
</div>
<div class="col-xl-2 col-lg-6 mb-5 mb-lg-0">
<h4 class="footer-link-title">FilmAfrik</h4>
<ul class="list-unstyled footer-menu">
<li class="mb-3">
<a href="{{path('web_contact')}}" class="ms-3">{{"Nous contacter"|trans }}</a>
</li>
<li class="mb-3">
<a href="{{path('web_privacy_policy')}}" class="ms-3">{{"Politique de confidentialités"|trans }}</a>
</li>
<li>
<a href="{{path('web_terms_of_us')}}" class="ms-3">{{"Condtions d'utilisations"|trans }}</a>
</li>
</ul>
</div>
<div class="col-xl-3 col-lg-6">
<h4 class="footer-link-title">{{"Ne ratez pas nos actualités"|trans }}</h4>
<div class="mailchimp mailchimp-dark">
<div class="input-group mb-3 mt-4">
<input type="text" class="form-control mb-0 font-size-14" placeholder="Email*" aria-describedby="button-addon2">
<div class="iq-button">
<button type="submit" class="btn btn-sm" id="button-addon2">{{"S'abonner"|trans}}</button>
</div>
</div>
</div>
<div class="d-flex align-items-center mt-5">
<span class="font-size-14 me-2">Follow Us:</span>
<ul class="p-0 m-0 list-unstyled widget_social_media">
<li class="">
<a href="https://www.facebook.com/" class="position-relative">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="">
<a href="https://twitter.com/" class="position-relative">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="">
<a href="https://github.com/" class="position-relative">
<i class="fab fa-github"></i>
</a>
</li>
<li class="">
<a href="https://www.instagram.com/" class="position-relative">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-12">
<p class="font-size-14">© <span class="currentYear"></span> <span class="text-primary">FILMAFRIK</span>. All Rights Reserved.
</div>
</div>
</div>
<div class="footer-bottom border-top hidden">
<div class="row align-items-center">
<div class="col-md-6">
<ul class="menu list-inline p-0 d-flex flex-wrap align-items-center">
<li class="menu-item">
<a href="{{path('web_terms_of_us')}}"> Terms Of Use </a>
</li>
<li id="menu-item-7316" class="menu-item">
<a href="{{path('web_privacy_policy')}}"> Privacy-Policy </a>
</li>
<li class="menu-item">
<a href="{{path('web_faq')}}"> FAQ </a>
</li>
<li class="menu-item">
<a href="{{path('web_account')}}"> Watch List </a>
</li>
</ul>
<p class="font-size-14">© <span class="currentYear"></span> <span class="text-primary">FILMAFRIK</span>. All Rights Reserved. All videos and shows on this platform are trademarks of, and all related images and content are the property of, FILMAFRIK Inc. Duplication and copy of this is strictly prohibited. All rights reserved. </p>
</div>
<div class="col-md-3"></div>
<div class="col-md-3">
<h6 class="font-size-14 pb-1">Download FILMAFRIK Apps </h6>
<div class="d-flex align-items-center">
<a class="app-image" href="#">
<img src="{{ asset('vitrine/images/footer/google-play.webp') }}" loading="lazy" alt="play-store" />
</a>
<br />
<a class="ms-3 app-image" href="#">
<img src="{{ asset('vitrine/images/footer/apple.webp') }}" loading="lazy" alt="app-store" />
</a>
</div>
</div>
</div>
</div>
</div>
</footer>
<div class="offcanvas offcanvas-end offcanvas-width-80" tabindex="-1" id="search-offcanvas" aria-labelledby="search-offcanvas-lable">
<div class="offcanvas-header">
<h5>{{"Résultats"|trans}} <span id="count-search"></span></h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
aria-label="Close" id="search-offcanvas-close"></button>
</div>
<div class="offcanvas-body" id="search-offcanvas-body">
</div>
</div>
{% if not app.user %}
<div class="modal fade" id="connexion-modal" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header justify-content-between p-4">
<h5 class="modal-title">{{"Connexion"|trans}}</h5>
<button type="button" class="btn-close" style="position: initial;" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<form id="kt_sign_in_form" class="" data-action="{{path('app_login')}}" method="POST" novalidate="novalidate">
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
<div class="fv-row mb-3">
<input type="text" name="email" placeholder="{{'E-mail'|trans}}" class="form-control rounded-0" required="">
</div>
<div class="fv-row mb-3">
<input type="password" name="password" placeholder="{{'Mot de passe'|trans}}" class="form-control rounded-0" required="">
</div>
<div class="text-end mb-3">
<a href="{{path('app_forgot_password_request')}}" class="text-primary fw-semibold fst-italic">{{"Mot de passe oublié ?" | trans}}</a>
</div>
<div class="full-button">
<div class="iq-button">
<button type="submit" class="btn text-uppercase position-relative">
{{"Se connecter" | trans}}
<span class="indicator-label"><i class="fa-solid fa-play ms-2"></i></span>
<span class="indicator-progress">
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
</div>
</div>
<p class="mt-2 text-center fw-500 text-white">{{"Nouveau sur Film Afrique ?" | trans}} <a href="{{path('web_register_index')}}" id="call-register" class="text-primary ms-1 call-register">{{"Créer un compte" | trans}}</a></p>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="register-modal" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered mw-650px" role="document">
<div class="modal-content">
<div class="modal-header justify-content-between p-4">
<h5 class="modal-title">{{"Créez votre compte"|trans}}</h5>
<button type="button" class="btn-close" style="position: initial;" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<form data-action="{{path('app_register')}}" method="POST" novalidate="novalidate">
<input type="hidden" name="_csrf_token" value="{{ csrf_token('sign-up-filmafrik') }}">
<div class="row row-cols-1 row-cols-lg-2">
<div class="fv-row col mb-3">
<input type="text" placeholder="{{'Prénoms'|trans}}" name="first-name" class="form-control rounded-0" required="">
</div>
<div class="fv-row col mb-3">
<input type="text" name="last-name" placeholder="{{"Nom"|trans}}" class="form-control rounded-0" required="">
</div>
<div class="fv-row col mb-3">
<input type="tel" name="phone" placeholder="{{"Téléphone"|trans}} *" id="phone" class="form-control rounded-0 tel" required="">
</div>
<div class="fv-row col mb-3">
<input type="email" name="email" placeholder="{{"Email *"|trans}}" class="form-control rounded-0" required="">
</div>
<div class="fv-row col mb-3">
<input type="password" name="password" placeholder="{{"Mot de passe"|trans}} *" class="form-control rounded-0" required="">
</div>
<div class="fv-row col mb-3">
<input type="password" placeholder="{{"Confirmer le mot de passe"|trans}} *" name="confirm-password" class="form-control rounded-0" required="">
</div>
<small class="w-100 mb-3" class="text-muted">{{"Utilisez 8 caractères ou plus avec un mélange de lettres, de chiffres et de symboles."|trans}}</small>
</div>
<div class="fv-row mb-3 form-check">
<input id="flexCheck" class="form-check-input" name="toc" value="1" type="checkbox">
<label class="form-check-label" for="flexCheck">
{{"J'ai lu et j'accepte" | trans}} <a href="terms-of-use.html" class="ms-1">{{" les termes et conditions" | trans}} *</a>
</label>
</div>
<div class="full-button">
<div class="iq-button">
<button type="submit" class="btn text-uppercase position-relative">
{{"S'inscrire" | trans}}
<span class="indicator-label"><i class="fa-solid fa-play ms-2"></i></span>
<span class="indicator-progress">
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
</div>
<p class="mt-2 mb-0 fw-normal text-center">{{"Vous avez déjà un compte ?" | trans}}<a href="{{path('app_login')}}" id="call-login" class="ms-1 call-login">{{"Se connecter" | trans}}</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
{% endif %}
<div class="modal fade" id="purchase-modal" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body px-4 pb-0">
<form id="kt_purchase_in_form" class="section-form py-3" data-action="{{path('app_purchase_payment')}}" method="POST" novalidate="novalidate" data-check="{{path('app_purchase_check')}}">
<input type="hidden" name="_csrf_token" value="{{ csrf_token('purchase') }}">
<input type="hidden" name="type" value="">
<input type="hidden" name="id" value="">
<input type="hidden" name="us" value="{% if app.user %}{{app.user.id}}{% endif %}">
<div class="text-center mb-2">
<p class="mb-0">{{"Récupérer votre pass"|trans}}</p>
<h1 class="counter mb-2" style="visibility: visible;" id="amount-purchase"></h1>
</div>
<div class="row my-4">
<label class="text-center fw-500">{{"Données de paiement"| trans}}</label>
<hr>
<div class="fv-row col-md-6 mb-3">
<label class="text-white fw-500 mb-2">Email *</label>
<input type="email" name="email" value="{% if app.user %}{{app.user.email}}{% endif %}" class="form-control rounded-0" required="">
</div>
<div class="fv-row col-md-6 mb-3">
<label class="text-white fw-500 mb-2">{{"Téléphone"| trans}} *</label>
<input type="tel" name="phone" id="phone-purchase" class="form-control rounded-0 tel" required="" value="{% if app.user %}{{app.user.phone}}{% endif %}">
</div>
<div class="fv-row col-12 justify-content-between">
<label class="text-center fw-500 me-2">{{"Méthode"| trans}} : </label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="process" id="process-mobile" value="mobile" checked="checked">
<label class="form-check-label" for="process-mobile">{{"Mobile money"|trans}}</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="process" id="process-card" value="card">
<label class="form-check-label" for="process-card">{{"Carte bancaire"|trans}}</label>
</div>
</div>
</div>
{% if not app.user %}
<div class="row my-4" id="account-form">
<label class="text-center fw-500">{{"Création de compte"| trans}}</label>
<hr>
<div class="fv-row col-md-6 mb-3">
<label class="text-white fw-500 mb-2">{{"Mot de passe" | trans}} * </label>
<input type="password" name="password" class="form-control rounded-0" required="" value="{% if app.user %}Azerty@123456{% endif %}">
</div>
<div class="fv-row col-md-6 mb-3">
<label class="text-white fw-500 mb-2">{{"Confirmer"| trans}} *</label>
<input type="password" name="confirm" class="form-control rounded-0" required="" value="{% if app.user %}Azerty@123456{% endif %}">
</div>
</div>
{% endif %}
<div class="text-center iq-button">
<button type="button" class="btn btn-sm btn-outline position-relative" data-bs-dismiss="modal" aria-label="Close">
{{"Annuler" | trans}}<i class="fa-solid fa-close ms-2"></i>
</button>
<button id="submit" type="submit" class="btn btn-sm position-relative">
{{"Payer" | trans}}
<span class="indicator-label"><i class="fa-solid fa-play ms-2"></i></span>
<span class="indicator-progress">
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="rtl-box">
<a class="btn btn-fixed-end btn-icon btn-setting" id="settingbutton" data-bs-toggle="offcanvas"
data-bs-target="#live-customizer" role="button" aria-controls="live-customizer">
<svg xmlns="http://www.w3.org/2000/svg" width="1.875em" height="1.875em" viewBox="0 0 20 20" fill="white">
<path fill-rule="evenodd"
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd" />
</svg>
</a>
<div class="offcanvas offcanvas-end live-customizer on-rtl end" tabindex="-1" id="live-customizer"
data-bs-scroll="true" data-bs-backdrop="false" aria-labelledby="live-customizer-label" aria-modal="true"
role="dialog">
<div class="offcanvas-header gap-3">
<div class="d-flex align-items-center">
<h5 class="offcanvas-title text-dark" id="live-customizer-label">{{"Choix de couleurs"| trans}}</h5>
</div>
<div class="d-flex gap-1 align-items-center">
<button class="btn btn-icon text-primary" data-reset="settings" data-bs-toggle="tooltip" data-bs-placement="left" aria-label="{{'Reinitialiser'|trans }}"
data-bs-original-title="{{'Reinitialiser'|trans }}">
<span class="btn-inner">
<i class="fa-solid fa-arrows-rotate"></i>
</span>
</button>
<button type="button" class="btn btn-icon btn-close px-0 text-reset shadow-none text-dark" data-bs-dismiss="offcanvas" aria-label="Close">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
</div>
<div class="offcanvas-body pt-0">
<div class="modes row row-cols-2 gx-2">
{# <div class="col">
<div data-setting="attribute" class="text-center w-100">
<input type="radio" value="ltr" class="btn-check" name="theme_scheme_direction" data-prop="dir"
id="theme-scheme-direction-ltr" checked>
<label class="btn dir-btn cutomizer-button w-100" for="theme-scheme-direction-ltr">
LTR
</label>
</div>
</div> #}
{# <div class="col">
<div data-setting="attribute" class="text-center w-100">
<input type="radio" value="rtl" class="btn-check" name="theme_scheme_direction" data-prop="dir"
id="theme-scheme-direction-rtl">
<label class="btn dir-btn cutomizer-button w-100" for="theme-scheme-direction-rtl">
RTL
</label>
</div>
</div> #}
</div>
<div class="modes mt-3">
{# <div class="color-customizer mb-3">
<h6 class="mb-0 title-customizer">{{"Personnalisation des couleurs"| trans}}</h6>
</div> #}
<div class="row row-cols-2 gx-2">
<div class="col mb-3">
<div data-setting="attribute" class="text-center w-100">
<input type="radio" value="dark" class="btn-check" name="theme_style_appearance"
data-prop="data-bs-theme" id="theme-scheme-color-netflix" checked>
<label class="btn dir-btn cutomizer-button w-100" for="theme-scheme-color-netflix">
{{"Rouge"| trans}}
</label>
</div>
</div>
<div class="col mb-3">
<div data-setting="attribute" class="text-center w-100">
<input type="radio" value="hotstar" class="btn-check" name="theme_style_appearance"
data-prop="data-bs-theme" id="theme-scheme-color-hotstar">
<label class="btn dir-btn cutomizer-button w-100" for="theme-scheme-color-hotstar">
{{"Bleue"| trans}}
</label>
</div>
</div>
<div class="col">
<div data-setting="attribute" class="text-center w-100">
<input type="radio" value="amazonprime" class="btn-check" name="theme_style_appearance"
data-prop="data-bs-theme" id="theme-scheme-color-prime">
<label class="btn dir-btn cutomizer-button w-100" for="theme-scheme-color-prime">
{{"Bleue ciel"| trans}}
</label>
</div>
</div>
<div class="col">
<div data-setting="attribute" class="text-center w-100">
<input type="radio" value="hulu" class="btn-check" name="theme_style_appearance"
data-prop="data-bs-theme" id="theme-scheme-color-hulu">
<label class="btn dir-btn cutomizer-button w-100" for="theme-scheme-color-hulu">
{{"Verte"| trans}}
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="back-to-top" style="display: none;">
<a class="p-0 btn bg-primary btn-sm position-fixed top border-0 rounded-circle" id="top" href="#top">
<i class="fa-solid fa-chevron-up"></i>
</a>
</div>
<div aria-live="polite" aria-atomic="true" class="fixed-top">
<!-- Position it: -->
<!-- - `.toast-container` for spacing between toasts -->
<!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
<!-- - `.p-3` to prevent the toasts from sticking to the edge of the container -->
<div class="toast-container position-absolute top-0 end-0 p-3">
</div>
</div>
</main>
<!-- Wrapper End-->
<!-- Library Bundle Script -->
<script src="{{ asset('vitrine/js/core/libs.min.js') }}"></script>
<!-- Plugin Scripts -->
<!-- Select2 Script -->
<script src="{{ asset('app/vendor/select2/dist/js/select2.min.js' ) }}"defer></script>
<!-- SwiperSlider Script -->
<script src="{{ asset('vitrine/vendor/swiperSlider/swiper.min.js') }}"></script>
<!-- Lodash Utility -->
<script src="{{ asset('vitrine/vendor/lodash/lodash.min.js') }}"></script>
<!-- External Library Bundle Script -->
<script src="{{ asset('vitrine/js/core/external.min.js') }}"></script>
<!-- countdown Script -->
<script src="{{ asset('vitrine/js/plugins/countdown.js') }}"></script>
<!-- utility Script -->
<script src="{{ asset('vitrine/js/utility.js') }}"></script>
{# <script src="{{ asset('app/vendor/toastr/toastr.min.js') }}"></script> #}
<script src="{{ asset('app/vendor/sweetalert2/dist/sweetalert2.min.js') }}"defer></script>
<!-- Setting Script -->
<script src="{{ asset('vitrine/js/setting.js') }}"></script>
<script src="{{ asset('vitrine/vendor/moment/moment-with-locales.min.js') }}"></script>
<script src="{{ asset('vitrine/vendor/moment/moment-timezone-with-data.min.js') }}"></script>
<script>
const _web_movie_detail = "{{path('web_movie_detail')}}";
const _asset_cover = "{{asset('_1_', 'covers')}}";
const _asset = "{{asset('_1_')}}";
const _get_series_link = "{{path('app_series_index')}}";
const _get_movies_link = "{{path('app_get_list_movie')}}";
const _get_catalog_link = "{{path('web_catalog')}}";
const _get_movie_detail_link = "{{path('web_movie_detail')}}";
const _get_casting_detail_link = "{{path('web_casting_detail')}}";
const _get_serie_detail_link = "{{path('web_series_detail')}}";
const _nbr_season_trans = "{{'_1_ saison(s)'|trans}}";
const _season_trans = "{{'Saison _1_'|trans}}";
const _genres_trans = "{{'Les genres de film'|trans}}";
const _veiw_all = "{{'Voir plus'|trans}}";
const _movie_detail_title = "{{'Regarder'|trans}}";
const _top_ten_title = "{{'Les dix meilleurs films à voir'|trans}}";
const _movie_avatar_link = "{{ asset('app/images/covers/_1_') }}";
const _buy = "{{ 'Acheter'| trans }}";
const _all = "{{ 'Tout'| trans }}";
const app_genre_filter = "{{path('app_genre_filter')}}";
const _msg_email_required = '{{"L\'adresse mail est requise"| trans}}';
const _msg_password_required = '{{"Le mot de passe est requis"| trans}}';
const _msg_email_invalid = '{{"La valeur n\'est pas une adresse e-mail valide"| trans}}';
const _msg_ok = '{{"Ok,j\'ai compris"| trans}}';
const _msg_connect = '{{"Se connecter"| trans}}';
const _msg_password_invalid = '{{"Le mot de passe est invalide"| trans}}';
const _msg_first_name_required = '{{"Le prénom est requis"| trans}}';
const _msg_last_name_required = '{{"Le nom de famille est requis"| trans}}';
const _msg_phone_required = '{{"Le numéro de téléphone est requis"| trans}}';
const _msg_phone_invalid = '{{"Le numéro n\'est pas valide"| trans}}';
const _msg_confirm_password_required = '{{"La confirmation du mot de passe est requise"| trans}}';
const _msg_confirm_password_invalid = '{{"Le mot de passe et sa confirmation ne sont pas identiques"| trans}}';
const _msg_term_required = '{{"Vous devez accepter les termes et conditions"| trans}}';
const _app_reconfig_question = "{{'Êtes-vous sûr de reinitialiser la configuration ?' }}";
</script>
<script>
const _locale = "{{_locale}}";
moment.locale("{{_locale}}");
tz = moment.tz.guess(true);
</script>
<script src="{{ asset('vitrine/librairies/intl/build/js/intlTelInput.min.js') }}"></script>
<script src="{{ asset('app/js/urban.formvalidation.js') }}"></script>
{# <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script> #}
<script src="{{ asset('vitrine/js/swiper.js') }}"></script>
{% include("helper/filters.html.twig") %}
{% include 'helper/intl.input.html.twig' %}
<script src="{{ asset('app/js/base.js') }}"></script>
{% include 'helper/toasts.flash.html.twig' %}
<script src="{{ asset('vitrine/js/setting-init.js') }}"defer></script>
<script>
$.urban.login.init();
$.urban.login.onLogin("#login-customer", "click");
{# $.urban.toasts.display(); #}
</script>
{% block javascripts %}{% endblock %}
<!-- Streamit Script -->
<script src="{{ asset('vitrine/js/streamit.js') }}"defer></script>
{% include("vitrine/loader/search.html.twig") %}
<script>
{# const offcanvasEl = document.querySelector("#search-offcanvas");
const offcanvas = new bootstrap.Offcanvas(offcanvasEl); #}
$("#search-input").on("focus", (e)=>{
//offcanvas.show();
$("#search-offcanvas").addClass("show");
});
$("#search-offcanvas-close").on("click", (e)=>{
//offcanvas.show();
$("#search-offcanvas").removeClass("show");
});
const loaderInit = () => {
const loader = document.querySelector(".loader");
if (loader) {
loader.classList.add("animate__animated", "animate__fadeOut");
setTimeout(() => {
loader.classList.add("d-none");
$.urban.toasts.display();
}, 200);
}
};
var cycle = 0;
var interval = setInterval(()=>{
const dynamiks = document.querySelectorAll(".dynamik");
var fully = true;
cycle++;
$.each(dynamiks, function(k,v){
if(!v.innerHTML && cycle < 20) fully = false;
});
if(fully){
clearInterval(interval);
start_swiper();
$.urban.star.starRating();
loaderInit();
}
}, 1000);
</script>
</body>
</html>