{% extends "base.html" %}

{% block title %}LocalScan - Blockchain Explorer{% endblock %}

{% block content %}
<div class="space-y-8">
    {% if error %}
    <div class="bg-red-50 border-l-4 border-red-400 p-4 rounded-md">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <p class="text-sm text-red-700">
                    {{ error }}
                </p>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Hero Section -->
    <div class="bg-blue-600 rounded-2xl p-8 text-white shadow-xl shadow-blue-200">
        <h1 class="text-3xl font-bold mb-4">LocalScan Explorer</h1>
        <p class="text-blue-100 max-w-2xl">The easy-to-use, minimal blockchain explorer for all your indexing needs. Track blocks, transactions, and addresses in real-time.</p>
        <div class="mt-6 flex lg:hidden">
            <form action="/search" method="GET" class="relative w-full">
                <input type="text" name="q" placeholder="Search by Address / Txn Hash / Block" class="w-full bg-blue-500 border-none rounded-lg py-3 pl-12 pr-4 focus:ring-2 focus:ring-white focus:bg-blue-400 placeholder-blue-200 transition-all">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                    <svg class="h-5 w-5 text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                </div>
            </form>
        </div>
    </div>

    <!-- Latest Data Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Latest Blocks -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
                <h2 class="font-semibold text-slate-800">Latest Blocks</h2>
                <a href="/blocks" class="text-xs font-medium text-blue-600 hover:text-blue-700 uppercase tracking-wider">View All</a>
            </div>
            <div class="divide-y divide-slate-100">
                {% for block in blocks %}
                <div class="px-6 py-4 hover:bg-slate-50 transition-colors">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <div class="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center text-slate-500">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                            </div>
                            <div>
                                <a href="/block/{{ block.number }}" class="text-blue-600 font-medium hover:text-blue-700">#{{ block.number }}</a>
                                <p class="text-xs text-slate-500 mt-1 uppercase tracking-tight font-medium">{{ block.timestamp | timeago }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-sm font-medium text-slate-900">{{ block.tx_count }} Txns</p>
                            <p class="text-xs text-slate-500 mt-1">{{ block.gas_used | default(0) }} Gas</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Latest Transactions -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
                <h2 class="font-semibold text-slate-800">Latest Transactions</h2>
                <a href="/txs" class="text-xs font-medium text-blue-600 hover:text-blue-700 uppercase tracking-wider">View All</a>
            </div>
            <div class="divide-y divide-slate-100">
                {% for tx in transactions %}
                <div class="px-6 py-4 hover:bg-slate-50 transition-colors">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <div class="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center text-slate-500 font-bold text-xs">TX</div>
                            <div class="min-w-0">
                                <a href="/tx/0x{{ tx.hash }}" class="text-blue-600 font-medium hover:text-blue-700 block truncate w-32 md:w-48">0x{{ tx.hash }}</a>
                                <p class="text-xs text-slate-500 mt-1 flex items-center">
                                    <span class="mr-2 uppercase tracking-tight font-medium">{{ tx.block.timestamp | timeago }}</span>
                                    <span>From: <a href="/address/{{ tx.from_address }}" class="text-blue-500">{{ tx.from_address[:8] }}...</a></span>
                                </p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-sm font-semibold text-slate-900">{{ tx.value | from_wei }} ETH</p>
                            <p class="text-xs text-slate-500 mt-1">To: {% if tx.to_address %}<a href="/address/{{ tx.to_address }}" class="text-blue-500">{{ tx.to_address[:10] }}...</a>{% else %}<span class="text-slate-400 italic">Contract Creation</span>{% endif %}</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}