{# On étend notre layout #}
{% extends "layout.html.twig" %}

{% block body %}
<div class="container-fluid pl-5 pr-5" >
 <!--<div class="row justify-content-center">-->
	<br />
	<h4>Produits disponibles pour la vente {{vente.nom}}</h4>
	<br />
	<!--</div>-->
    <!--<div class="row justify-content-center">-->
		<div id="toolbar">
			<a href="./commande" class="btn btn-info" role="button">
				<i class="bi bi-cart"></i> Panier
			</a></div>
		<table class="table" data-toolbar="#toolbar" data-toggle="table" 
							data-pagination="true" 
							data-side-pagination="server"
							data-search="true"
							data-trim-on-search="false"							
							data-url="./listeproduits"
							data-pagination="true"
							data-id-field="id"
							data-page-list="[10, 15, 20, 25, 50]"
							data-show-footer="true"
							data-page-size="15">
			<thead>
				<tr>
					<th data-visible="false" data-field="id">Id</th>					
					<th data-field="catalogue">Catalogue</th>
					<th data-field="reference">Reférence</th>
					<th data-field="designation">Désignation</th>
					<th data-field="marque">Marque</th>
					<th data-field="conditionnement">Conditionnement</th>
					<th data-field="colisage">Colisage</th>
					<th data-field="colisageMin">Col. Min</th>
					<th data-field="prixUnitaire">Prix Unitaire TTC</th>
					<th class="text-center" data-formatter="operateFormatter" data-events="operateEvents" data-width="160">Ajout</th>
				<tr>
			</thead>			
		</table>
	<!--</div>-->
	
	<div class="toast card text-white bg-info mb-3" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000" style="position: absolute; top: 1rem; right: 1rem;">
		<div class="toast-header card-header">			
			<strong class="mr-auto">Information</strong>			
			<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="toast-body card-body" id="toast-msg">
			
		</div>
	</div>
	
<!--</div>-->

{% endblock %}
{% block javascripts %}
	<script src="{{ asset('js/jquery.redirect.js') }}"></script>
	<script src="{{ asset('js/commande/produits.js?0') }}"></script>
{% endblock %}