{% extends "base.html" %}

{% block title %}404 - Not Found | LocalScan Explorer{% endblock %}

{% block content %}
<div class="flex flex-col items-center justify-center py-24 text-center">
    <div class="w-24 h-24 bg-blue-50 rounded-full flex items-center justify-center mb-6">
        <svg class="w-12 h-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
    </div>
    <h1 class="text-6xl font-bold text-slate-800 mb-2">404</h1>
    <p class="text-xl font-medium text-slate-600 mb-2">Not Found</p>
    <p class="text-slate-400 max-w-md mb-8">
        {% if detail %}{{ detail }}{% else %}The block, transaction, or address you're looking for doesn't exist or hasn't been indexed yet.{% endif %}
    </p>
    <div class="flex flex-col sm:flex-row gap-3">
        <a href="/" class="inline-flex items-center px-5 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg>
            Go Home
        </a>
        <button onclick="history.back()" class="inline-flex items-center px-5 py-2.5 bg-slate-100 text-slate-700 rounded-lg font-medium hover:bg-slate-200 transition-colors">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
            Go Back
        </button>
    </div>
</div>
{% endblock %}