{% extends "base.html" %}

{% block title %}500 - Server Error | NailTech Nation{% endblock %}

{% block content %}
<div class="error-page">
    <div class="container">
        <div class="error-content">
            <h1 class="error-code">500</h1>
            <h2 class="error-title">Something Went Wrong</h2>
            <p class="error-message">We're experiencing technical difficulties. Our team has been notified and is working on a fix.</p>
            <div class="error-actions">
                <a href="{{ url_for('public.index') }}" class="btn btn-primary">Return Home</a>
                <a href="javascript:window.location.reload()" class="btn btn-secondary">Try Again</a>
            </div>
        </div>
    </div>
</div>

<style>
.error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.error-code {
    font-size: 8rem;
    background: var(--bg-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-title {
    margin: var(--spacing-md) 0;
}

.error-message {
    color: var(--light-text);
    margin-bottom: var(--spacing-lg);
}

.error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
</style>
{% endblock %}