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

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

{% block meta_description %}An internal server error occurred.{% endblock %}

{% block content %}
<div class="error-container">
    <div class="error-card">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-8 text-center">
                    <div class="error-page py-5">
                        <div class="error-icon mb-4">
                            <i class="fas fa-exclamation-triangle fa-5x text-warning"></i>
                        </div>
                        <h1 class="display-1 fw-bold text-danger">500</h1>
                        <h2 class="mb-4">Internal Server Error</h2>
                        <p class="lead text-muted mb-4">
                            Something went wrong on our end. We're working to fix this issue.
                        </p>
                        <div class="alert alert-warning" role="alert">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>What happened?</strong> Our server encountered an unexpected condition that prevented it from fulfilling your request.
                        </div>
                        
                        <div class="d-grid gap-2 d-md-flex justify-content-md-center mb-4">
                            <a href="{% url 'core:home' %}" class="btn btn-primary btn-lg me-md-2">
                                <i class="fas fa-home me-2"></i>Go Home
                            </a>
                            <button onclick="location.reload()" class="btn btn-outline-secondary btn-lg">
                                <i class="fas fa-redo me-2"></i>Try Again
                            </button>
                        </div>
                        
                        <!-- Help section -->
                        <div class="mt-5">
                            <h5>Need immediate assistance?</h5>
                            <div class="row mt-3 align-items-center">
                                <div class="col-md-4">
                                    <div class="card h-100">
                                        <div class="card-body text-center">
                                            <i class="fas fa-envelope fa-2x text-primary mb-3"></i>
                                            <h6>Contact Support</h6>
                                            <p class="small text-muted">Report this issue to our team</p>
                                            <a href="{% url 'core:contact' %}" class="btn btn-sm btn-outline-primary">Contact Us</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card h-100">
                                        <div class="card-body text-center">
                                            <i class="fas fa-question-circle fa-2x text-success mb-3"></i>
                                            <h6>Help Center</h6>
                                            <p class="small text-muted">Browse our documentation</p>
                                            <a href="#" class="btn btn-sm btn-outline-success">Get Help</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Technical details for developers -->
                        <div class="mt-4">
                            <details class="text-start">
                                <summary class="btn btn-link text-muted">Technical Details</summary>
                                <div class="mt-3 p-3 bg-light rounded">
                                    <small class="text-muted">
                                        <strong>Error Code:</strong> HTTP 500 Internal Server Error<br>
                                        <strong>Timestamp:</strong> {% now "c" %}<br>
                                        <strong>Request ID:</strong> {{ request.META.HTTP_X_REQUEST_ID|default:"N/A" }}
                                    </small>
                                </div>
                            </details>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}