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

{% block title %}État des stocks{% endblock %}

{% block body %}
	<div class="flex flex-wrap items-center justify-between mb-3">
		<h2 class="text-xl font-bold text-cyan-500">État des stocks</h2>
		<div class="flex items-center gap-3">
			<a href="{{ path('inventory_export_csv') }}" data-turbo="false">
				<button class="flex items-center border border-cyan-500 p-2 text-sm hover:bg-cyan-500 hover:text-white gap-2">
					{{ ux_icon('ph:file', {'class': 'w-5'}) }}
					Générer un csv
				</button>
			</a>
			{% include "layouts/_update_data.html.twig" %}
		</div>
	</div>
	{% include "layouts/filter/_product_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 produits</span>
            <span>{{ countProducts }} produits</span>
        </div>
		
		<turbo-frame id="load_list" src="{{ path('inventory_load_list') }}" data-controller="list">
			{% include "layouts/_loader.html.twig" %}
		</turbo-frame>
	</div>
	{# MODAL #}
	{% include "modal/inventory.html.twig" %}
{% endblock %}