{% extends "base.html" %}

{% block title %}Activity {{ activity.activity_id[:16] }}{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto">
    <div class="mb-6">
        <a href="/activities" class="inline-flex items-center text-blue-400 hover:text-blue-300">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Back to Activities
        </a>
    </div>

    <div class="bg-gray-800 rounded-lg p-6">
        <div class="flex items-center justify-between mb-6">
            <h1 class="text-2xl font-bold text-white">{{ activity.activity_type }}</h1>
            <span class="px-3 py-1 bg-blue-600 text-white text-sm rounded-full">
                Activity
            </span>
        </div>

        <div class="space-y-4">
            <div>
                <p class="text-sm text-gray-400 mb-1">Activity ID</p>
                <p class="font-mono text-sm text-gray-200 break-all">{{ activity.activity_id }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-400 mb-1">Actor</p>
                <p class="text-gray-200">{{ activity.actor_id }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-400 mb-1">Published</p>
                <p class="text-gray-200">{{ activity.published }}</p>
            </div>

            {% if activity.anchor_root %}
            <div>
                <p class="text-sm text-gray-400 mb-1">Anchor Root</p>
                <p class="font-mono text-sm text-gray-200 break-all">{{ activity.anchor_root }}</p>
            </div>
            {% endif %}

            {% if activity.object_data %}
            <div>
                <p class="text-sm text-gray-400 mb-2">Object Data</p>
                <pre class="bg-gray-900 rounded p-4 text-xs text-gray-300 overflow-x-auto">{{ activity.object_data | tojson(indent=2) }}</pre>
            </div>
            {% endif %}

            {% if activity.signature %}
            <div>
                <p class="text-sm text-gray-400 mb-2">Signature</p>
                <pre class="bg-gray-900 rounded p-4 text-xs text-gray-300 overflow-x-auto">{{ activity.signature | tojson(indent=2) }}</pre>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}