{% extends "base.html" %}

{% block title %}Error {{ error_code }} - Project Management System{% endblock %}

{% block content %}
<div class="hero min-h-screen">
    <div class="hero-content text-center">
        <div class="max-w-md">
            <div class="card w-96 bg-base-100 shadow-xl">
                <div class="card-body">
                    <!-- Error Icon -->
                    <div class="flex justify-center mb-4">
                        {% if error_code == 404 %}
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        {% elif error_code == 403 %}
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                        {% else %}
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
                        </svg>
                        {% endif %}
                    </div>
                    
                    <!-- Error Code -->
                    <h1 class="text-6xl font-bold {% if error_code == 404 %}text-warning{% else %}text-error{% endif %} mb-4">
                        {{ error_code }}
                    </h1>
                    
                    <!-- Error Message -->
                    <h2 class="text-xl font-semibold mb-4">{{ error_message }}</h2>
                    
                    <!-- Additional Messages -->
                    {% if error_code == 404 %}
                    <p class="text-base-content/70 mb-6">
                        Halaman yang Anda cari tidak ditemukan. Mungkin URL salah atau halaman telah dipindahkan.
                    </p>
                    {% elif error_code == 403 %}
                    <p class="text-base-content/70 mb-6">
                        Anda tidak memiliki izin untuk mengakses halaman ini. Silakan login dengan akun yang sesuai.
                    </p>
                    {% elif error_code == 500 %}
                    <p class="text-base-content/70 mb-6">
                        Terjadi kesalahan pada server. Tim kami sedang memperbaiki masalah ini.
                    </p>
                    {% endif %}
                    
                    <!-- Action Buttons -->
                    <div class="card-actions justify-center space-x-2">
                        <button onclick="window.history.back()" class="btn btn-outline">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                            </svg>
                            Kembali
                        </button>
                        
                        <a href="{{ url_for('index') }}" class="btn btn-primary">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                            </svg>
                            Beranda
                        </a>
                        
                        {% if error_code == 403 %}
                        <a href="{{ url_for('logout') }}" class="btn btn-secondary">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                            </svg>
                            Logout
                        </a>
                        {% endif %}
                    </div>
                    
                    <!-- Help Text -->
                    <div class="mt-6">
                        <div class="text-sm text-base-content/50">
                            Jika masalah berlanjut, silakan hubungi administrator
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Auto redirect to home after 30 seconds for 500 errors
{% if error_code == 500 %}
setTimeout(function() {
    if (confirm('Redirect ke halaman utama?')) {
        window.location.href = '{{ url_for("index") }}';
    }
}, 30000);
{% endif %}
</script>
{% endblock %}