{% extends "layout.html" %}
{#
  The console's error page (070 E.34). Every word comes from the copy layer:
  one plain lead for the status class, the hints that fit the path (the chat
  hint only on a chat path), and the raw detail one click away behind "Show
  details" — never the first thing a person reads. No capitals, no `>` prompts.
  `error_page.error_context` builds the context.
#}
{% block title %}{{ t('error.title') }}{% endblock %}

{% set ws_url = ws_url|default('') %}

{% block content %}
<div class="error-screen">
    <div class="error-box" style="max-width: 100%; width: 72ch;">
        <h1 class="error-header">{{ t('error.heading') }}</h1>
        <div class="error-body">
            <p class="error-message">{{ lead }}</p>
            {% if hints %}
            <ul class="troubleshooting-hints">
                {% for hint in hints %}<li class="troubleshooting-hint">{{ hint }}</li>
                {% endfor %}
            </ul>
            {% endif %}
            <div class="error-actions">
                <a href="/" class="action-link">{{ t('error.home') }}</a>
            </div>
            <details class="error-section">
                <summary>{{ t('error.details') }}</summary>
                {% if details %}<pre class="section-content">{{ details }}</pre>{% endif %}
                {% if metadata_paths %}
                <pre class="section-content">{% for path in metadata_paths %}{{ path }}
{% endfor %}</pre>
                {% endif %}
                {% if checked_dir %}<pre class="section-content">{{ checked_dir }}</pre>{% endif %}
                {% if session_id %}
                <button id="repair-session" class="action-btn" data-session-id="{{ session_id }}">{{ t('error.repair') }}</button>
                {% endif %}
            </details>
        </div>
    </div>
</div>

<script src="/static/js/error-page.js"></script>
{% endblock %}