<body class="bg-default">
  <div class="main-content">
    <!-- Navbar -->
    <% include ../partials/auth/navbar %>
    <!-- Header -->
    <% include ../partials/auth/header %>
    <!-- Page content -->
    <div class="container mt--8 pb-5">
      <div class="row justify-content-center">
        <div class="col-lg-5 col-md-7">
          <div class="card bg-secondary shadow border-0">
            <div class="card-body px-lg-5 py-lg-5">
              <% if (locals.messages && messages.success) { %>
                <div class="mb-3">
                  <small class="text-success font-weight-700"><%= messages.success %></small>
                </div>
              <% } %>
              <form role="form" action="/login" method="POST">
                <% if (locals.messages && messages.errors && messages.errors.databaseError) { %>
                  <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <%= messages.errors.databaseError %>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <span aria-hidden="true">×</span>
                    </button>
                  </div>
                <% } %>
                <div class="form-group mb-3">
                  <div class="input-group input-group-alternative">
                    <div class="input-group-prepend">
                      <span class="input-group-text"><i class="ni ni-single-02"></i></span>
                    </div>
                    <input class="form-control" placeholder="User" type="text" name="username" value="<%= locals.email||'' %>">
                  </div>
                  <% if (locals.messages && messages.errors) { %>
                    <% Object.keys(messages.errors).filter(function(key) { return ['username', 'invalidEmailOrPassword', 'internalServerError'].includes(key); }).map(function(key) { %>
                      <strong class="invalid-feedback" style="display: block">
                        <%= messages.errors[key] %>
                      </strong>
                    <% }) %>
                  <% } %>
                </div>
                <div class="form-group">
                  <div class="input-group input-group-alternative">
                    <div class="input-group-prepend">
                      <span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
                    </div>
                    <input class="form-control" placeholder="Password" type="password" name="password">
                  </div>
                  <% if (locals.messages && messages.errors && messages.errors.password) { %>
                    <strong class="invalid-feedback" style="display: block">
                      <%= messages.errors.password %>
                    </strong>
                  <% } %>
                </div>
                <div class="custom-control custom-control-alternative custom-checkbox">
                  <input class="custom-control-input" id="customCheckLogin" type="checkbox" name="check" <%= locals.email?'checked':'' %>>
                  <label class="custom-control-label" for="customCheckLogin">
                    <span class="text-muted">Ingat saya</span>
                  </label>
                </div>
                <div class="text-center">
                  <button class="btn btn-primary my-4">Sign in</button>
                </div>
              </form>
            </div>
          </div>
          <!-- <div class="row mt-3">
            <div class="col-6">
              <a href="/reset-password" class="text-light"><small>Forgot password?</small></a>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
  <!-- Footer -->
  <!-- <% include ../partials/auth/footer %> -->

  <!-- Include scripts -->
  <% include ../partials/scripts %>
</body>
