@model IEnumerable<FamilyBudget.Models.Utilisateur>

@{
    ViewData["Title"] = "Liste des Utilisateurs";
}

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liste des Utilisateurs</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .table th, .table td {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <!--<div class="container mt-5">
        <h2 class="text-primary"><i class="bi bi-people-fill"></i> Liste des Utilisateurs</h2>
        <hr />-->
    <!-- Barre de recherche -->
    <!--<div class="mb-3">
        <input type="text" id="searchInput" class="form-control" placeholder="Rechercher un utilisateur...">
    </div>-->
    <!-- Bouton d'ajout -->
    <!--<p>
        <a asp-action="Create" class="btn btn-success">
            <i class="bi bi-person-plus-fill"></i> Ajouter un utilisateur
        </a>
    </p>-->
    <!-- Tableau des utilisateurs -->
    <!--<table class="table table-bordered table-striped">
            <thead class="table-dark">
                <tr>
                    <th><i class="bi bi-person-fill"></i> @Html.DisplayNameFor(model => model.Nom)</th>
                    <th><i class="bi bi-envelope-fill"></i> @Html.DisplayNameFor(model => model.Email)</th>
                    <th class="text-center"><i class="bi bi-gear-fill"></i> Actions</th>
                </tr>
            </thead>
            <tbody id="userTable">
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@Html.DisplayFor(modelItem => item.Nom)</td>
                        <td>@Html.DisplayFor(modelItem => item.Email)</td>
                        <td class="text-center">
                            <a asp-action="Edit" asp-route-id="@item.IdUtilisateur" class="btn btn-warning btn-sm">
                                <i class="bi bi-pencil-square"></i> Modifier
                            </a>
                            <a asp-action="Details" asp-route-id="@item.IdUtilisateur" class="btn btn-info btn-sm">
                                <i class="bi bi-eye-fill"></i> Détails
                            </a>
                            <a asp-action="Delete" asp-route-id="@item.IdUtilisateur" class="btn btn-danger btn-sm">
                                <i class="bi bi-trash-fill"></i> Supprimer
                            </a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>-->
    <!-- Script de recherche -->
    <!--<script>
        document.getElementById("searchInput").addEventListener("keyup", function() {
            let filter = this.value.toLowerCase();
            let rows = document.querySelectorAll("#userTable tr");

            rows.forEach(row => {
                let name = row.cells[0].textContent.toLowerCase();
                let email = row.cells[1].textContent.toLowerCase();
                if (name.includes(filter) || email.includes(filter)) {
                    row.style.display = "";
                } else {
                    row.style.display = "none";
                }
            });
        });
    </script>-->
    @foreach (var item in Model)
    {
        <div class="col-md-4">
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title text-warning">Détails du Revenu</h5>
                    <p class="card-text">
                        <strong>👤 Nom :</strong> @item.Nom <br>
                        <strong>📧 Email :</strong> @item.Email<br>
                        <strong>🔒 Mot de passe :</strong> @item.MotDePasse <br>
                    </p>
                </div>
            </div>
        </div>
        <a asp-action="Edit" asp-route-id="@item.IdUtilisateur">Modifier</a>
    }


    <style>
        .card {
            border-radius: 10px;
            transition: transform 0.2s ease-in-out;
        }

            .card:hover {
                transform: scale(1.03);
            }

        .btn {
            border-radius: 20px;
        }

        .box {
            padding: 10px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
            border-radius: 10px;
        }
    </style>
</body>
</html>
