<% layout('layouts/boilerplate') %>
<div class="container justify-content-center align-items-center mt-5">
  <div class="row">
    <div class="col-md-6 offset-md-3 col-xl-4 offset-xl-4">
      <div class="card shodow">
        <img src="/assets/travel-scout-img.png" alt="" class="card-img-top" />
        <div class="card-body">
          <h5 class="card-title">Sign Up</h5>

          <form
            action="/register"
            method="POST"
            class="validated-form"
            novalidate
          >
            <div class="mb-3">
              <label class="form-label" for="username">Username:</label>
              <input
                class="form-control"
                type="text"
                id="username"
                name="username"
                autofocus
                required
              />
              <div class="valid-feedback">Looks good!</div>
            </div>

            <div class="mb-3">
              <label class="form-label" for="email">E-mail:</label>
              <input
                class="form-control"
                type="email"
                id="email"
                name="email"
                required
              />
              <div class="valid-feedback">Looks good!</div>
            </div>

            <div class="mb-3">
              <label class="form-label" for="password">Password:</label>
              <input
                class="form-control"
                type="password"
                id="password"
                name="password"
                required
              />
              <div class="valid-feedback">Looks good!</div>
            </div>
            <div class="d-grid gap-2">
              <button class="btn btn-success">Sign Up</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
