{% extends "base.html" %}

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

    <p class="text-gray-400 mb-6">
        Renderers are L1 servers that process your media. Connect to a renderer to create and run recipes.
    </p>

    {% if error %}
    <div class="bg-red-900/50 border border-red-500 text-red-200 px-4 py-3 rounded mb-6">
        {{ error }}
    </div>
    {% endif %}

    {% if success %}
    <div class="bg-green-900/50 border border-green-500 text-green-200 px-4 py-3 rounded mb-6">
        {{ success }}
    </div>
    {% endif %}

    <div class="space-y-4">
        {% for server in servers %}
        <div class="bg-gray-800 rounded-lg p-4 flex items-center justify-between">
            <div>
                <a href="{{ server.url }}" target="_blank" class="text-blue-400 hover:text-blue-300 font-medium">
                    {{ server.url }}
                </a>
                {% if server.healthy %}
                <span class="ml-2 text-green-400 text-sm">Online</span>
                {% else %}
                <span class="ml-2 text-red-400 text-sm">Offline</span>
                {% endif %}
            </div>
            <div class="flex gap-2">
                <a href="{{ server.url }}/auth?auth_token={{ user.token }}"
                   class="px-3 py-1 bg-blue-600 hover:bg-blue-500 rounded text-sm">
                    Connect
                </a>
            </div>
        </div>
        {% else %}
        <p class="text-gray-500">No renderers configured.</p>
        {% endfor %}
    </div>

    <div class="mt-8 text-gray-500 text-sm">
        <p>Renderers are configured by the system administrator.</p>
    </div>
</div>
{% endblock %}