{% extends "base.html" %}

{% block title %}Storage Providers - Art-DAG L1{% endblock %}

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

    <p class="text-gray-400 mb-8">
        Configure your IPFS pinning services. Data is pinned to your accounts, giving you full control.
    </p>

    <!-- Provider Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        {% for key, info in providers_info.items() %}
        <a href="/storage/type/{{ key }}"
           class="bg-gray-800 border border-gray-700 rounded-lg p-4 hover:border-{{ info.color }}-500 transition-colors">
            <div class="flex items-center justify-between mb-2">
                <span class="text-lg font-medium text-{{ info.color }}-400">{{ info.name }}</span>
                {% set count = storages | selectattr('provider_type', 'equalto', key) | list | length %}
                {% if count > 0 %}
                <span class="bg-{{ info.color }}-900 text-{{ info.color }}-300 px-2 py-0.5 rounded text-sm">
                    {{ count }} configured
                </span>
                {% endif %}
            </div>
            <p class="text-gray-400 text-sm">{{ info.desc }}</p>
        </a>
        {% endfor %}
    </div>

    <!-- Configured Providers -->
    {% if storages %}
    <h2 class="text-xl font-semibold mb-4">Your Storage Providers</h2>
    <div class="space-y-4">
        {% for storage in storages %}
        {% set info = providers_info.get(storage.provider_type, {'name': storage.provider_type, 'color': 'gray'}) %}
        <div class="bg-gray-800 border border-gray-700 rounded-lg p-4" id="storage-{{ storage.id }}">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center space-x-3">
                    <span class="text-{{ info.color }}-400 font-medium">{{ storage.provider_name or info.name }}</span>
                    {% if storage.is_active %}
                    <span class="bg-green-900 text-green-300 px-2 py-0.5 rounded text-xs">Active</span>
                    {% else %}
                    <span class="bg-gray-700 text-gray-400 px-2 py-0.5 rounded text-xs">Inactive</span>
                    {% endif %}
                </div>
                <div class="flex items-center space-x-2">
                    <button hx-post="/storage/{{ storage.id }}/test"
                            hx-target="#test-result-{{ storage.id }}"
                            class="text-gray-400 hover:text-white text-sm">
                        Test
                    </button>
                    <button hx-delete="/storage/{{ storage.id }}"
                            hx-target="#storage-{{ storage.id }}"
                            hx-swap="outerHTML"
                            hx-confirm="Remove this storage provider?"
                            class="text-red-400 hover:text-red-300 text-sm">
                        Remove
                    </button>
                </div>
            </div>

            <div class="grid grid-cols-3 gap-4 text-sm">
                <div>
                    <span class="text-gray-500">Capacity:</span>
                    <span class="text-gray-300">{{ storage.capacity_gb }} GB</span>
                </div>
                <div>
                    <span class="text-gray-500">Used:</span>
                    <span class="text-gray-300">{{ (storage.used_bytes / 1024 / 1024 / 1024) | round(2) }} GB</span>
                </div>
                <div>
                    <span class="text-gray-500">Pins:</span>
                    <span class="text-gray-300">{{ storage.pin_count }}</span>
                </div>
            </div>

            <div id="test-result-{{ storage.id }}" class="mt-2 text-sm"></div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-8 text-center">
        <p class="text-gray-400 mb-4">No storage providers configured yet.</p>
        <p class="text-gray-500 text-sm">Click on a provider above to add your first one.</p>
    </div>
    {% endif %}
</div>
{% endblock %}