{% extends "core.html" %}
{% block content %}
<div class="container-fluid">
    <h1>{{ product.name }}</h1>
    <div class="d-flex gap-1 flex-wrap">
        <span class="badge text-bg-success p-2">Version: {{ product.version }}</span>
        <span class="badge text-bg-secondary p-2">ID: {{ product.id }}</span>
        <span class="badge text-bg-warning p-2">Uploaded: {{ product.uploaded.strftime('%Y-%m-%d %H:%M:%S') }}</span>
        <span class="badge text-bg-warning p-2">Modified: {{ product.updated.strftime('%Y-%m-%d %H:%M:%S') }}</span>
        <span class="badge text-bg-danger p-2">Owner: {{ product.owner }}</span>
    </div>
    <div>
        <h2 class="mt-3">Product Description</h2>
        {% markdown %}{{ product.description }}{% endmarkdown %}
    </div>
    <div>
        <h3>Sources</h3>
        <table class="table table-sm small border border-secondary-subtle" style="max-width: 600px;">
            <thead>
                <tr class="table-secondary">
                    <th>Slug</th>
                    <th>Link</th>
                    <th>Description</th>
                    <th>Size</th>
                </tr>
            </thead>
            <tbody>
                {% for slug, source in sources.items() %}
                <tr>
                    <td class=" font-monospace">{{slug}}</td>
                    <td><a href='{{ web_root }}/products/{{product.id}}/{{ slug }}'>{{ source.name }}</a></td>
                    <td>{{ source.description }}</td>
                    <td class="text-nowrap">{{ source.size | filesizeformat }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <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: 600px;">
        <!-- 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 product download {{ product.id }}">

        <button class="input-group-text" type="button"
            onclick="navigator.clipboard.writeText(document.getElementById('henry-download').value)"
            style="cursor: pointer;">
            Copy
        </button>
    </div>
    <div class="row">
        <div class="col">
            {% if product.metadata %}
                <h3 class="mt-2 mb-0">Metadata</h3>
                {% for key, value in product.metadata.model_dump().items() %}
                    {% if key != 'metadata_type' %}
                        <ul class="list-group d-inline-flex p-2 font-monospace small ps-0">
                            <li class="list-group-item list-group-item-primary">{{ key }}</li>
                            {% if value is mapping %}
                                <li class="list-group-item">
                                    <table class="table table-sm small">
                                        {% for keysub1, valuesub1 in value.items() %}
                                            {# Two possible cases: valuesub1 can be iterable OR it can just be a value #}
                                            {% if valuesub1 is iterable and valuesub1 is not string %}
                                            {% if loop.index == 1 %}
                                                <tr>
                                                    {% for keysub2, valuesub2 in valuesub1.items() %}
                                                        <th>{{ keysub2 }}</th>
                                                    {% endfor %}
                                                </tr>
                                            {% endif %}
                                            <tr>
                                                {% for keysub2, valuesub2 in valuesub1.items() %}
                                                    <td>{{ valuesub2 }}</td>
                                                {% endfor %}
                                            </tr>
                                            {% else %}
                                                <tr>
                                                    <td>{{ keysub1 }}</td>
                                                    <td>{{ valuesub1 }}</td>
                                                </tr>
                                            {% endif %}
                                        {% endfor %}
                                    </table>
                                </li>
                            {% else %}
                                <li class="list-group-item">{{ value }}</li>
                            {% endif %}
                        </ul>
                    {% endif %}
                {% endfor %}
            {% endif %}
        </div>

        <div class="col">
            {% if product.child_of %}
            <div class="row">
                <p>
                    Parents:
                    <ul>
                        {% for parent in product.child_of %}
                        <li><a href='{{ web_root }}/products/{{ parent.id | e}}'>{{ parent.name }}</a></li>
                        {% endfor %}
                    </ul>
                </p>
            </div>
            {% endif %}
            
            {% if product.parent_of %}
            <div class="row">
                <p>
                    Children:
                    <ul>
                        {% for child in product.parent_of %}
                        <li><a href='{{ web_root }}/products/{{ child.id | e }}'>{{ child.name }}</a></li>
                        {% endfor %}
                    </ul>
                </p>
            </div>
            {% endif %}

            {% if product.collections %}
            <div class="row">
                <div class="container">
                    <h3 class="mt-2 mb-0">Collections</h3>
                    <ul class="list-group d-inline-flex p-2 small ps-0">
                        {% for collection in product.collections %}
                        <li class="list-group-item">
                            <a href="{{ web_root }}/collections/{{ collection.id | e }}">
                            {{ collection.name }}
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            {% endif %}

            <div class="row">
                <div class="container">
                    <h3 class="mt-2">Readers</h3>
                    {% for reader in product.readers %}
                        <span class="badge text-bg-secondary p-2">{{reader}}</span>
                    {% endfor %}
                    <h3 class="mt-2">Writers</h3>
                    {% for writer in product.writers %}
                        <span class="badge text-bg-secondary p-2">{{writer}}</span>
                    {% endfor %}
                </div>
            </div>

            <div class="row">
                <div class="container">
                    <h3 class="mt-2">Version History</h3>
                    {% if request.user.groups.intersection(product.writers) or "hippo:admin" in request.auth.scopes %}
                    <a class="btn btn-primary mb-2" href="./{{product.id}}/edit">Edit</a>
                    {% endif %}
                    {% if "hippo:admin" in request.auth.scopes %}
                    {% if product.pinned %}
                    <button class="btn btn-danger mb-2" onclick="fetch('{{ api_root }}/product/{{ product.id }}/unpin', {method: 'POST'}).then(() => location.reload())">Unpin from Homepage</button>
                    {% else %}
                    <button class="btn btn-success mb-2" onclick="fetch('{{ api_root }}/product/{{ product.id }}/pin', {method: 'POST'}).then(() => location.reload())">Pin to Homepage</button>
                    {% endif %}
                    {% endif %}
                    <table class="table table-sm small border border-secondary-subtle" style="max-width: 250px;">
                        <thead class="table-secondary">
                            <tr>
                                <th>Version</th>
                                <th>Updated</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for version, metadata in versions.items() %}
                            <tr>
                                <td title='{{ "You are currently viewing this product version" if version == product.version else "" }}'>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class='{{ "rounded-circle bg-success" if version == product.version else "" }}' style="width: 0.75em; height: 0.75em;"></div>
                                        {% if version != product.version %}
                                            <a href='{{ web_root }}/products/{{ metadata.id | e }}'>{{ version }}</a>
                                        {% else %}
                                            <span>{{ version }}</span>
                                        {% endif %}
                                    </div>
                                </td>
                                <td>{{ metadata.updated.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
    <script>
    // 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 product ${action} {{ product.id }}`;
        });
    });
    </script>
{% endblock %}