{% extends "base.html" %}

{% block title %}{{ cache.cid[:16] }} - Cache - Art-DAG L1{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <!-- Header -->
    <div class="flex items-center space-x-4 mb-6">
        <a href="/media" class="text-gray-400 hover:text-white">&larr; Media</a>
        <h1 class="text-xl font-bold font-mono">{{ cache.cid[:24] }}...</h1>
    </div>

    <!-- Preview -->
    <div class="bg-gray-800 rounded-lg border border-gray-700 mb-6 overflow-hidden">
        {% if cache.mime_type and cache.mime_type.startswith('image/') %}
        <img src="/cache/{{ cache.cid }}/raw" alt=""
             class="w-full max-h-96 object-contain bg-gray-900">

        {% elif cache.mime_type and cache.mime_type.startswith('video/') %}
        <video src="/cache/{{ cache.cid }}/raw" controls
               class="w-full max-h-96 bg-gray-900">
        </video>

        {% elif cache.mime_type and cache.mime_type.startswith('audio/') %}
        <div class="p-8 bg-gray-900">
            <audio src="/cache/{{ cache.cid }}/raw" controls class="w-full"></audio>
        </div>

        {% elif cache.mime_type == 'application/json' %}
        <div class="p-4 bg-gray-900 max-h-96 overflow-auto">
            <pre class="text-sm text-gray-300">{{ cache.content_preview }}</pre>
        </div>

        {% else %}
        <div class="p-8 bg-gray-900 text-center text-gray-500">
            <div class="text-4xl mb-2">{{ cache.mime_type or 'Unknown type' }}</div>
            <div>{{ cache.size | filesizeformat if cache.size else 'Unknown size' }}</div>
        </div>
        {% endif %}
    </div>

    <!-- User Metadata (editable) -->
    <div id="metadata-section" class="bg-gray-800 rounded-lg border border-gray-700 p-4 mb-6">
        <div class="flex items-center justify-between mb-3">
            <h3 class="text-lg font-semibold">Details</h3>
            <button hx-get="/cache/{{ cache.cid }}/meta-form"
                    hx-target="#metadata-section"
                    hx-swap="innerHTML"
                    class="text-blue-400 hover:text-blue-300 text-sm">
                Edit
            </button>
        </div>
        {% if cache.title or cache.description %}
        <div class="space-y-2 mb-4">
            {% if cache.title %}
            <h4 class="text-white font-medium">{{ cache.title }}</h4>
            {% endif %}
            {% if cache.description %}
            <p class="text-gray-400">{{ cache.description }}</p>
            {% endif %}
        </div>
        {% endif %}
        {% if cache.tags %}
        <div class="flex flex-wrap gap-2 mb-4">
            {% for tag in cache.tags %}
            <span class="bg-gray-700 text-gray-300 px-2 py-1 rounded text-sm">{{ tag }}</span>
            {% endfor %}
        </div>
        {% endif %}
        {% if cache.source_type or cache.source_note %}
        <div class="text-sm text-gray-500">
            {% if cache.source_type %}Source: {{ cache.source_type }}{% endif %}
            {% if cache.source_note %} - {{ cache.source_note }}{% endif %}
        </div>
        {% endif %}
    </div>

    <!-- Technical Metadata -->
    <div class="grid grid-cols-2 gap-4 mb-6">
        <div class="bg-gray-800 rounded-lg p-4">
            <div class="text-gray-500 text-sm">CID</div>
            <div class="font-mono text-sm text-white break-all">{{ cache.cid }}</div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4">
            <div class="text-gray-500 text-sm">Content Type</div>
            <div class="text-white">{{ cache.mime_type or 'Unknown' }}</div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4">
            <div class="text-gray-500 text-sm">Size</div>
            <div class="text-white">{{ cache.size | filesizeformat if cache.size else 'Unknown' }}</div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4">
            <div class="text-gray-500 text-sm">Created</div>
            <div class="text-white">{{ cache.created_at or 'Unknown' }}</div>
        </div>
    </div>

    <!-- IPFS -->
    {% if cache.ipfs_cid %}
    <div class="bg-gray-800 rounded-lg p-4 mb-6">
        <div class="text-gray-500 text-sm mb-1">IPFS CID</div>
        <div class="flex items-center justify-between">
            <span class="font-mono text-sm text-white">{{ cache.ipfs_cid }}</span>
            <a href="https://ipfs.io/ipfs/{{ cache.ipfs_cid }}"
               target="_blank"
               class="text-blue-400 hover:text-blue-300 text-sm">
                View on IPFS Gateway &rarr;
            </a>
        </div>
    </div>
    {% endif %}

    <!-- Related Runs -->
    {% if cache.runs %}
    <h2 class="text-lg font-semibold mb-4">Related Runs</h2>
    <div class="space-y-2">
        {% for run in cache.runs %}
        <a href="/runs/{{ run.run_id }}"
           class="block bg-gray-800 rounded p-3 hover:bg-gray-750 transition-colors">
            <div class="flex items-center justify-between">
                <span class="font-mono text-sm">{{ run.run_id[:16] }}...</span>
                <span class="text-gray-500 text-sm">{{ run.created_at }}</span>
            </div>
        </a>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Actions -->
    <div class="flex items-center space-x-4 mt-8">
        <a href="/cache/{{ cache.cid }}/raw"
           download
           class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded font-medium">
            Download
        </a>
        <button hx-post="/cache/{{ cache.cid }}/publish"
                hx-target="#share-result"
                class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded font-medium">
            Share to L2
        </button>
        <span id="share-result"></span>
    </div>
</div>
{% endblock %}