{% extends 'base.html.twig' %}
{% block title %}{{ collection.title }}{% endblock %}
{% block footer %}{% endblock %}
{% block styles %}{{ parent() }}{{ encore_entry_link_tags('collect_guest') }}{% endblock %}
{% block body %}
{% set guestFilePlaceholder = '00000000-0000-0000-0000-000000000000' %}
<div class="collect-guest" id="collectGuestGallery"
     data-can-download="{{ link.allowDownload ? '1' : '0' }}"
     data-feedback-url="{{ path('app_collect_guest_feedback', {_locale: app.request.locale, token: token, filePublicId: guestFilePlaceholder})|replace({(guestFilePlaceholder): '__FILE__'})|e('html_attr') }}"
     data-feedback-rate-url="{{ path('app_collect_guest_rate', {_locale: app.request.locale, token: token, filePublicId: guestFilePlaceholder})|replace({(guestFilePlaceholder): '__FILE__'})|e('html_attr') }}"
     data-feedback-comment-url="{{ path('app_collect_guest_comment', {_locale: app.request.locale, token: token, filePublicId: guestFilePlaceholder})|replace({(guestFilePlaceholder): '__FILE__'})|e('html_attr') }}"
     data-feedback-viewed-url="{{ path('app_collect_guest_viewed', {_locale: app.request.locale, token: token, filePublicId: guestFilePlaceholder})|replace({(guestFilePlaceholder): '__FILE__'})|e('html_attr') }}"
     data-feedback-rate-label="{{ 'collect.rateImage'|trans|e('html_attr') }}"
     data-feedback-average-label="{{ 'collect.averageRating'|trans|e('html_attr') }}"
     data-feedback-comment-placeholder="{{ 'collect.commentPlaceholder'|trans|e('html_attr') }}"
     data-feedback-comment-submit="{{ 'collect.commentSubmit'|trans|e('html_attr') }}"
     data-feedback-no-comments="{{ 'collect.noComments'|trans|e('html_attr') }}"
     data-feedback-missing-actor="{{ 'collect.feedbackMissingActor'|trans|e('html_attr') }}">
    <header class="collect-guest__header">
        <h1 class="collect-guest__title">{{ collection.title }}</h1>
        {% if collection.description %}<p class="collect-guest__sub">{{ collection.description }}</p>{% endif %}
        <p class="collect-guest__meta">
            {{ 'collect.guest.expires'|trans }}: {{ collection.expiresAt ? collection.expiresAt|date('d.m.Y H:i') : '—' }}
            · {{ files|length }} {{ 'collect.items'|trans }}
        </p>
    </header>

    {% if link.allowUpload %}
        <div id="collectUpload" class="collect-guest__upload" data-upload-url="{{ path('app_collect_guest_upload', {_locale: app.request.locale, token: token}) }}">
            <label class="collect-btn collect-btn--primary" for="collectFileInput">+ {{ 'collect.guest.upload'|trans }}</label>
            <input type="file" id="collectFileInput" multiple hidden>
            <ul id="collectUploadList" class="collect-guest__upload-list"></ul>
        </div>
    {% endif %}

    {% if link.allowView or files|length %}
        {% if files is empty %}
            <p class="collect-guest__empty">{{ 'collect.guest.empty'|trans }}</p>
        {% else %}
            <div class="collect-gallery" role="list">
                {% for f in files %}
                    {% set previewUrl = (f.image or f.video) ? path('app_collect_guest_preview', {_locale: app.request.locale, token: token, filePublicId: f.publicId}) : '' %}
                    {% set thumbUrl = f.image ? path('app_collect_guest_thumb', {_locale: app.request.locale, token: token, filePublicId: f.publicId}) : '' %}
                    {% set downloadUrl = link.allowDownload ? path('app_collect_guest_download', {_locale: app.request.locale, token: token, filePublicId: f.publicId}) : '' %}
                    <button type="button"
                            class="collect-gallery__item{% if f.video %} collect-gallery__item--video{% endif %}"
                            role="listitem"
                            data-kind="{% if f.image %}image{% elseif f.video %}video{% else %}file{% endif %}"
                            data-name="{{ f.originalFilename|e('html_attr') }}"
                            data-public-id="{{ f.publicId }}"
                            data-preview="{{ previewUrl }}"
                            data-download="{{ downloadUrl }}"
                            data-mime="{{ f.mimeType|e('html_attr') }}"
                            {% if f.image or f.video %}data-lightbox-index="{{ loop.index0 }}"{% endif %}>
                        <span class="collect-gallery__thumb">
                            {% if f.image %}
                                <img src="{{ thumbUrl }}" alt="" loading="lazy" decoding="async">
                            {% elseif f.video %}
                                <span class="collect-gallery__video-badge" aria-hidden="true">▶</span>
                            {% else %}
                                <span class="collect-gallery__file-icon">{{ f.originalFilename|split('.')|last|upper|slice(0, 4) }}</span>
                            {% endif %}
                        </span>
                        <span class="collect-gallery__caption">{{ f.originalFilename }}</span>
                    </button>
                {% endfor %}
            </div>
        {% endif %}
    {% endif %}
</div>

{# Lightbox #}
<div class="collect-lightbox" id="collectLightbox" hidden>
    <div class="collect-lightbox__backdrop" data-lightbox-close></div>
    <div class="collect-lightbox__stage" role="dialog" aria-modal="true" aria-label="{{ 'collect.guest.lightbox'|trans }}">
        <button type="button" class="collect-lightbox__close" data-lightbox-close aria-label="{{ 'collect.close'|trans }}">×</button>
        <button type="button" class="collect-lightbox__nav collect-lightbox__nav--prev" data-lightbox-prev aria-label="{{ 'collect.guest.prev'|trans }}">‹</button>
        <button type="button" class="collect-lightbox__nav collect-lightbox__nav--next" data-lightbox-next aria-label="{{ 'collect.guest.next'|trans }}">›</button>

        <div class="collect-lightbox__media" id="collectLightboxMedia"></div>

        <div class="collect-lightbox__bar">
            <div class="collect-lightbox__info">
                <strong id="collectLightboxName"></strong>
                <span id="collectLightboxCounter"></span>
            </div>
            <div class="collect-lightbox__actions">
                <button type="button" class="collect-btn" id="collectLightboxZoomOut" title="{{ 'collect.guest.zoomOut'|trans }}">−</button>
                <button type="button" class="collect-btn" id="collectLightboxZoomIn" title="{{ 'collect.guest.zoomIn'|trans }}">+</button>
                <button type="button" class="collect-btn" id="collectLightboxZoomReset" title="{{ 'collect.guest.zoomReset'|trans }}">100%</button>
                <a class="collect-btn collect-btn--primary" id="collectLightboxDownload" hidden>{{ 'collect.download'|trans }}</a>
            </div>
            <div class="collect-lightbox__feedback" id="collectLightboxFeedback" hidden>
                <div class="collect-lightbox__rating">
                    <div class="collect-stars" id="collectLightboxStars" role="radiogroup" aria-label="{{ 'collect.rateImage'|trans }}">
                        {% for i in 1..5 %}
                            <button type="button" class="collect-stars__btn" data-rating="{{ i }}" aria-label="{{ i }} {{ 'collect.stars'|trans }}">★</button>
                        {% endfor %}
                    </div>
                    <p class="collect-lightbox__avg" id="collectLightboxAvg"></p>
                </div>
                <ul class="collect-lightbox__comments" id="collectLightboxComments"></ul>
                <form id="collectLightboxCommentForm" class="collect-lightbox__comment-form">
                    <textarea id="collectLightboxCommentInput" rows="2" placeholder="{{ 'collect.commentPlaceholder'|trans }}"></textarea>
                    <button type="submit" class="collect-btn collect-btn--primary">{{ 'collect.commentSubmit'|trans }}</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block javascripts %}{{ parent() }}{{ encore_entry_script_tags('collect_guest') }}{% endblock %}