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

{% block title %}{{ collection.name }} — {{ themis_app_name }}{% endblock %}

{% block content %}
<div class="mb-4">
    {% if library %}
    <a href="{% url 'library:library-detail' uid=library.uid %}" class="btn btn-ghost btn-sm">← {{ library.name }}</a>
    {% else %}
    <a href="{% url 'library:library-list' %}" class="btn btn-ghost btn-sm">← Libraries</a>
    {% endif %}
</div>

<div class="flex justify-between items-start mb-6">
    <div>
        <h1 class="text-3xl font-bold">{{ collection.name }}</h1>
        {% if library %}<p class="opacity-60 mt-1">In: {{ library.name }}</p>{% endif %}
        {% if collection.description %}
        <p class="mt-3 opacity-80">{{ collection.description }}</p>
        {% endif %}
    </div>
    <div class="flex gap-2">
        <a href="{% url 'library:collection-edit' uid=collection.uid %}" class="btn btn-sm btn-outline">Edit</a>
        <a href="{% url 'library:collection-delete' uid=collection.uid %}" class="btn btn-sm btn-error btn-outline">Delete</a>
    </div>
</div>

<!-- Items -->
<div class="flex justify-between items-center mb-4">
    <h2 class="text-xl font-bold">Items</h2>
    <a href="{% url 'library:item-create' collection_uid=collection.uid %}" class="btn btn-sm btn-primary">
        + New Item
    </a>
</div>

{% if items %}
<div class="overflow-x-auto">
    <table class="table table-zebra w-full">
        <thead>
            <tr>
                <th>Title</th>
                <th>Type</th>
                <th>File Type</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for item in items %}
            <tr>
                <td>
                    <a href="{% url 'library:item-detail' uid=item.uid %}" class="link link-hover font-medium">
                        {{ item.title }}
                    </a>
                </td>
                <td>{{ item.item_type|default:"-" }}</td>
                <td>{{ item.file_type|default:"-" }}</td>
                <td>
                    <a href="{% url 'library:item-detail' uid=item.uid %}" class="btn btn-xs btn-ghost">View</a>
                    {% if item.s3_key %}<a href="{% url 'library:item-download' uid=item.uid %}" class="btn btn-xs btn-ghost" title="Download original file">↓ Download</a>{% endif %}
                    <a href="{% url 'library:item-edit' uid=item.uid %}" class="btn btn-xs btn-ghost">Edit</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="text-center py-8 opacity-60">
    <p>No items in this collection yet.</p>
</div>
{% endif %}
{% endblock %}