{% extends "base.html" %}

{% block title %}Error - AWS Inventory Browser{% endblock %}

{% block content %}
<div class="min-h-[60vh] flex items-center justify-center">
    <div class="text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 mb-6">
            <svg class="h-8 w-8 text-red-600" 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-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
            </svg>
        </div>
        <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ error_title | default('Something went wrong') }}</h1>
        <p class="text-gray-600 mb-6 max-w-md mx-auto">{{ error_message | default('An unexpected error occurred. Please try again.') }}</p>
        {% if error_details %}
        <div class="bg-gray-100 rounded-lg p-4 mb-6 max-w-xl mx-auto text-left">
            <p class="text-xs font-mono text-gray-600">{{ error_details }}</p>
        </div>
        {% endif %}
        <div class="flex items-center justify-center space-x-4">
            <a href="/" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
                Go to Dashboard
            </a>
            <button onclick="window.history.back()" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                Go Back
            </button>
        </div>
    </div>
</div>
{% endblock %}