{% extends 'layouts/base' %}

{# 404 Image #}
{% set image404 = craft.assets()
	.volume('icons')
	.title('404')
	.one()
%}

{# Get left angel icon #}
{% set chevronLeft = craft.assets()
	.volume('icons')
	.title('Chevron Left')
	.one()
%}

{% set squareWaveImage = craft.assets()
    .volume('icons')
    .title('Square Waves')
    .one()
%}

{% block content %}
	<section class="bg-raisen-black ">
		<div class="outer-container">
			<div class="inner-container-l flex justify-center gap-16 py-40 xl:gap-24 text-white">
				<img class="hidden lg:block h-144 w-96 object-contain object-top" src="{{ image404.getUrl() }}" alt={{ image404.altText }}/>
				<div class="flex flex-col flex-grow gap-20">
					<div class="pl-0 md:pl-16 xl:pl-36">
						<h1 class="font-ador mb-5 text-7xl">Oops</h1>
						<h2 class="font-poppins mb-7 text-4xl pr-7">Something's missing.</h2>
						<p class="font-acumin mb-8 pr-7 max-w-md">This page doesn't exist or you have assembled the link incorrectly.</p>
						<button class="border-none bg-transparent py-3">
							<a class="font-acumin group text-xl flex gap-6 items-center" href="{{ url('/') }}">
								<span class="border-phillipine-grey border-2 group-hover:bg-phillipine-grey flex items-center justify-center p-2 rounded-full transition-all">
									{{ svg(chevronLeft)|attr({ class: "fill-phillipine-grey group-hover:fill-white h-6 w-6 transition-all" }) }}
								</span>
								Go Back Home
							</a>
						</button>
					</div>
					<div role="presentation" class="bg-square-wave bg-cover bg-no-repeat shrink-1 h-44 xl:h-64 w-full" aria-label="{{ squareWaveImage.altText }}"/>
				</div>
			</div>
		</div>
	</section>
{% endblock content %}