<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="/style.css">
    <title>My Lists</title>
</head>

<body class="bg-light d-flex flex-column min-vh-100">
    <!-- Navbar -->
    <%- include('partials/header') %>

    <div class="flex-grow-1">
        <div class="container-fluid mt-4 list-content-container">
            <div class="jumbotron">
                <h1 class="display-4">Word List</h1>
                <!-- Add Word Button (Visible to Admin Only) -->
                <% if (user && user.writePermission) { %>
                    <div class="text-end mb-4">
                        <a href="/library/add-list" class="btn btn-primary">Add List</a>
                    </div>
                    <p class="lead">Create and share a unique set of words in a list specifically chosen by you.</p>
                    <% } %>
            </div>
    
            <!-- Word List Section -->
            <div class="list-group">
                <% lists.forEach(list => { %>
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="/library/user-list/<%= list.id %>">
                            <h5 class="mb-1"><%= list.listName %></h5>
                        </a>
                        <form action="/library/delete-list/<%= list.id %>" method="POST" class="d-inline">
                            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                    </div>
                <% }) %>
            </div>
            <% if (message) { %>
                <h4 class="alert alert-danger mt-4">
                    <%= message %>
                </h4>
            <% } %>
        </div>    
    </div>
    <!-- Main Content -->
    
    <!-- Footer -->
    <%- include('partials/footer') %>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>