{{define "error"}}
  {{template "base" .}}
{{end}}

{{define "error_content"}}
<div class="flex items-center justify-center min-h-screen">
    <div class="max-w-md w-full mx-4">
        <div class="bg-gray-800 rounded-lg p-8 text-center">
            <div class="mb-6">
                <i class="fas fa-exclamation-triangle text-6xl text-red-500 mb-4"></i>
                <h1 class="text-2xl font-bold text-white mb-2">Error</h1>
                {{if .error}}
                    <h2 class="text-lg text-gray-300 mb-4">{{.error}}</h2>
                {{end}}
            </div>
            
            {{if .message}}
            <div class="bg-gray-700 rounded-lg p-4 mb-6">
                <p class="text-gray-300 text-sm">{{.message}}</p>
            </div>
            {{end}}
            
            <div class="space-y-3">
                <a href="{{url "/"}}" class="block btn-primary">
                    <i class="fas fa-home mr-2"></i>Go Home
                </a>
                <button onclick="history.back()" class="block btn-secondary w-full">
                    <i class="fas fa-arrow-left mr-2"></i>Go Back
                </button>
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "error_scripts"}}
<script>
    // No additional scripts needed for error page
</script>
{{end}}