{% extends 'base.html.twig' %}

{% block title %}Liste des commandes{% endblock %}

{% block body %}
	<div class="flex flex-wrap items-center justify-between mb-3">
		<h2 class="text-xl font-bold text-cyan-500">Commandes</h2>
		{% include "layouts/_update_data.html.twig" %}
	</div>
	{% include "layouts/filter/_order_filters.html.twig" %}
	<div class="bg-white w-full shadow-md rounded-md mt-8">
        <div class="flex align-items justify-between border-b border-slate-400 p-4">
            <span class="flex items-center">{{ ux_icon('ph:list', {'class': 'w-5 mr-3 text-cyan-500'}) }}Liste des commandes</span>
            <span>{{ total }} commandes</span>
        </div>
		<div class="flex border-b border-slate-400">
			<div class="w-1/4 lg:w-1/7 px-2 py-4 text-left font-bold">N°</div>
			<div class="w-1/4 lg:w-1/7 px-2 py-4 text-left font-bold">Client</div>
			<div class="hidden lg:block lg:w-1/7 px-2 py-4 text-left font-bold">Service</div>
			<div class="w-1/4 lg:w-1/7 px-2 py-4 text-left font-bold">RAL</div>
			<div class="hidden lg:block lg:w-1/7 px-2 py-4 text-left font-bold">Nb de produits</div>
			<div class="hidden lg:block lg:w-1/7 px-2 py-4 text-left font-bold">Date de création</div>
			<div class="w-1/4 lg:w-1/7 px-2 py-4 text-left font-bold">Statut</div>
		</div>
		
		<turbo-frame id="load_list" src="{{ path('order_load') }}" data-controller="list">
			{% include "layouts/_loader.html.twig" %}
		</turbo-frame>
	</div>
{% endblock %}