{% extends "base.html" %}

{% block content %}
<div class="error-container">
    <h1>404 - Page Not Found</h1>
    <div class="error-message">
        <p>The page you're looking for doesn't exist or has been moved.</p>
        {% if error_message %}
        <p class="error-details">Details: {{ error_message }}</p>
        {% endif %}
    </div>
    <div class="error-actions">
        {% if user.is_authenticated %}
            {% if user.groups.filter(name='Student').exists %}
                <a href="{% url 'studentDashboard' %}" class="btn btn-primary">Return to Dashboard</a>
            {% elif user.groups.filter(name='Teacher').exists %}
                <a href="{% url 'teacherDashboard' %}" class="btn btn-primary">Return to Dashboard</a>
            {% elif user.groups.filter(name='Parent').exists %}
                <a href="{% url 'parentDashboard' %}" class="btn btn-primary">Return to Dashboard</a>
            {% elif user.groups.filter(name='Admission Officer').exists %}
                <a href="{% url 'admissionOfficerDashboard' %}" class="btn btn-primary">Return to Dashboard</a>
            {% elif user.groups.filter(name='HOD').exists %}
                <a href="{% url 'hodDashboard' %}" class="btn btn-primary">Return to Dashboard</a>
            {% else %}
                <a href="{% url 'dashboard' %}" class="btn btn-primary">Return to Dashboard</a>
            {% endif %}
        {% else %}
            <a href="{% url 'login' %}" class="btn btn-primary">Return to Login</a>
        {% endif %}
        <button onclick="window.history.back()" class="btn btn-secondary">Go Back</button>
    </div>
    {% if settings.DEBUG and traceback %}
    <div class="debug-info">
        <h3>Debug Information:</h3>
        <pre>{{ traceback }}</pre>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_css %}
<style>
.error-container {
    text-align: center;
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.error-message {
    margin: 2rem 0;
    color: #666;
}

.error-details {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
}

.error-actions {
    margin-top: 2rem;
}

.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.debug-info {
    margin-top: 2rem;
    text-align: left;
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
}

.debug-info pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}
</style>
{% endblock %}