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

<head>
  <?php require_once "../../base/meta.php" ?>

  <title>Guest Book DB - Login</title>

  <script src="./js/formValidation.js"></script>
</head>

<body>
  <?php
  // HTML
  require_once "../../base/icons.php";
  // PHP
  require_once "../../base/headers.php";
  Headers::html();

  session_name("PHP_SESSION_guestBook");
  session_start();
  $errors = $_SESSION["error"] ?? [];
  $messages = $_SESSION["message"] ?? [];
  $_SESSION["error"] = [];
  $_SESSION["message"] = [];

  if (isset($_SESSION["user"])) {
    Headers::redirect(".");
    return;
  }
  ?>

  <div class="container-fluid p-0">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href=".">
          <svg class="bi flex-shrink-0 me-2" width="24" height="24">
            <use xlink:href="#arrow-left" />
          </svg>
          Home
        </a>
      </div>
    </nav>

    <div class="row m-0 mb-3">
      <div class="col">
        <?php foreach ($errors as $error) {
          include "./components/error.php";
        } ?>
      </div>
    </div>

    <div class="row m-1 mb-3">
      <div class="col">
        <?php foreach ($messages as $message) {
          include "./components/message.php";
        } ?>
      </div>
    </div>

    <form action="./actions/login" method="post" class="needs-validation row g-3 m-0 position-relative" novalidate>
      <fieldset class="mt-0">
        <div class="col m-0 g-3">
          <div class="mb-3">
            <input class="form-control" type="text" name="username" required placeholder="Username" />
            <div class="invalid-feedback">
              Please enter a username.
            </div>
          </div>
          <div class="mb-3">
            <input class="form-control" type="password" name="password" required placeholder="Password" />
            <div class="invalid-feedback">
              Please enter a password.
            </div>
          </div>
          <button type="submit" class="btn btn-primary mb-3">Log in</button>
        </div>
      </fieldset>
      <p class="m-0">
        Don't have an account yet? <a href="./register">Register</a> now!
      </p>
    </form>

</body>

</html>