{% extends 'parent.html.twig' %}
{% block stylesheets %}
{{ parent() }}
{% endblock %}
{% block body %}
<!-- Home Design -->
<section class="home-one bg-home6">
<div class="container">
<div class="row posr">
<div class="col-lg-12 pl0-lg pl15-sm">
<div class="home_content home6 custom_width">
<div class="home-text home6">
<p class="fz18">Gagnez en visibilité !</p>
<h2 class="fz60">Votre panneau <br> <span class="text-thm">publicitaire</span></h2>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Why Chose Us -->
<section id="why-chose" class="whychose_us bgc-alice-blue pb70">
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3">
<div class="main-title text-center">
<h2>Quel panneau ?</h2>
<p>Choisissez le type de panneau qui correspond le mieux à vos attentes et à votre budget.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xl-4">
<div class="why_chose_us">
<div class="icon green" style="font-size: 50px; color: #42ed84;"><i class="fa-solid fa-sign-hanging"></i></i></div>
<div class="details">
<h4>Panneaux verts</h4>
<p>Ces panneaux sont situés dans des zones rurales, et donc mois fréquentées. Un panneau vert vous conviendra si vous visez un petit budget !</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="why_chose_us">
<div class="icon blue" style="font-size: 50px; color: #4188fa;"><i class="fa-solid fa-sign-hanging"></i></div>
<div class="details">
<h4>Panneaux bleus</h4>
<p>Les panneaux bleus sont un excellent compromis entre visibilité pour votre marque et budget raisonable. De quoi vous faire connaitre sans vous ruiner !</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="why_chose_us">
<div class="icon" style="font-size: 50px; color: #ec1e28;"><i class="fa-solid fa-sign-hanging"></i></div>
<div class="details">
<h4>Panneaux rouges</h4>
<p>Les panneaux rouges sont situés dans des zones très fréquentées. Ceux-ci vous garantiront une exposition d'enfer, de quoi faire connaitre votre marque.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Recent Property For Rent -->
<section class="recent-property pb70 bgc-alice-blue">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="main-title">
<h2>Panneaux disponibles</h2>
<p>Faites votre publicité comme vous l'entendez</p>
</div>
</div>
<div class="col-lg-6">
<div class="custom_dropdowns text-right mb30-md">
{# <select class="selectpicker show-tick" onchange="managePanels(0);">
<option>Tous types</option>
{% for typepanel in typespanel %}
<option value="{{ typepanel.name }}">{{ typepanel.name }}</option>
{% endfor %}
</select> #}
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="recent_property_slider_home1 home6" id="list-panels">
{% for panel in panels %}
<div class="item">
<div class="feat_property all_listing_style5">
<div class="thumb">
<a href="/listing-panel-single/{{ panel.id }}"><img class="img-whp" src="{{ images [ loop.index0 ] }}" alt="lls51.jpg"></a>
<div class="thmb_cntnt2 right top style5">
<ul class="tag mb0">
<li class="list-inline-item"><a class="text-white" href="#"><span class="flaticon-resize"></span></a></li>
<li class="list-inline-item"><a class="text-white" href="#"><span class="flaticon-add"></span></a></li>
<li class="list-inline-item"><a class="text-white" href="#"><span class="flaticon-heart-shape-outline"></span></a></li>
</ul>
</div>
<div class="fp_footer all_listing_style5">
<ul class="fp_meta">
<li class="list-inline-item">
<a href="#">
<span class="fw600">{{ panel.price }}€</span>
</a>
</li>
</ul>
<h4><a class="text-white" href="page-listing-single-v8.html">{{panel.situation}} ({{ panel.name }})</a></h4>
</div>
</div>
<div class="details">
<div class="tc_content">
<ul class="prop_details mb0" style="display: flex; justify-content: space-around;">
<li class="list-inline-item"><i class="fa-solid fa-square-arrow-up-right"></i><br>{{panel.area}} m<sup>2</sup></a></li>
<li class="list-inline-item"><i class="fa-solid fa-check"></i><br>{% if panel.free > 1 %} loué {% else %} libre {% endif %}</a></li>
<li class="list-inline-item"><i class="fa-solid fa-image"></i><br>{{ panel.images | length }} image{% if panel.images | length > 1 %}s{% endif %}</a></li>
<li class="list-inline-item"><i class="fa-solid fa-eye"></i><br>{{ panel.historyViews | length }} vue{% if panel.historyViews | length > 1 %}s{% endif %}</a></li>
</ul>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
<!-- Property Cities -->
{% if typespanel|length > 0 %}
<section class="property-city pb70 bb1">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="main-title mb30-md">
<h2>Pour tous les goûts !</h2>
<p>Découvrez tous nos types de panneaux</p>
</div>
</div>
{# <div class="col-lg-6">
<div class="heading_read_more text-right tal-md mt30 mt0-md">
<a href="#" class="btn text-thm">Browse All</a>
</div>
</div>#}
</div>
<div class="row mt50-md">
<div class="col-md-12 col-lg-4 col-xl-4">
<div class="row">
<div class="col-sm-12">
<a href="listing-panels/?type=1">
<div class="explore_city custom_class_service float-left">
<div class="thumb"><img class="img-fluid" src="{% if typespanel [0].image is empty %}{{defaultimage}}{% else %}{{typespanel [0].image}}{% endif %}" alt="1.jpg"></div>
<div class="details">
<h4 class="title">{{ typespanel [0].name }}</h4>
<p>{{ typespanel [0].panels|length }} panneaux</p>
</div>
</div>
</a>
<a href="listing-panels/?type=2">
<div class="explore_city custom_class_service float-right">
<div class="thumb"><img class="img-fluid" src="{% if typespanel [1].image is empty %}{{defaultimage}}{% else %}{{typespanel [1].image}}{% endif %}" alt="2.jpg"></div>
<div class="details">
<h4 class="title">{{ typespanel [1].name }}</h4>
<p>{{ typespanel [1].panels|length }} panneaux</p>
</div>
</div>
</a>
</div>
<div class="col-sm-12">
<a href="listing-panels/?type=3">
<div class="explore_city">
<div class="thumb"><img class="img-fluid" src="{% if typespanel [2].image is empty %}{{defaultimage}}{% else %}{{typespanel [2].image}}{% endif %}" alt="3.jpg"></div>
<div class="details">
<h4 class="title">{{ typespanel [2].name }}</h4>
<p>{{ typespanel [2].panels|length }} panneaux</p>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="col-md-7 col-lg-5 col-xl-6">
<a href="listing-panels/?type=4">
<div class="explore_city style2">
<div class="thumb"><img class="img-fluid" src="{% if typespanel [3].image is empty %}{{defaultimage}}{% else %}{{typespanel [3].image}}{% endif %}" alt="4.jpg"></div>
<div class="details">
<h4 class="title">{{ typespanel [3].name }}</h4>
<p>{{ typespanel [3].panels|length }} panneaux</p>
</div>
</div>
</a>
</div>
<div class="col-md-5 col-lg-3 col-xl-2">
<a href="listing-panels/?type=5">
<div class="explore_city custom_class_service2">
<div class="thumb"><img class="img-fluid" src="{% if typespanel [4].image is empty %}{{defaultimage}}{% else %}{{typespanel [4].image}}{% endif %}" alt="5.jpg"></div>
<div class="details">
<h4 class="title">{{ typespanel [4].name }}</h4>
<p>{{ typespanel [4].panels|length }} panneaux</p>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
{% endif %}
<!-- Contact Divider Home 6 -->
<section class="contact-divider-home6 bgc-thm pt70 pb70">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4 col-xl-4">
<div class="contact_icon_box home6">
<div class="icon float-left"><span class="flaticon-phone"></span></div>
<div class="details" style="position: relative; top: 10px;">
<h5 class="title mb0">(+32) 497 48 12 54</h5>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-4">
<div class="contact_icon_box home6">
<div class="icon float-left"><span class="flaticon-place"></span></div>
<div class="details">
<h5 class="title mb0">Rue du Pont Alsort, 36<br>6640 Froidchapelle, Belgique.</h5>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-2">
<div class="contact_icon_box home6">
<div class="icon float-left"><i class="fa-regular fa-envelope"></i></div>
<div class="details" style="white-space: nowrap; position: relative; top: 10px;">
<h5 class="title mb0">contact@pub-up.eu</h5>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block footer %}
{{ parent() }}
{% endblock %}
{% block javascripts %}
<script src="/assets/js/app.js"></script>
<script src="/assets/js/jquery-3.6.0.js"></script>
<script src="/assets/js/jquery-migrate-3.0.0.min.js"></script>
<script src="/assets/js/popper.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/jquery.mmenu.all.js"></script>
<script src="/assets/js/ace-responsive-menu.js"></script>
<script src="/assets/js/bootstrap-select.min.js"></script>
<script src="/assets/js/isotop.js"></script>
<script src="/assets/js/snackbar.min.js"></script>
<script src="/assets/js/simplebar.js"></script>
<script src="/assets/js/parallax.js"></script>
<script src="/assets/js/scrollto.js"></script>
<script src="/assets/js/jquery-scrolltofixed-min.js"></script>
<script src="/assets/js/jquery.counterup.js"></script>
<script src="/assets/js/wow.min.js"></script>
<script src="/assets/js/progressbar.js"></script>
<script src="/assets/js/slider.js"></script>
<script src="/assets/js/pricing-slider.js"></script>
<script src="/assets/js/timepicker.js"></script>
<script src="/assets/js/wow.min.js"></script>
<!-- Custom script for all pages -->
<script src="/assets/js/script.js"></script>
<script>
$(document).ready( function() {
console.log("hello");
//getListPanels(0);
//formatTemplate();
});
</script>
{% endblock %}