<!DOCTYPE html>
<html>

<head>
    <title>Users List</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container mt-4">
        <h1>Users</h1>
        <a href="/users/create" class="btn btn-primary mb-3">Create New User</a>

        <table class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <% users.forEach(user=> { %>
                    <tr>
                        <td>
                            <%= user.id %>
                        </td>
                        <td>
                            <%= user.name %>
                        </td>
                        <td>
                            <%= user.email %>
                        </td>
                        <td>
                            <a href="/users/<%= user.id %>" class="btn btn-info btn-sm">View</a>
                            <a href="/users/<%= user.id %>/edit" class="btn btn-warning btn-sm">Edit</a>
                            <form action="/users/<%= user.id %>/delete" method="POST" style="display: inline;">
                                <button type="submit" class="btn btn-danger btn-sm"
                                    onclick="return confirm('Are you sure?')">Delete</button>
                            </form>
                        </td>
                    </tr>
                    <% }); %>
            </tbody>
        </table>
    </div>
</body>

</html>