<!doctype html>
<html lang="en">

<!-- Head -->
{{> (config config.partials.head) title=config.defaultPageTitle }}

<body class="{{ config.classes.body }}">

  <!-- Main Section-->
  <section class="d-flex justify-content-center align-items-start vh-100 py-5 px-3 px-md-0">

    <!-- Login Form-->
    <div class="d-flex flex-column w-100 align-items-center">

      <!-- Logo-->
      <a href="{{webRoot}}/index.html" class="d-table mt-5 mb-4 mx-auto">
        {{> navbar/logo }}
      </a>
      <!-- Logo-->
      
      <div class="shadow-lg rounded p-4 p-sm-5 bg-white form">
        <h3 class="fw-bold">Login</h3>
        <p class="text-muted">Welcome back!</p>

        <!-- Login Form-->
        <form class="mt-4"> 
          <div class="form-group">
            <label class="form-label" for="login-email">Email address</label>
            <input type="email" class="form-control" id="login-email" placeholder="name@email.com">
          </div>
          <div class="form-group">
            <label for="login-password" class="form-label d-flex justify-content-between align-items-center">
              Password
              <a href="{{webRoot}}/forgot-password.html" class="text-muted small ms-2 text-decoration-underline">Forgotten
                password?</a>
            </label>
            <input type="password" class="form-control" id="login-password" placeholder="Enter your password">
          </div>
          <button type="submit" class="btn btn-primary d-block w-100 my-4">Login</button>
        </form>
        <!-- / Login Form -->

        <p class="d-block text-center text-muted small">New customer? <a class="text-muted text-decoration-underline"
            href="{{webRoot}}/register.html">Sign up for an account</a></p>
      </div>
    </div>
    <!-- / Login Form-->

  </section>
  <!-- / Main Section-->

  <!-- Theme JS -->
  {{> footer/scripts }}

</body>

</html>
