{% extends "core.html" %}
{% block content %}
<div class="container-fluid fs-base">
    <h2>{{ collection.name }}</h2>
    <div class="d-flex align-items-center gap-1">
        <div class="rounded-circle"
            style="height: 12px; width: 12px; background-color: {{ cmap.get(collection.id|string) }}"></div>
        <span class="badge text-bg-secondary mb-1 p-2">ID: {{ collection.id }}</span>
        <span class="badge text-bg-danger mb-1 p-2">Owner: {{ collection.owner }}</span>
        {% for reader in collection.readers %}
        <span class="badge text-bg-success mb-1 p-2">Reader: {{ reader }}</span>
        {% endfor %}
        {% for writer in collection.writers %}
        <span class="badge text-bg-warning mb-1 p-2">Writer: {{ writer }}</span>
        {% endfor %}
    </div>
    {% markdown %}{{ collection.description }}{% endmarkdown %}
    <h3>Caching & Downloads</h3>
    <label for="henry-download" class="form-label">Download or cache with <span class="font-monospace">henry</span> CLI</label>
    <div class="input-group mb-3 input-group-sm" style="max-width: 50em;">
        <!-- Dropdown -->
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
            aria-expanded="false" id="henry-action-btn">
            Download
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#" data-action="download">Download</a></li>
            <li><a class="dropdown-item" href="#" data-action="cache">Cache</a></li>
        </ul>

        <input type="text" class="form-control font-monospace" id="henry-download" readonly
            value="henry collection download {{ collection.id }}">

        <button class="input-group-text" type="button"
            onclick="navigator.clipboard.writeText(document.getElementById('henry-download').value)"
            style="cursor: pointer;">
            Copy
        </button>
    </div>
    {% if request.user.groups.intersection(collection.writers) or "hippo:admin" in request.auth.scopes %}
    <a class="btn btn-primary mb-2" href="./{{collection.id}}/edit">Edit</a>
    {% endif %}
    {% if "hippo:admin" in request.auth.scopes %}
    {% if collection.pinned %}
    <button class="btn btn-danger mb-2"
        onclick="fetch('{{ api_root }}/relationships/collection/{{ collection.id }}/unpin', {method: 'POST'}).then(() => location.reload())">Unpin
        from Homepage</button>
    {% else %}
    <button class="btn btn-success mb-2"
        onclick="fetch('{{ api_root }}/relationships/collection/{{ collection.id }}/pin', {method: 'POST'}).then(() => location.reload())">Pin
        to Homepage</button>
    {% endif %}
    {% endif %}
    <div>
        <h3>Products</h3>
        <table class="table table-sm border border-secondary-subtle shadow-sm" style="max-width: 800px;">
            <thead class="table-secondary">
                <tr>
                    <th>Product</th>
                    <th>Uploaded</th>
                    <th>Version</th>
                    <th>Type</th>
                </tr>
            </thead>
            <tbody>
                {% if collection.products | length > 0 %}
                {% for product in collection.products %}
                <tr class="small">
                    <td><a href='{{ web_root }}/products/{{ product.id | e}}'>{{ product.name }}</a></td>
                    <td>{{ product.uploaded.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                    <td>{{ product.version }}</td>
                    <td>{{ product.metadata.metadata_type }}</td>
                </tr>
                {% endfor %}
                {% else %}
                <tr class="small">
                    <td class="fst-italic">No products</td>
                    <td></td>
                    <td></td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
    {% if collection.parent_collections | length > 0 or collection.child_collections | length > 0 %}
    <div class="row">
        <h3>Collections</h3>
        {% set parents = collection.parent_collections %}
        {% set children = collection.child_collections %}
        {% set current_item_name = collection.name %}
        {% set current_item_id = collection.id %}
        {% set relationship_type = "collection" %}
        {% include "parent_child_diagram.html" %}
    </div>

    {% if collection.child_collections | length > 0 %}
    <table class="table table-sm border border-secondary-subtle shadow-sm" style="max-width: 800px;">
        <thead class="table-secondary">
            <tr>
                <th>Child Collection</th>
                <th>Number of Products</th>
                <th>Owner</th>
            </tr>
        </thead>
        <tbody>
            {% for child in collection.child_collections %}
            <tr class="small">
                <td><a href="{{ web_root }}/collections/{{ child.id | e }}">{{ child.name }}</a></td>
                <td class="small">{{ child.products | length }}</td>
                <td class="small">{{ child.owner }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}

    {% if collection.parent_collections | length > 0 %}
    <table class="table table-sm border border-secondary-subtle shadow-sm" style="max-width: 800px;">
        <thead class="table-secondary">
            <tr>
                <th>Parent Collection</th>
                <th>Number of Products</th>
                <th>Owner</th>
            </tr>
        </thead>
        <tbody>
            {% for parent in collection.parent_collections %}
            <tr class="small">
                <td><a href="{{ web_root }}/collections/{{ parent.id | e }}">{{ parent.name }}</a></td>
                <td class="small">{{ parent.products | length }}</td>
                <td class="small">{{ parent.owner }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })

    const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
    })

    // Dropdown handling
    document.querySelectorAll('.dropdown-item[data-action]').forEach(item => {
        item.addEventListener('click', function (e) {
            e.preventDefault();

            const action = this.getAttribute('data-action');
            const text = action.charAt(0).toUpperCase() + action.slice(1);

            // Update dropdown visible text
            document.getElementById('henry-action-btn').textContent = text;

            // Update CLI command
            document.getElementById('henry-download').value =
                `henry collection ${action} {{ collection.id }}`;
        });
    });
</script>
{% endblock %}