{% extends "base.html" %}

{% load partials static %}

{% block content %}
<div class="container mx-auto p-4">
    <div class="mb-8">
        {% if not labels %}
        <div class="flex flex-col items-center gap-4">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-base-content/50">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
            </svg>
            <h1 class="text-3xl font-bold">No Labels Registered</h1>
            <p class="text-base-content/70">No labels have been registered for this Bento deployment</p>
        </div>
        {% else %}
        <h1 class="text-3xl font-bold">Labels</h1>
        <p class="text-base-content/70">View available labels and handlers for the current Bento deployment</p>

        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Namespace -->
                    <div class="col-span-2">
                        <h2 class="card-title mb-4">Namespace</h2>
                        <div class="badge badge-lg">{{ labels.namespace }}</div>
                    </div>

                    <!-- Query Labels -->
                    <div>
                        <h2 class="card-title mb-4">Query Handlers</h2>
                        <div class="flex flex-wrap gap-2">
                            {% for handler in labels.query_handlers %}
                                <div class="flex items-center gap-1">
                                    <div class="badge badge-primary">{{ handler }}</div>
                                    <button onclick="navigator.clipboard.writeText('{{ handler }}')" class="btn btn-ghost btn-xs">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
                                        </svg>
                                    </button>
                                </div>
                            {% empty %}
                                <p class="text-base-content/70">No query handlers configured</p>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Agent Labels -->
                    <div>
                        <h2 class="card-title mb-4">Agent Handlers</h2>
                        <div class="flex flex-wrap gap-2">
                            {% for handler in labels.agent_handlers %}
                                <div class="flex items-center gap-1">
                                    <div class="badge badge-secondary">{{ handler }}</div>
                                    <button onclick="navigator.clipboard.writeText('{{ handler }}')" class="btn btn-ghost btn-xs">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
                                        </svg>
                                    </button>
                                </div>
                            {% empty %}
                                <p class="text-base-content/70">No agent handlers configured</p>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Embed Labels -->
                    <div>
                        <h2 class="card-title mb-4">Embed Handlers</h2>
                        <div class="flex flex-wrap gap-2">
                            {% for handler in labels.embed_handlers %}
                                <div class="flex items-center gap-1">
                                    <div class="badge badge-accent">{{ handler }}</div>
                                    <button onclick="navigator.clipboard.writeText('{{ handler }}')" class="btn btn-ghost btn-xs">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
                                        </svg>
                                    </button>
                                </div>
                            {% empty %}
                                <p class="text-base-content/70">No embed handlers configured</p>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Storage Labels -->
                    <div>
                        <h2 class="card-title mb-4">Storage Handlers</h2>
                        <div class="flex flex-wrap gap-2">
                            {% for handler in labels.storage_handlers %}
                                <div class="flex items-center gap-1">
                                    <div class="badge badge-neutral">{{ handler }}</div>
                                    <button onclick="navigator.clipboard.writeText('{{ handler }}')" class="btn btn-ghost btn-xs">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
                                        </svg>
                                    </button>
                                </div>
                            {% empty %}
                                <p class="text-base-content/70">No storage handlers configured</p>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
