{% extends "base.html" %}

{% block title %}Storage - 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">Storage Providers</h1>
        <a href="/storage/add" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg text-sm">
            Add Storage
        </a>
    </div>

    {% if storages %}
    <div class="space-y-4">
        {% for storage in storages %}
        <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-medium">{{ storage.name or storage.provider_type }}</span>
                <span class="text-xs px-2 py-1 rounded {% if storage.is_active %}bg-green-600{% else %}bg-gray-600{% endif %}">
                    {{ storage.provider_type }}
                </span>
            </div>
            <div class="text-gray-400 text-sm">
                {% if storage.endpoint %}
                {{ storage.endpoint }}
                {% elif storage.bucket %}
                Bucket: {{ storage.bucket }}
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-12 text-gray-400">
        <p>No storage providers configured.</p>
        <a href="/storage/add" class="text-blue-400 hover:text-blue-300 mt-2 inline-block">Add one now</a>
    </div>
    {% endif %}
</div>
{% endblock %}