{% extends "base.html" %}

{% block title %}Kirin - Data Catalogs{% endblock %}

{% block header_title %}Data Catalogs{% endblock %}
{% block header_description %}Manage your data storage locations and datasets{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Add Catalog Button and Show Hidden Toggle -->
    <div style="display: flex; align-items: center; padding-top: 1.5rem; gap: 1rem;">
        <a href="/catalogs/add" class="btn btn-primary">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            Add Catalog
        </a>
        <div style="flex: 1; min-width: 0;"></div>
        <label class="toggle" style="margin-left: 0;">
            <input
                type="checkbox"
                id="show-hidden"
                class="toggle-input"
                {% if show_hidden %}checked{% endif %}
                onchange="window.location.href = this.checked ? '?show_hidden=true' : '/'"
            >
            <span class="toggle-slider"></span>
            <span class="toggle-label">Show hidden catalogs</span>
        </label>
    </div>

    <!-- Catalog Cards -->
    {% if catalogs %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {% for catalog in catalogs %}
        <div class="card {% if catalog.hidden %}opacity-60{% endif %}">
            <div class="card-header">
                <div class="flex items-center gap-2">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
                        <path d="M8 21v-4a2 2 0 012-2h4a2 2 0 012 2v4"></path>
                    </svg>
                    <h3 class="card-title font-mono text-sm break-all">{{ catalog.root_dir }}</h3>
                    {% if catalog.hidden %}
                    <span class="badge badge-secondary text-xs">Hidden</span>
                    {% endif %}
                </div>
            </div>

            <div class="card-content">
                <div class="flex items-center gap-2 mb-2">
                    <span class="badge {% if catalog.status == 'connected' %}badge-primary{% elif catalog.status == 'error' %}badge-destructive{% else %}badge{% endif %}">
                        {% if catalog.status == 'connected' %}Connected{% elif catalog.status == 'error' %}Error{% else %}Unknown{% endif %}
                    </span>
                    <span class="text-sm text-muted-foreground">
                        {% if catalog.dataset_count == "?" %}
                        Unknown ? datasets
                        {% else %}
                        {{ catalog.dataset_count }} dataset{{ 's' if catalog.dataset_count != 1 else '' }}
                        {% endif %}
                    </span>
                </div>
            </div>

            <div class="card-footer">
                <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                    <a href="/catalog/{{ catalog.id }}" class="btn btn-primary btn-sm" style="width: 100%;">
                        View Datasets
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M5 12h14"></path>
                            <path d="M12 5l7 7-7 7"></path>
                        </svg>
                    </a>
                    <div style="display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;">
                        <a href="/catalog/{{ catalog.id }}/edit" class="btn btn-ghost btn-sm" style="flex: 1;">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                            </svg>
                            Edit
                        </a>
                        {% if catalog.hidden %}
                        <form method="POST" action="/catalog/{{ catalog.id }}/unhide" class="inline" style="flex: 1; display: flex;">
                            <button type="submit" class="btn btn-ghost btn-sm" style="width: 100%;">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                    <circle cx="12" cy="12" r="3"></circle>
                                </svg>
                                Unhide
                            </button>
                        </form>
                        {% else %}
                        <form method="POST" action="/catalog/{{ catalog.id }}/hide" class="inline" style="flex: 1; display: flex;">
                            <button type="submit" class="btn btn-ghost btn-sm" style="width: 100%;">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
                                    <line x1="1" y1="1" x2="23" y2="23"></line>
                                </svg>
                                Hide
                            </button>
                        </form>
                        {% endif %}
                        <a href="/catalog/{{ catalog.id }}/delete" class="btn btn-ghost btn-sm text-destructive hover:bg-destructive hover:text-destructive-foreground" style="flex: 1;">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <polyline points="3,6 5,6 21,6"></polyline>
                                <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
                                <line x1="10" y1="11" x2="10" y2="17"></line>
                                <line x1="14" y1="11" x2="14" y2="17"></line>
                            </svg>
                            Remove from list
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <!-- Empty State -->
    <div class="text-center py-12">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="mx-auto mb-4 text-muted-foreground">
            <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
            <path d="M8 21v-4a2 2 0 012-2h4a2 2 0 012 2v4"></path>
        </svg>
        <h3 class="text-lg font-semibold mb-2">No data catalogs configured</h3>
        <p class="text-muted-foreground mb-4">
            Add your first data catalog to start managing datasets
        </p>
        <a href="/catalogs/add" class="btn btn-primary">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            Add Your First Catalog
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}