{% extends "layout.html.tera" %}
{% block title %}{{ status_code }} {{ status_text }} — {{ app_display }}{% endblock title %}
{% block content %}
<section aria-label="Server error">
<h2>{{ status_code }} — {{ status_text }}</h2>
<div class="alert" role="alert" aria-label="Error explanation" data-type="error">
<p>
<strong>Something went wrong on our end.</strong>
The request could not be completed.
</p>
{% if message %}
<p>{{ message }}</p>
{% endif %}
</div>
{% if request_id %}
<ol class="summary-list" aria-label="Error metadata">
<li class="summary-list-item">
<dl>
<dt>Request ID</dt>
<dd><code>{{ request_id }}</code></dd>
</dl>
</li>
<li class="summary-list-item">
<dl>
<dt>At</dt>
<dd><time datetime="{{ at }}">{{ at }}</time></dd>
</dl>
</li>
</ol>
<p>
<span class="hint" aria-label="Support hint">
Include the Request ID when reporting this error.
</span>
</p>
{% endif %}
{% if detail %}
<details class="details" aria-label="Technical detail">
<summary>Technical detail</summary>
<pre class="code-block" aria-label="Error trace"><code>{{ detail }}</code></pre>
</details>
{% endif %}
<div class="action-bar" role="toolbar" aria-label="Error actions">
<a class="button" href="/" aria-label="Return to home">Home</a>
<a class="button" href="/health" aria-label="Check system health">System health</a>
</div>
<a class="back-link"
href="javascript:history.length > 1 ? history.back() : (location.href='/')"
aria-label="Go back to the previous page">Back</a>
</section>
{% endblock content %}