<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <title>Lil URL</title>
</head>
<body>
    <div class="container">
        <h1>Lil URL</h1>
        <form action="/shortUrls" method="POST" class="my-4 form-inline">
            <label for="fullUrl" class="sr-only">URL</label>
            <input required placeholder="Enter the URL" type="url" name="fullUrl" id="fullUrl" class="form-control col mr-2">
            <button class="btn btn-success" type="submit"> Shrink </button>
        </form>

        <table class="table table-striped table-responsive">
            <thead>
                <tr>
                    <th>Given URL</th>
                    <th>Short URL</th>
                    <th>Clicks</th>
                </tr>
            </thead>
            <tbody>
                <% shortUrls.forEach(shortUrl => { %>
                    <tr>
                        <td><a href="<%= shortUrl.full %>"><%= shortUrl.full %></a></td>
                        <td><a href="<%= shortUrl.short %>"><%= shortUrl.short %></a></td>
                        <td><%= shortUrl.clicks %></td>
                    </tr>                    
                <% }) %>
            </tbody>
        </table>
    </div>
</body>
</html>