{% extends "base.html" %}

{% block title %}Remove Catalog from List - Kirin{% endblock %}

{% block breadcrumb %}
<span class="breadcrumb-separator">></span>
<a href="/">Catalogs</a>
<span class="breadcrumb-separator">></span>
<span>Remove {{ catalog.name }}</span>
{% endblock %}

{% block header_title %}Remove Catalog from List{% endblock %}
{% block header_description %}Remove this catalog from your local list. Data on S3 or other storage is not deleted.{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <div class="alert alert-warning mb-6">
        <span><strong>Remove from list only</strong></span>
        <span>This only removes the catalog from your list. Your data on S3, GCS, or other storage is <strong>not</strong> deleted or modified.</span>
        <span><strong>Alternative:</strong> You can hide this catalog instead to remove it from the main view without removing the entry.</span>
    </div>
    {% if dataset_count > 0 %}
    <p class="text-sm text-muted-foreground mb-6">
        This catalog has {{ dataset_count }} dataset{{ 's' if dataset_count != 1 else '' }}; they will remain on storage. You can add this catalog again later to see them.
        <a href="/catalog/{{ catalog.id }}" class="underline">Go to catalog</a>
    </p>
    {% endif %}

    <div class="panel">
        <div class="panel-header">
            <h2 class="panel-title">Catalog</h2>
        </div>
        <div class="panel-content">
            <div class="space-y-4">
                <div>
                    <label class="text-sm font-medium text-muted-foreground">Root Directory</label>
                    <p class="text-lg font-mono">{{ catalog.root_dir }}</p>
                </div>
                <div>
                    <label class="text-sm font-medium text-muted-foreground">Datasets</label>
                    <p class="text-lg">
                        {% if dataset_count > 0 %}
                        {{ dataset_count }} dataset{{ 's' if dataset_count != 1 else '' }}
                        {% else %}
                        No datasets
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="flex gap-3">
        <a href="/" class="btn btn-secondary">
            Cancel
        </a>

        <form method="POST" action="/catalog/{{ catalog.id }}/hide" class="inline">
            <button type="submit" class="btn btn-secondary">
                <svg width="16" height="16" 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 Catalog
            </button>
        </form>

        <form method="POST" action="/catalog/{{ catalog.id }}/delete" class="inline">
            <button type="submit" class="btn btn-destructive">
                <svg width="16" height="16" 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
            </button>
        </form>
    </div>
</div>
{% endblock %}