{% extends 'layouts/base-fullscreen.html' %}

{% block title %} Error 404 {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

  <section>

    <div class="page-header section-height-75">

      <div class="container">
        <div class="row">
          <div class="col-xl-4 col-lg-5 col-md-6 d-flex flex-column mx-auto">
            <div class="card card-plain mt-8">
              <div class="card-header pb-0 text-left bg-transparent">
                <h3 class="font-weight-bolder text-danger text-gradient">
                    Error 404
                </h3>
                <p class="mb-0 text-danger">
                  {% if message %}
                    message
                  {% else %}
                    Page not found - If the problem persist, please access support.
                  {% endif %}                     
                </p>
              </div>
              <div class="card-body">
                  <div class="text-center">
                    <a type="button" href="/" class="btn bg-gradient-info w-100 mt-4 mb-0">HOME</a>
                  </div>
              </div>
              <div class="card-footer text-center pt-0 px-lg-2 px-1">
                <p class="mb-4 text-sm mx-auto">
                  Contact 
                  <a href={{"DISCORD_SUPPORT_URL"|env}} class="text-info text-gradient font-weight-bold">Support</a>
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="oblique position-absolute top-0 h-100 d-md-block d-none me-n8">
              <div class="oblique-image bg-cover position-absolute fixed-top ms-auto h-100 z-index-0 ms-n6" style="background-image:url('{{ ASSETS_ROOT }}/img/curved-images/curved6.jpg')"></div>
            </div>
          </div>
        </div>
      </div>

    </div>
    
  </section>

{% endblock content %}

<!-- Specific JS goes HERE --> 
{% block javascripts %}{% endblock javascripts %}