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

{% block title %}Liste Facture Fournisseur
{% endblock %}

{% block stylesheets %}
	{{ parent() }}
	<link
		rel="stylesheet"
		href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css"
		integrity="sha256-e47xOkXs1JXFbjjpoRr1/LhVcqSzRmGmPqsrUQeVs+g="
		crossorigin="anonymous"/>
	<style>
		.ri-upload-cloud-2-line {
			font-size: 7rem;
			display: block;
			margin-left: 45%;
			margin-right: 45%;
		}
		#fileList {
			margin-top: 20px;
			list-style: none;
			padding-left: 0;
		}
		#fileList li {
			padding: 5px;
			border-bottom: 1px solid #ddd;
		}
	</style>
{% endblock %}

{% block body %}
	<div
		class="content-page">
		<div
			class="content">
			<div
				class="container-fluid">
				<div
					class="row">
					<div
						class="col-12">
						<div
							class="page-title-box">
							<h1>Liste des factures fournisseur renommées</h1>
							<div
								class="tab-content">
								<div
									class="tab-pane show active"
									id="scroll-horizontal-preview">
									<table
										id="scroll-horizontal-datatable"
										class="table table-striped w-100 nowrap">
										<thead>
											<ul
												class="list-group mt-4">
												{% for zip in zipFiles %}
													<li
														class="list-group-item d-flex justify-content-between align-items-center">
														<div>
															<strong>{{ zip.name }}</strong><br>
															<small>Date de création :
																{{ zip.timestamp | date('d/m/Y H:i:s') }}</small>
														</div>
														<a
															href="{{ zip.path }}" class="btn btn-success"
															download>Télécharger</a>
													</li>
												{% else %}
													<li
														class="list-group-item">Aucun fichier ZIP disponible</li>
												{% endfor %}
											</ul>
										</thead>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	{% endblock %}
	
{% block javascripts %}
    {{ parent() }}

{% endblock %}