{% extends "showcase/_standalone.html" %}
{% load static %}
{% block title %}404 Error Page{% endblock %}
{% block body_class %}bg-body-tertiary{% endblock %}
{% block body %}
<main class="d-flex align-items-center min-vh-100 py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6 text-center">
        <div class="display-1 fw-bold text-primary lh-1 mb-3">404</div>
        <h1 class="h3 mb-3">Oops! Page not found.</h1>
        <p class="text-secondary mb-4">
          We could not find the page you were looking for. Meanwhile, you may return to the
          dashboard or try searching for what you need.
        </p>
        <form class="row g-2 justify-content-center mb-4" role="search">
          <div class="col-sm-8">
            <div class="input-group">
              <span class="input-group-text bg-body">
                <i class="bi bi-search" aria-hidden="true"></i>
              </span>
              <input
                type="search"
                class="form-control"
                placeholder="Search…"
                aria-label="Search"
              />
            </div>
          </div>
          <div class="col-sm-auto">
            <button class="btn btn-primary w-100" type="submit">Search</button>
          </div>
        </form>
        <a href="/" class="btn btn-outline-secondary">
          <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
          Back to dashboard
        </a>
      </div>
    </div>
  </div>
</main>
{% endblock %}