{% extends '_layouts/base-web-layout' %}

{% block content %}
{% set entry = craft.entries.section('page404').one() %}
{% block customCss %}
  <link rel="preload"
    href="/assets/css/pages/pege404.page.css"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'" />
  <noscript>
    <link rel="stylesheet" href="/assets/css/pages/pege404.page.css" />
  </noscript>
{% endblock %}
<section class="page404">
    <div class="container py-5">
        <div class="row justify-content-between">
            <div class="col-md-12 text-center">
                <h1 class="page404__title pb-3">{{entry.title}}</h1>
                <h4 class="page404__subtitle">{{entry.subtitle}}</h4>
            </div>
        </div>
        {% set img = entry.image.one  %}
        {% if img is not empty %}
        <div class="row justify-content-center py-3">
            <div class="col-md-6 d-flex justify-content-center">
                <img class="lazy img-fluid" data-src="{{img.getUrl('headerCard')}}" src="{{img.getUrl('headerCard')}}" alt="{{entry.title}}">
            </div>
        </div>
        {% endif %}
        <div class="row justify-content-center py-3">
            <div class="col-md-6 text-center d-flex justify-content-center">
                {% set btn = entry.fieldLinkCustomText %}   
                {% if btn is not empty %}
                <a {{btn.getLinkAttributes()}} class="page404__btn btn py-2 px-3">
                    <span>{{ btn.customText|t|upper }}</span>
                    {{svg("@webroot/assets/img/arrow-simple.svg")}}
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</section>
{% endblock %}