{% extends "base.html" %}

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

{% block content %}
<div class="max-w-6xl mx-auto">
    <h1 class="text-3xl font-bold mb-6">Your Assets</h1>

    {% if assets %}
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" id="assets-grid">
        {% for asset in assets %}
        <a href="/assets/{{ asset.id }}"
           class="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all">
            {% if asset.asset_type == 'image' %}
            <img src="{{ asset.thumbnail_url or '/assets/' + asset.id + '/thumb' }}"
                 alt="{{ asset.name }}"
                 class="w-full h-40 object-cover">
            {% elif asset.asset_type == 'video' %}
            <div class="w-full h-40 bg-gray-900 flex items-center justify-center">
                <svg class="w-12 h-12 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/>
                </svg>
            </div>
            {% else %}
            <div class="w-full h-40 bg-gray-900 flex items-center justify-center">
                <span class="text-gray-600">{{ asset.asset_type }}</span>
            </div>
            {% endif %}

            <div class="p-3">
                <div class="font-medium text-white truncate">{{ asset.name }}</div>
                <div class="text-xs text-gray-500">{{ asset.asset_type }}</div>
                {% if asset.ipfs_cid %}
                <div class="text-xs text-green-400 mt-1">Published</div>
                {% endif %}
            </div>
        </a>
        {% endfor %}
    </div>

    {% if has_more %}
    <div hx-get="/assets?offset={{ offset + limit }}"
         hx-trigger="revealed"
         hx-swap="beforeend"
         hx-target="#assets-grid"
         class="h-20 flex items-center justify-center text-gray-500 mt-4">
        Loading more...
    </div>
    {% endif %}

    {% else %}
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-12 text-center">
        <p class="text-gray-500 mb-4">No assets yet</p>
        <p class="text-gray-600 text-sm">Create content on an L1 renderer and publish it here.</p>
    </div>
    {% endif %}
</div>
{% endblock %}