{% 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>Pinned Collections</h2>
        <div class="row row-cols-1 row-cols-md-3 g-4">
            {% for collection in pinned_collections %}
            {% if collection.pinned %}
            <div class="col">
                <div class="card">
                    <h4 class="card-header">{{ collection.name }}</h4>
                    <div class="card-body">
                        {% markdown %}{{ collection.description | truncate(512) }}{% endmarkdown %}
                        <p>{{ collection.products | length }} Products</p>
                        <a href="{{ web_root }}/collections/{{ collection.id | e }}" class="btn btn-primary">View</a>
                    </div>
                </div>
            </div>
            {%endif%}
            {%endfor%}
        </div>
    </div>
    <div class="border rounded p-3 shadow-sm xl" style="width: 100%; max-width: 1200px;">
        <h2>Pinned Products</h2>
        <div class="row row-cols-1 row-cols-md-3 g-4">
            {% for product in pinned_products %}
            {% if product.pinned %}
            <div class="col">
                <div class="card">
                    <h4 class="card-header">{{ product.name }}</h4>
                    <div class="card-body">
                        {% markdown %}{{ product.description | truncate(256) }}{% endmarkdown %}
                        <p>Uploaded {{ product.uploaded.strftime("%Y-%m-%d") }}</p>
                        <a href="{{ web_root }}/products/{{ product.id | e }}" class="btn btn-primary">View</a>
                    </div>
                </div>
            </div>
            {%endif%}
            {%endfor%}
        </div>
    </div>
    <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 recent_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 recent_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 %}