{% extends "base.html" %}
{% load static %}

{% block extra_head %}
  <meta name="robots" content="noindex,nofollow" />
  <link href="{% static 'css/error-pages.css' %}?v=prod-final-4" rel="stylesheet">
  <meta property="og:title" content="{{ seo_meta.title }}" />
  <meta property="og:description" content="{{ seo_meta.description }}" />
  <meta property="og:url" content="{{ seo_meta.absolute_url }}" />
  <meta property="og:site_name" content="{{ seo_meta.site_name }}" />
{% endblock %}

{% block content %}
<section class="error-page container">
  <div class="error-page__inner">
    <div class="error-page__copy">
      <span class="eyebrow">Error {{ status_code }}</span>
      <h1 class="heading-xl">{{ error_title }}</h1>
      <p class="text-lead">{{ error_message }}</p>
      <div class="button-group">
        {% for button in error_buttons %}
          <a href="{{ button.url }}" class="btn {% if button.style == 'primary' %}btn-primary{% else %}btn-secondary{% endif %}">
            {{ button.label }}
          </a>
        {% endfor %}
      </div>
    </div>

    <div class="error-page__visual {{ illustration_class }}">
      <div class="error-page__circle"></div>
      <div class="error-page__illustration">
        <div class="error-page__icon">{{ status_code }}</div>
      </div>
    </div>
  </div>
</section>
{% endblock %}