{# ========================================================================== #}
{# :: Home page #}
{# ========================================================================== #}
{#
	This is the main or home page of the brandplatform containing information
	about the current version, the cdn and links to the pages and components.
#}

{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "components/header.njk" as header %}
{% import "components/footer.njk" as footer %}
{% import "components/button.njk" as button %}
{% import "globals/nav.njk" as navGlobals %}

{# ========================================================================== #}
{# :: Inheritance #}
{# ========================================================================== #}
{% extends "base/extends/default.njk" %}

{# ========================================================================== #}
{# :: Settings & variables #}
{# ========================================================================== #}
{% set pageParams = {
	id: "404",
	bodyClass: "",
	loadProjectCSS: false,
	loadProjectJS: false,
	loadCoreCSS: true,
	loadCoreJS: true,
	loadOverwriteCSS: true
} %}

{# ========================================================================== #}
{# :: Header #}
{# ========================================================================== #}
{% block header %}

	{{header.default("", {
		nav: {
			items: navGlobals.items,
			language: ROUTEDATA.LANGUAGE,
			languages: ROUTEDATA.LANGUAGES,
			staticPath: "/404"
		}
	})}}

{% endblock %}

{# ========================================================================== #}
{# :: Content #}
{# ========================================================================== #}
{% block content %}

<section class="bp-l-section bp-l-section--with-spacing u-margin-top-8x u-text-align-center">
	<div class="bp-l-container">
		<header class="bp-l-section__header">
			<h1 class="u-h1">{{ "404.title" | i18n }}</h1>
		</header>

		<div class="bp-l-section__content">
			<p>{{ "404.description" | i18n }}</p>
		</div>

		<div class="bp-l-section__footer">
			{{button.link("", {
				url: "/",
				text: "404.cta" | i18n
			})}}
		</div>
	</div>
</section>

{% endblock %}