add_customer_form.ejs (Exercise 1)

<!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.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <title>Create A New Customer</title>
  </head>

  <body>
    <div class="container" style="margin-top: 20px">
      <div style="float:left; width: 200px; padding-left: 10px;">
        <ul style="list-style-type: none; padding: 0;">
          <li><a href="/customers/new">Create A New Customer</a></li>
          <li><a href="/customers/list">List Customers</a></li>
        </ul>
      </div>
      <!-- Include the sidebar.ejs file -->
      <div style="float: left">
        <h1>Create A New Customer</h1>
        <form action="/customers/add" method="post">
          <div class="mb-3 row">
            <label for="name" class="col-sm-4 col-form-label">Name:</label>
            <div class="col-sm-8">
              <input
                type="text"
                class="form-control"
                id="name"
                name="name"
                required
              />
            </div>
          </div>
          <div class="mb-3 row">
            <div class="col-sm-4 col-form-label">Gender:</div>
            <div class="col-sm-8">
              <input
                type="radio"
                class="form-check-input"
                name="gender"
                value="1"
                id="female"
                checked
              />
              <label for="female" class="form-check-label">Female</label>
              <input
                type="radio"
                class="form-check-input"
                name="gender"
                value="2"
                id="male"
              />
              <label for="male" class="form-check-label">Male</label>
            </div>
          </div>
          <div class="mb-3 row">
            <label for="dob" class="col-sm-4 col-form-label"
              >Date of Birth <br />
              (yyyy-mm-dd):</label
            >
            <div class="col-sm-8">
              <input
                type="text"
                class="form-control"
                id="dob"
                name="dob"
                required
              />
            </div>
          </div>
          <div class="mb-3 row">
            <div class="col-6">
              <a href="/customers/list" class="btn btn-secondary">Cancel</a>
            </div>
            <div class="col-6 text-end">
              <input class="btn btn-primary" type="submit" value="Submit" />
            </div>
          </div>
        </form>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>