{% extends 'base.html' %}

{% block title %}HyperXQL - Page Not Found{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 text-center">
            <div class="error-container mb-5">
                <div class="error-code mb-4">404</div>
                <h2 class="mb-4">Page Not Found</h2>
                <p class="text-muted mb-5">The page you were looking for doesn't exist or has been moved.</p>
                
                <div class="d-flex justify-content-center gap-3">
                    <a href="/" class="btn-go">
                        <i class="fas fa-home me-2"></i> Go to Homepage
                    </a>
                    <a href="/query" class="btn btn-outline-secondary">
                        <i class="fas fa-search me-2"></i> Run a Query
                    </a>
                </div>
            </div>
            
            <div class="card mt-5">
                <div class="card-body">
                    <h5 class="mb-3">Quick Links</h5>
                    <div class="row g-3">
                        <div class="col-sm-4">
                            <a href="/" class="text-decoration-none">
                                <div class="p-3 rounded quick-link-card">
                                    <i class="fas fa-home fa-fw fa-lg mb-2"></i>
                                    <div>Home</div>
                                </div>
                            </a>
                        </div>
                        <div class="col-sm-4">
                            <a href="/query" class="text-decoration-none">
                                <div class="p-3 rounded quick-link-card">
                                    <i class="fas fa-database fa-fw fa-lg mb-2"></i>
                                    <div>Query</div>
                                </div>
                            </a>
                        </div>
                        <div class="col-sm-4">
                            <a href="/db-info" class="text-decoration-none">
                                <div class="p-3 rounded quick-link-card">
                                    <i class="fas fa-table fa-fw fa-lg mb-2"></i>
                                    <div>Database</div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
.error-container {
    padding: 2rem 0;
}

.error-code {
    font-size: 8rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(45deg, var(--bs-primary), var(--bs-info));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quick-link-card {
    background-color: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.quick-link-card:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}
</style>
{% endblock %}