{% extends "base.html" %}

{% block title %}{{ provider_info.name }} - Storage - Art-DAG L1{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="flex items-center space-x-4 mb-6">
        <a href="/storage" class="text-gray-400 hover:text-white">&larr; All Providers</a>
        <h1 class="text-2xl font-bold text-{{ provider_info.color }}-400">{{ provider_info.name }}</h1>
    </div>

    <p class="text-gray-400 mb-8">{{ provider_info.desc }}</p>

    <!-- Add New -->
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-6 mb-8">
        <h2 class="text-lg font-semibold mb-4">Add {{ provider_info.name }} Account</h2>

        <form hx-post="/storage/add"
              hx-target="#add-result"
              class="space-y-4">
            <input type="hidden" name="provider_type" value="{{ provider_type }}">

            <div>
                <label class="block text-gray-400 text-sm mb-1">Name (optional)</label>
                <input type="text" name="provider_name"
                       placeholder="{{ provider_type }}-1"
                       class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white">
            </div>

            {% if provider_type == 'pinata' %}
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-gray-400 text-sm mb-1">API Key *</label>
                    <input type="text" name="api_key" required
                           class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white">
                </div>
                <div>
                    <label class="block text-gray-400 text-sm mb-1">Secret Key *</label>
                    <input type="password" name="secret_key" required
                           class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white">
                </div>
            </div>

            {% elif provider_type in ['web3storage', 'nftstorage'] %}
            <div>
                <label class="block text-gray-400 text-sm mb-1">API Token *</label>
                <input type="password" name="api_token" required
                       class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white">
            </div>

            {% elif provider_type == 'infura' %}
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-gray-400 text-sm mb-1">Project ID *</label>
                    <input type="text" name="project_id" required
                           class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white">
                </div>
                <div>
                    <label class="block text-gray-400 text-sm mb-1">Project Secret *</label>
                    <input type="password" name="project_secret" required
                           class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white">
                </div>
            </div>

            {% elif provider_type in ['filebase', 'storj'] %}
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-gray-400 text-sm mb-1">Access Key *</label>
                    <input type="text" name="access_key" required
                           class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white">
                </div>
                <div>
                    <label class="block text-gray-400 text-sm mb-1">Secret Key *</label>
                    <input type="password" name="secret_key" required
                           class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white">
                </div>
            </div>
            <div>
                <label class="block text-gray-400 text-sm mb-1">Bucket *</label>
                <input type="text" name="bucket" required
                       class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white">
            </div>

            {% elif provider_type == 'local' %}
            <div>
                <label class="block text-gray-400 text-sm mb-1">Path *</label>
                <input type="text" name="path" required placeholder="/data/ipfs"
                       class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white">
            </div>
            {% endif %}

            <div>
                <label class="block text-gray-400 text-sm mb-1">Capacity (GB)</label>
                <input type="number" name="capacity_gb" value="5" min="1"
                       class="w-32 bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white">
            </div>

            <div class="pt-2">
                <button type="submit"
                        class="bg-{{ provider_info.color }}-600 hover:bg-{{ provider_info.color }}-700 px-4 py-2 rounded font-medium">
                    Add Provider
                </button>
            </div>

            <div id="add-result"></div>
        </form>
    </div>

    <!-- Existing Configs -->
    {% if storages %}
    <h2 class="text-lg font-semibold mb-4">Configured Accounts</h2>
    <div class="space-y-4">
        {% for storage in storages %}
        <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="font-medium">{{ storage.provider_name }}</span>
                    {% if storage.is_active %}
                    <span class="bg-green-900 text-green-300 px-2 py-0.5 rounded text-xs">Active</span>
                    {% endif %}
                </div>
                <div class="flex items-center space-x-3">
                    <button hx-post="/storage/{{ storage.id }}/test"
                            hx-target="#test-{{ storage.id }}"
                            class="text-gray-400 hover:text-white text-sm">
                        Test Connection
                    </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>

            {% if storage.config_display %}
            <div class="text-sm text-gray-400 space-x-4">
                {% for key, value in storage.config_display.items() %}
                <span>{{ key }}: <code class="text-gray-300">{{ value }}</code></span>
                {% endfor %}
            </div>
            {% endif %}

            <div id="test-{{ storage.id }}" class="mt-2 text-sm"></div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endblock %}