{%extends 'base.html'%}
{%block title%}500 - Server Error - White Neuron{%endblock%}
{%block description%}500 - Internal Server Error - White Neuron{%endblock%}
{%block content%}
<section class="error-section" id="error" style="position: relative; overflow: hidden;">
    <div class="stars-bg" style="position:absolute; inset:0; background: radial-gradient(ellipse at top, rgba(239,68,68,0.15), transparent 60%), radial-gradient(ellipse at bottom, rgba(107,114,128,0.12), transparent 60%);"></div>
    <div class="grid-lines" style="position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle at center, black, transparent 75%);"></div>
    <div class="container" style="position: relative; z-index: 1;">
        <div style="text-align: center; padding: 80px 0;">
            <div style="display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px;">
                <svg width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color: rgba(239,68,68,0.9); filter: drop-shadow(0 6px 18px rgba(239,68,68,0.35));">
                    <path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2z"/>
                    <path d="M12 8v4"/>
                    <path d="M12 16h.01"/>
                </svg>
            </div>

            <h1 class="main-title" style="font-size: 5rem; line-height: 1; margin: 0; color: rgba(255,255,255,0.95); letter-spacing: 2px;">500</h1>
            <h2 class="subtitle1" style="margin-top: 12px; color: rgba(255,255,255,0.85); font-size: 1.5rem;">Internal Server Error</h2>
            <p style="margin: 12px auto 30px; max-width: 680px; color: rgba(255,255,255,0.7); font-size: 1rem; line-height: 1.7;">
                Something went wrong on our end. Our team has been notified and is working to fix it.
                Please try again in a few moments.
            </p>

            <div style="display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center;">
                <a href="javascript:location.reload()" class="dashboard-btn" style="
                    background: linear-gradient(135deg, rgba(239,68,68,0.3), rgba(107,114,128,0.3));
                    border: 1px solid rgba(239,68,68,0.5);
                    color: rgba(255,255,255,1);
                    text-decoration: none;
                    padding: 12px 22px;
                    border-radius: 10px;
                    font-size: 0.95rem;
                    font-weight: 600;
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    transition: transform .2s ease, box-shadow .2s ease;
                ">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="23 4 23 10 17 10"/>
                        <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
                    </svg>
                    Try again
                </a>
                <a href="/" class="dashboard-btn" style="
                    background: rgba(255,255,255,0.08);
                    border: 1px solid rgba(255,255,255,0.18);
                    color: rgba(255,255,255,0.95);
                    text-decoration: none;
                    padding: 12px 22px;
                    border-radius: 10px;
                    font-size: 0.95rem;
                    font-weight: 600;
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    transition: transform .2s ease, box-shadow .2s ease;
                ">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M3 12l9-9 9 9"/>
                        <path d="M9 21V9h6v12"/>
                    </svg>
                    Back to home
                </a>
            </div>
        </div>
    </div>

    <div class="plus-symbol" style="position:absolute; top: 12%; left: 22%; color: rgba(255,255,255,0.15); font-size: 28px;">+</div>
    <div class="plus-symbol" style="position:absolute; bottom: 18%; right: 18%; color: rgba(255,255,255,0.12); font-size: 24px;">+</div>
    <div class="plus-symbol" style="position:absolute; top: 35%; right: 35%; color: rgba(255,255,255,0.1); font-size: 20px;">+</div>
</section>
{%endblock%}