<!DOCTYPE html>
<html lang="en">
<% if (isEdit) { %>
    <%- include("partials/head.ejs", { title: "Edit User " + user.name, css: "", js: "" }) %>
<% } else { %>
    <%- include("partials/head.ejs", { title: "Add User", css: "", js: "" }) %>
<% } %>
<body>
    <%- include("partials/nav.ejs") %>
    <% if (isEdit) { %>
        <form method="POST" action="/users/<%= user._id %>?_method=PUT">
            <div class="mb-3">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" value="<%= user.name %>" required>
            </div>
            <fieldset>
                <legend>Select color:</legend>
                <div>
                    <p>
                        <input type="radio" id="federal-blue" name="currentColor" value="federal-blue"
                        <% if (user.currentColor === "federal-blue" ) { %>
                            checked
                        <% } %>
                        >
                        <label for="federal-blue"><span class="bg-federal-blue">Federal Blue</span></label>
                    </p>
                    <p>
                        <input type="radio" id="goldenrod" name="currentColor" value="goldenrod"
                        <% if (user.currentColor === "goldenrod" ) { %>
                            checked
                        <% } %>
                        >
                        <label for="goldenrod"><span class="bg-goldenrod">Goldenrod</span></label>
                    </p>
                    <p>
                        <input type="radio" id="avocado" name="currentColor" value="avocado"
                        <% if (user.currentColor === "avocado" ) { %>
                            checked
                        <% } %>
                        >
                        <label for="avocado"><span class="bg-avocado">Avocado</span></label>
                    </p>
                    <p>
                        <input type="radio" id="pantone-orange" name="currentColor" value="pantone-orange"
                        <% if (user.currentColor === "pantone-orange" ) { %>
                            checked
                        <% } %>
                        >
                        <label for="pantone-orange"><span class="bg-pantone-orange">Pantone Orange</span></label>
                    </p>
                </div>
            </fieldset>
    <% } else { %>
        <form method="POST" action="/users">
            <div class="mb-3">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" required>
            </div>
            <fieldset>
                <legend>Select color:</legend>
                <div>
                    <div class="form-check">
                        <input type="radio" id="federal-blue" name="currentColor" value="federal-blue" checked>
                        <label for="federal-blue"><span class="bg-federal-blue">Federal Blue</span></label>
                    </div>
                    <div class="form-check">
                        <input type="radio" id="goldenrod" name="currentColor" value="goldenrod">
                        <label for="goldenrod"><span class="bg-goldenrod">Goldenrod</span></label>
                    </div>
                    <div class="form-check">
                        <input type="radio" id="avocado" name="currentColor" value="avocado">
                        <label for="avocado"><span class="bg-avocado">Avocado</span></label>
                    </div>
                    <div class="form-check">
                        <input type="radio" id="pantone-orange" name="currentColor" value="pantone-orange">
                        <label for="pantone-orange"><span class="bg-pantone-orange">Pantone Orange</span></label>
                    </div>
                </div>
            </fieldset>
    <% } %>
        <div>
            <button type="submit" class="btn btn-primary">Save</button>
        </div>
    </form>
    <%- include("partials/footer.ejs") %>
</body>
</html>