{% extends "core.html" %}
{% block content %}
<div class="container-fluid d-flex flex-column gap-3">
    <div class="border rounded p-3 shadow-sm xl" style="width: 100%; max-width: 1200px;">
        <h2>Recently Created Collections</h2>
        <table class="table table-sm small mb-0 border border-secondary-subtle">
            <thead class="table-primary">
                <tr>
                    <th class="px-2">Name</th>
                    <th class="px-2" colspan="2">Description</th>
                    <th class="px-2">Number of Products</th>
                </tr>
            </thead>
            <tbody>
                {% for collection in collections %}
                <tr>
                    <td class="px-2"><a href='{{ web_root }}/collections/{{ collection.id | e }}'>{{ collection.name }}</a></td>
                    <td class="px-2" colspan="2">{{ collection.description | truncate }}</td>
                    <td class="px-2">{{ collection.products|length }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="border rounded p-3 shadow-sm" style="width: 100%; max-width: 1200px;">
        <h2>Recently Uploaded Products</h2>
        <table class="table table-sm small mb-0 border border-secondary-subtle">
            <thead class="table-primary">
                <tr>
                    <th class="px-2">Name</th>
                    <th class="px-2" colspan="2">Description</th>
                    <th class="px-2">Uploaded</th>
                    <th class="px-2">Owner</th>
                </tr>
            </thead>
            <tbody>
                {% for product in products %}
                <tr>
                    <td class="px-2"><a href='{{ web_root }}/products/{{ product.id | e }}'>{{ product.name }}</a></td>
                    <td class="px-2" colspan="2">{{ product.description | truncate }}</td>
                    <td class="px-2">{{ product.uploaded.strftime("%Y-%m-%d") }}</td>
                    <td class="px-2">{{ product.owner }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}