{% extends "base.html" %}

{% block title %}Anchors - Art-DAG{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold">Bitcoin Anchors</h1>
    </div>

    {% if anchors %}
    <div class="space-y-4">
        {% for anchor in anchors %}
        <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
            <div class="flex items-center justify-between mb-2">
                <span class="font-mono text-sm text-blue-400 truncate">{{ anchor.merkle_root[:16] }}...</span>
                {% if anchor.confirmed_at %}
                <span class="bg-green-600 text-xs px-2 py-1 rounded">Confirmed</span>
                {% else %}
                <span class="bg-yellow-600 text-xs px-2 py-1 rounded">Pending</span>
                {% endif %}
            </div>
            <div class="text-gray-400 text-sm">
                {{ anchor.activity_count or 0 }} activities | Created: {{ anchor.created_at }}
            </div>
            {% if anchor.bitcoin_txid %}
            <div class="mt-2 text-xs text-gray-500 font-mono truncate">
                TX: {{ anchor.bitcoin_txid }}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    {% if has_more %}
    <div class="mt-6 text-center">
        <a href="?offset={{ offset + limit }}&limit={{ limit }}"
           class="text-blue-400 hover:text-blue-300">Load More</a>
    </div>
    {% endif %}
    {% else %}
    <div class="text-center py-12 text-gray-400">
        <p>No anchors yet.</p>
    </div>
    {% endif %}
</div>
{% endblock %}