{% extends 'base.html.twig' %}

{% block title %}{{ 'collect.title'|trans }}{% endblock %}
{% block footer %}{% endblock %}

{% block styles %}
    {{ parent() }}
    {{ encore_entry_link_tags('collect') }}
{% endblock %}

{% block body %}
<div class="collect-app">
    <div class="collect-app__top">
        <div>
            <h1 class="collect-app__title">{{ 'collect.albums'|trans }}</h1>
            <p class="collect-app__meta">
                {{ 'collect.activeCount'|trans({'%count%': stats.active}) }}
            </p>
        </div>
        <form method="post" action="{{ path('app_collect_new') }}">
            <button class="collect-btn collect-btn--primary" type="submit">{{ 'collect.createNew'|trans }}</button>
        </form>
    </div>

    {% if collections is empty %}
        <div class="collect-empty">
            <p>{{ 'collect.emptySimple'|trans }}</p>
            <form method="post" action="{{ path('app_collect_new') }}">
                <button class="collect-btn collect-btn--primary" type="submit">{{ 'collect.createNew'|trans }}</button>
            </form>
        </div>
    {% else %}
        <div class="collect-grid">
            {% for c in collections %}
                {% set cover = null %}
                {% for f in c.files %}
                    {% if cover is null and f.status != 'deleted' and f.mimeType starts with 'image/' %}
                        {% set cover = f %}
                    {% endif %}
                {% endfor %}
                <article class="collect-grid__item">
                    <h2 class="collect-card__title">{{ c.title }}</h2>
                    <a class="collect-card" href="{{ path('app_collect_show', {id: c.id}) }}">
                        <div class="collect-card__media">
                            {% if cover %}
                                <img src="{{ path('app_collect_file_thumb', {id: c.id, fileId: cover.id}) }}" alt="" loading="lazy" decoding="async">
                            {% else %}
                                <div class="collect-card__placeholder">{{ c.title|slice(0, 1)|upper }}</div>
                            {% endif %}
                            {% if c.expiresAt %}
                                <span class="collect-card__badge">{{ 'collect.expiresOn'|trans({'%date%': c.expiresAt|date('d.m.Y')}) }}</span>
                            {% endif %}
                            <span class="collect-card__foot">
                                {{ c.fileCount }} {{ 'collect.items'|trans }}
                                · {{ c.usedBytes|formatFileSize }}
                                · {{ ('collect.status.' ~ c.displayStatus)|trans }}
                            </span>
                        </div>
                    </a>
                </article>
            {% endfor %}
        </div>
    {% endif %}
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('collect') }}
{% endblock %}