{% extends "themis/base.html" %}

{% block title %}Libraries — {{ themis_app_name }}{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
    <h1 class="text-3xl font-bold">Libraries</h1>
    <div class="flex gap-2">
        <a href="{% url 'library:embedding-dashboard' %}" class="btn btn-outline btn-secondary">
            Embedding Pipeline
        </a>
        <a href="{% url 'library:library-create' %}" class="btn btn-primary">
            + New Library
        </a>
    </div>
</div>

<form method="get" class="mb-4 flex flex-wrap gap-3 items-end">
    <div class="form-control">
        <label class="label"><span class="label-text">Scope</span></label>
        <select name="scope" class="select select-bordered select-sm">
            <option value="all"       {% if scope == "all" %}selected{% endif %}>All libraries</option>
            <option value="unmanaged" {% if scope == "unmanaged" %}selected{% endif %}>Unmanaged only</option>
            <option value="managed"   {% if scope == "managed" %}selected{% endif %}>App-managed only</option>
        </select>
    </div>
    <button type="submit" class="btn btn-sm btn-outline">Filter</button>
</form>

{% if error %}
<div class="alert alert-warning mb-4">
    <span>{{ error }}</span>
</div>
{% endif %}

{% if libraries %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {% for lib in libraries %}
    <div class="card bg-base-200 shadow-md">
        <div class="card-body">
            <h2 class="card-title">
                <a href="{% url 'library:library-detail' uid=lib.uid %}" class="link link-hover">
                    {{ lib.name }}
                </a>
            </h2>
            <div class="flex flex-wrap gap-1">
                <div class="badge badge-outline">{{ lib.library_type }}</div>
                {% if lib.managed_by_display %}
                <div class="badge badge-warning gap-1" title="Managed by {{ lib.managed_by_display }}{% if lib.workspace_id %} (workspace {{ lib.workspace_id }}){% endif %} — do not delete from Mnemosyne.">
                    Managed by {{ lib.managed_by_display }}
                </div>
                {% endif %}
            </div>
            {% if lib.description %}
            <p class="text-sm opacity-70 mt-2">{{ lib.description|truncatewords:20 }}</p>
            {% endif %}
            <div class="card-actions justify-end mt-3">
                <a href="{% url 'library:library-detail' uid=lib.uid %}" class="btn btn-sm btn-ghost">View</a>
                <a href="{% url 'library:library-edit' uid=lib.uid %}" class="btn btn-sm btn-ghost">Edit</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
    {% if not error %}
    <div class="text-center py-12 opacity-60">
        {% if scope == "all" %}
        <p class="text-lg">No libraries yet.</p>
        <p class="mt-2">Create your first library to get started.</p>
        {% else %}
        <p class="text-lg">No libraries match this filter.</p>
        {% endif %}
    </div>
    {% endif %}
{% endif %}
{% endblock %}
