<!-- Here we include another ejs file as a partial template. All the contents there will just be rendered here -->
<%- include('partials/header.ejs') %>

<!-- Don't care too much about those css classes, they are from the bootstrap library, which is a css framework for rapidly developing good-looking html frontends -->
<h5 class="card-title">Newsletter Registration</h5>
<!-- Check here if the bound variable "registered" is not null and true, then print a success message -->
<% if (registered !== null && registered) { %>
    <div class="alert alert-success mt-3">
        <b>Thanks!</b> You've registered your mail address.
    </div>
<!-- If it's false then print an error message -->
<% } else if (registered != null && !registered) { %>
    <div class="alert alert-danger mt-3">
        <b>Error!</b> Something went wrong when we tried to register you mail address.
    </div>
<% } %>
<p class="card-text">Please type in your mail address and click on submit to receive interesting newsletters from us.</p>

<!-- This is an HTML formular sending a post request to the /register route -->
<form action="/register" method="post" class="mb-3">
    <div class="mb-3">
        <label for="name_input" class="form-label">Your name</label>
        <!-- Input field for name -->
        <input type="text" class="form-control" id="name_input" name="name" placeholder="e.g. John Doe" required>
    </div>
    <div class="mb-3">
        <label for="mail_input" class="form-label">Your mail address</label>
        <!-- Input field for email -->
        <input type="email" class="form-control" id="mail_input" name="email" placeholder="e.g. john.doe@example.org" required>
    </div>
    <div class="d-grid">
        <!-- Submit button -->
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

<!-- Check here if we have any registered users -->
<% if (Object.keys(registeredUsers).length > 0) { %>
    <h5 class="card-title">Change registration</h5>
    <!-- This should never be done like this, it's just for the example -->
    <div class="list-group">
        <!-- For each registered user render a link to /user/:email -->
        <% for (registeredUser in registeredUsers) { %>
            <a href="/user/<%= registeredUser %>" class="list-group-item list-group-item-action"><%= registeredUsers[registeredUser].name %> &lt;<%= registeredUser %>&gt;</a>
        <% } %>
    </div>
<% } %>
                  
<!-- Same as for header partial -->
<%- include('partials/footer.ejs') %>