{% extends "common/base.html" %}

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

{% block content %}
<div class="container mx-auto px-4 py-16 text-center">
    <h1 class="display-1 fw-bold" style="color: var(--primary-color);">500</h1>
    <h2 class="mb-4">Internal Server Error</h2>
    <p class="mb-4 text-muted">Sorry, something went wrong on our end. Our team has been notified and we're working to fix it.</p>
    <div class="d-flex justify-content-center gap-3 mb-4">
        <a href="{{ url_for('main.dashboard') }}" class="btn btn-primary">
            <i class="fas fa-home me-2"></i>Back to Dashboard
        </a>
        <button onclick="window.location.reload()" class="btn btn-outline-primary">
            <i class="fas fa-sync-alt me-2"></i>Try Again
        </button>
    </div>
    
    <!-- Error Details Section -->
    <div class="mt-4">
        <button class="btn btn-link text-muted" type="button" data-bs-toggle="collapse" data-bs-target="#errorDetails" aria-expanded="false" aria-controls="errorDetails">
            <i class="fas fa-info-circle me-2"></i>Show Error Details
        </button>
        <div class="collapse mt-3" id="errorDetails">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="card-subtitle text-muted">Error Details</h6>
                        <button class="btn btn-sm btn-outline-secondary" onclick="copyErrorDetails()">
                            <i class="fas fa-copy me-1"></i>Copy
                        </button>
                    </div>
                    <pre class="text-start mb-0" style="font-size: 0.875rem; max-height: 200px; overflow-y: auto;" id="errorText">{{ error }}</pre>
                </div>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
function copyErrorDetails() {
    const errorText = document.getElementById('errorText').textContent;
    navigator.clipboard.writeText(errorText).then(() => {
        const copyBtn = document.querySelector('#errorDetails .btn');
        const originalText = copyBtn.innerHTML;
        copyBtn.innerHTML = '<i class="fas fa-check me-1"></i>Copied!';
        setTimeout(() => {
            copyBtn.innerHTML = originalText;
        }, 2000);
    });
}
</script>
{% endblock %}
{% endblock %}