{% extends "base.html" %}
{%- import "partials/_ui.html" as ui -%}

{% block title %}{{ collection.title }} - {{ owner_username }} - Makenot.work{% endblock %}
{% block body_attrs %} class="padded-page collection-page"{% endblock %}

{% block head %}
{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    <div class="container">
        <header class="collection-header">
            <h1 class="collection-title">{{ collection.title }}</h1>
            <div class="collection-owner">
                by <a href="/u/{{ owner_username }}">{% if let Some(display) = owner_display_name %}{{ display }}{% else %}{{ owner_username }}{% endif %}</a>
                {% if !collection.is_public %}<span class="badge badge--inline-l">Private</span>{% endif %}
            </div>
            {% if let Some(desc) = collection.description %}
            <p class="collection-description">{{ desc }}</p>
            {% endif %}
            <div class="collection-meta">{{ collection.item_count }} items</div>
        </header>

        {% if items.is_empty() %}
        {% call ui::empty_state("", "This collection is empty.") %}
        {% else %}
        <section>
            {% for item in items %}
            <div class="collection-item">
                <div class="collection-item-info">
                    <div class="collection-item-title"><a href="/i/{{ item.item_id }}">{{ item.title }}</a></div>
                    <div class="collection-item-meta">{{ item.item_type }} &middot; {{ item.username }} &middot; {{ item.project_title }}</div>
                </div>
                <div class="collection-item-price">{{ item.price_display }}</div>
            </div>
            {% endfor %}
        </section>
        {% endif %}

        <footer class="profile-footer mt-6">
            <p><a href="/u/{{ owner_username }}">View profile</a> &middot; <a href="" data-copy-link>Copy link</a></p>
        </footer>
    </div>
{% endblock %}