<!DOCTYPE html>
<html lang="en">
    <%- include("./partials/header.ejs") %>
<body class= "d-flex align-items-center text-center vh-100" style="background-color: forestgreen;">
<div class="container-fluid mb-5">
  <h1>Add new member</h1>
  <form action="/add_user" method="post">
    <p>What's your name?</p>
    <input type="text" name="name">

    <p>Pick a color:</p>
    <input type="radio" name="color" id="red" value="red" />
    <label for="red" class="cust-label"><span class="red"></span></label>

    <input type="radio" name="color" id="green" value="green" />
    <label for="green" class="cust-label"><span class="green"></span></label>

    <input type="radio" name="color" id="yellow" value="yellow" />
    <label for="yellow" class="cust-label"><span class="yellow"></span></label>

    <input type="radio" name="color" id="olive" value="olive" />
    <label for="olive" class="cust-label"><span class="olive"></span></label>

    <input type="radio" name="color" id="orange" value="orange" />
    <label for="orange" class="cust-label"><span class="orange"></span></label>

    <input type="radio" name="color" id="teal" value="teal" />
    <label for="teal" class="cust-label"><span class="teal"></span></label>

    <input type="radio" name="color" id="blue" value="blue" />
    <label for="blue" class="cust-label"><span class="blue"></span></label>

    <input type="radio" name="color" id="violet" value="violet" />
    <label for="violet" class="cust-label"><span class="violet"></span></label>

    <input type="radio" name="color" id="purple" value="purple" />
    <label for="purple" class="cust-label"><span class="purple"></span></label>

    <input type="radio" name="color" id="pink" value="pink" />
    <label for="pink"><span class="pink"></span></label>
    <div class="spacer"></div>
    <button type="submit">Add</button>
  </form>
</div>

</body>

</html>
