{% extends "page.html" %}

{% block title %}{{ page_title or 'Mercury' }}{% endblock %}

{% block site %}
  <header class="mercury-page-header">
    <div class="mercury-page-header-inner">
      <div class="mercury-page-brand">{{ page_title or 'Mercury' }}</div>
    </div>
  </header>

  <main class="mercury-page-main">
    <div class="mercury-page-card error">
      {% block h1_error %}
        <h1 class="mercury-page-title">{{ status_code | e }}: {{ status_message | e }}</h1>
      {% endblock h1_error %}

      {% if advices %}
        {% for advice in advices %}
          <p class="mercury-page-muted">{{ advice }}</p>
        {% endfor %}
      {% endif %}

      {% block error_detail %}
        {% if message %}
          <p>{% trans %}The error was:{% endtrans %}</p>
          <div class="mercury-page-message error">
            <pre class="traceback">{{ message | e }}</pre>
          </div>
        {% endif %}
      {% endblock %}
    </div>
  </main>
{% endblock %}

{% block script %}
  <script type="text/javascript">
    window.addEventListener('load', function () {
      var traceback = document.querySelector('.traceback');
      if (traceback) traceback.scrollTop = traceback.scrollHeight;
    });
  </script>
{% endblock script %}