<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mes commandes</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100">
<%- include('../components/navbar'); -%>
<!-- component -->
<div class="flex justify-center items-center h-screen bg-gray-200 text-gray-900">
    <div class="rounded-md relative w-96 shadow-2xl p-3 bg-white">
        <div class="py-2">
            <div class="text-center text-xl font-bold">Commande</div>
            <div class="text-center text-xs font-bold">Détails</div>
        </div>
        <div class="text-center text-xs font-bold mb-1">~~~~~~~~~~~~~~~~~~~~~~~~~~~~</div>
        <div class="text-xs pl-2">
            <div class="text-xs mb-1">Client：<%-commande.idUser.nom%> <%-commande.idUser.prenom%></div>
            <div class="text-xs mb-1">Email：<%-commande.idUser.email%></div>
        </div>
        <div class="border-double border-t-4 border-b-4 border-l-0 border-r-0 border-gray-900 my-3">
            <div class="flex text-sm pt-1 px-1">
                <span class="w-2/6">Nom</span>
                <span class="w-2/6 text-right">Prix</span>
                <span class="w-2/6 text-right">Quantité</span>
            </div>
            <div class="border-dashed border-t border-b border-l-0 border-r-0 border-gray-900 mt-1 my-2 py-2 px-1">
                <%for(let i = 0; i < commande.idBonbon.length; i++){%>
                <div class="flex justify-between text-sm">
                    <span class="w-2/6 truncate"><%-commande.idBonbon[i].nom%></span>
                    <span class="w-2/6 text-right"><%-commande.idBonbon[i].prix%></span>
                    <span class="w-2/6 text-right"><%-commande.quantite[i]%></span>
                </div>
                <%}%>
            </div>
        </div>
        <div class="text-xs">
            <div class="text-right">
                <div>Date：<%- new Date(commande.date).toLocaleDateString('fr-fr', { weekday:"long", year:"numeric", month:"short", day:"numeric"}) %></div>
                <div class="font-bold text-sm">Total：<%- commande.prix%> €</div>
            </div>
        </div>
    </div>
</div>
<%- include('../components/footer'); -%>
</body>
</html>