{% 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>
    <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 href="./{{product.id}}/edit">Edit</a>
                    {% 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 %}