{% extends 'base.html' %}

{% block title %}500 - Server Error — AgentForms{% endblock %}

{% block head_extra %}
<style nonce="{{ csp_nonce }}">
    .error-page main {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 24px;
    }
    .error-content { text-align: center; max-width: 480px; }
    .error-code {
        font-size: 96px;
        font-weight: 800;
        line-height: 1;
        color: var(--accent);
        margin-bottom: 16px;
        letter-spacing: -0.03em;
    }
    .error-title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 8px;
        color: var(--text);
    }
    .error-desc {
        color: var(--text-muted);
        margin-bottom: 24px;
        line-height: 1.6;
    }
    @media (max-width: 480px) {
        .error-code { font-size: 64px; }
        .error-title { font-size: 20px; }
    }
</style>
{% endblock %}

{% block content %}
<main>
    <div class="error-content">
        <div class="error-code">500</div>
        <div class="error-title">Something Went Wrong</div>
        <p class="error-desc">We've been notified and are looking into it. Please try again later.</p>
        <a href="/" class="btn">Go Home</a>
    </div>
</main>
<footer>
    <div class="container">
        <div class="footer-inner">
            <p class="footer-copy">&copy; 2026 AgentForms. All rights reserved.</p>
            <div class="footer-links">
                <a href="/privacy">Privacy</a>
                <a href="/terms">Terms</a>
            </div>
        </div>
    </div>
</footer>
{% endblock %}