{% extends 'base.html.twig' %}
{% block title %}{{ collection.title }}{% endblock %}
{% block footer %}{% endblock %}
{% block styles %}{{ parent() }}{{ encore_entry_link_tags('collect') }}{% endblock %}
{% block body %}
{% set firstFile = files|length ? files[0] : null %}
{% set firstIsImage = firstFile and firstFile.image %}
{% set firstIsVideo = firstFile and firstFile.video %}
<div class="collect-app collect-album" id="collectAlbumApp"
     data-upload-url="{{ path('app_collect_upload', {id: collection.id}) }}"
     data-upload-uploading="{{ 'collect.uploading'|trans|e('html_attr') }}"
     data-upload-waiting="{{ 'collect.uploadWaiting'|trans|e('html_attr') }}"
     data-upload-done="{{ 'collect.uploadDone'|trans|e('html_attr') }}"
     data-upload-failed="{{ 'collect.uploadFailed'|trans|e('html_attr') }}"
     data-upload-progress="{{ 'collect.uploadProgress'|trans|e('html_attr') }}"
     data-upload-complete="{{ 'collect.uploadComplete'|trans|e('html_attr') }}"
     data-feedback-csrf="{{ csrf_token('collect_feedback_' ~ collection.id) }}"
     data-feedback-url="{{ path('app_collect_file_feedback', {id: collection.id, fileId: 0})|replace({'/datei/0/': '/datei/__FILE__/'})|e('html_attr') }}"
     data-feedback-rate-url="{{ path('app_collect_file_rate', {id: collection.id, fileId: 0})|replace({'/datei/0/': '/datei/__FILE__/'})|e('html_attr') }}"
     data-feedback-comment-url="{{ path('app_collect_file_comment', {id: collection.id, fileId: 0})|replace({'/datei/0/': '/datei/__FILE__/'})|e('html_attr') }}"
     data-feedback-viewed-url="{{ path('app_collect_file_viewed', {id: collection.id, fileId: 0})|replace({'/datei/0/': '/datei/__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') }}">
    <div class="collect-album__nav">
        <a class="collect-back" href="{{ path('app_collect_index') }}" aria-label="{{ 'collect.back'|trans }}">←</a>
    </div>

    <div class="collect-album__layout">
        <section class="collect-album__stage">
            <div class="collect-album__hero" id="collectHero">
                {% if firstIsImage %}
                    <img src="{{ path('app_collect_file_preview', {id: collection.id, fileId: firstFile.id}) }}"
                         alt="{{ firstFile.originalFilename }}"
                         data-lightbox-open
                         class="collect-album__hero-media is-clickable">
                {% elseif firstIsVideo %}
                    <video class="collect-album__hero-media" controls playsinline preload="metadata"
                           src="{{ path('app_collect_file_preview', {id: collection.id, fileId: firstFile.id}) }}"></video>
                {% elseif firstFile %}
                    <div class="collect-album__hero-file">
                        <strong>{{ firstFile.originalFilename }}</strong>
                        <a class="collect-btn" href="{{ path('app_collect_file_download', {id: collection.id, fileId: firstFile.id}) }}">{{ 'collect.download'|trans }}</a>
                    </div>
                {% else %}
                    <div class="collect-album__hero-empty">
                        <p>{{ 'collect.addFirst'|trans }}</p>
                    </div>
                {% endif %}
            </div>

            {% if files|length %}
                <div class="collect-thumbs" role="list">
                    {% for f in files %}
                        {% set previewUrl = (f.image or f.video) ? path('app_collect_file_preview', {id: collection.id, fileId: f.id}) : '' %}
                        {% set thumbUrl = f.image ? path('app_collect_file_thumb', {id: collection.id, fileId: f.id}) : '' %}
                        <button type="button"
                                class="collect-thumb{% if loop.first %} is-active{% endif %}{% if f.video %} collect-thumb--video{% endif %}"
                                data-kind="{% if f.image %}image{% elseif f.video %}video{% else %}file{% endif %}"
                                data-file-id="{{ f.id }}"
                                data-name="{{ f.originalFilename|e('html_attr') }}"
                                data-mime="{{ f.mimeType|e('html_attr') }}"
                                data-preview="{{ previewUrl }}"
                                data-download="{{ path('app_collect_file_download', {id: collection.id, fileId: f.id}) }}"
                                role="listitem">
                            {% if f.image %}
                                <img src="{{ thumbUrl }}" alt="" loading="lazy" decoding="async">
                            {% elseif f.video %}
                                <span class="collect-thumb__play" aria-hidden="true">▶</span>
                            {% else %}
                                <span>{{ f.originalFilename|split('.')|last|upper|slice(0, 4) }}</span>
                            {% endif %}
                        </button>
                    {% endfor %}
                </div>
            {% endif %}
        </section>

        <aside class="collect-album__side">
            <p class="collect-album__count">{{ files|length }} {{ 'collect.items'|trans|upper }}</p>
            <h1 class="collect-album__title">{{ collection.title }}</h1>

            <div class="collect-album__actions">
                <button type="button" class="collect-btn collect-btn--primary" id="collectShareOpen">
                    {{ 'collect.share'|trans }}
                </button>
                <button type="button" class="collect-chip" id="collectAccessOpen" title="{{ 'collect.accessSharing'|trans }}">
                    {{ memberCount + 1 }}
                </button>

                <div class="collect-more dropdown">
                    <button class="collect-more__btn" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false" aria-label="{{ 'collect.more'|trans }}">⋮</button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><button type="button" class="dropdown-item" id="collectAccessOpenMenu">{{ 'collect.accessSharing'|trans }}</button></li>
                        <li><button type="button" class="dropdown-item" data-collect-modal="#collectSettingsModal">{{ 'collect.settings'|trans }}</button></li>
                        <li><button type="button" class="dropdown-item" data-collect-modal="#collectActivityModal">{{ 'collect.activity'|trans }}</button></li>
                        <li>
                            <form method="post" action="{{ path('app_collect_extend', {id: collection.id}) }}">
                                <input type="hidden" name="_token" value="{{ csrf_token('collect_extend_' ~ collection.id) }}">
                                <input type="hidden" name="days" value="14">
                                <button class="dropdown-item" type="submit">{{ 'collect.extend'|trans }}</button>
                            </form>
                        </li>
                        {% if trash|length %}
                            <li><button type="button" class="dropdown-item" data-collect-modal="#collectTrashModal">{{ 'collect.trashBin'|trans }} ({{ trash|length }})</button></li>
                        {% endif %}
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <form method="post" action="{{ path('app_collect_delete', {id: collection.id}) }}" onsubmit="return confirm('{{ 'collect.confirmDelete'|trans|e('js') }}');">
                                <input type="hidden" name="_token" value="{{ csrf_token('collect_delete_' ~ collection.id) }}">
                                <button class="dropdown-item text-danger" type="submit">{{ 'collect.delete'|trans }}</button>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>

            <p class="collect-album__hint">
                {% if collection.expiresAt %}
                    {{ 'collect.expiresOn'|trans({'%date%': collection.expiresAt|date('d.m.Y H:i')}) }}
                    ·
                {% endif %}
                {{ 'collect.totalSizeMb'|trans({
                    '%size%': (collection.usedBytes / 1048576)|number_format(collection.usedBytes >= 10485760 ? 0 : 1, ',', '.')
                }) }}
            </p>

            <div class="collect-album__feedback" id="collectHeroFeedback" hidden>
                <h2 class="collect-album__feedback-title">{{ 'collect.rateImage'|trans }}</h2>
                <div class="collect-lightbox__rating">
                    <div class="collect-stars" id="collectHeroStars" 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="collectHeroAvg"></p>
                </div>
                <ul class="collect-lightbox__comments" id="collectHeroComments"></ul>
                <form id="collectHeroCommentForm" class="collect-lightbox__comment-form">
                    <textarea id="collectHeroCommentInput" rows="2" placeholder="{{ 'collect.commentPlaceholder'|trans }}"></textarea>
                    <button type="submit" class="collect-btn collect-btn--primary">{{ 'collect.commentSubmit'|trans }}</button>
                </form>
            </div>
        </aside>
    </div>

    <div class="collect-upload" id="collectUploadPanel" hidden aria-live="polite">
        <div class="collect-upload__header">
            <strong id="collectUploadTitle">{{ 'collect.uploading'|trans }}</strong>
            <span id="collectUploadSummary"></span>
        </div>
        <ul class="collect-upload__list" id="collectUploadList"></ul>
    </div>

    <button type="button" class="collect-fab" id="collectAddBtn">+ {{ 'collect.addContent'|trans }}</button>
    <input type="file" id="collectFileInput" multiple hidden accept="*/*">
</div>

{# Lightbox (same UX as guest gallery) #}
<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">{{ 'collect.download'|trans }}</a>
            </div>
        </div>
    </div>
</div>

{# Share album modal (cover + QR + copy) #}
<div class="collect-overlay" id="collectShareModal" hidden data-open-panel="{{ app.request.query.get('panel') == 'share' ? '1' : '0' }}">
    <div class="collect-overlay__backdrop" data-close-overlay></div>
    <div class="collect-overlay__card collect-share-card" role="dialog" aria-modal="true" aria-label="{{ 'collect.shareAlbum'|trans }}">
        <button type="button" class="collect-overlay__close" data-close-overlay aria-label="{{ 'collect.close'|trans }}">×</button>
        <p class="collect-share-card__eyebrow">{{ 'collect.shareAlbum'|trans }}</p>
        <h2 class="collect-share-card__title">{{ collection.title }}</h2>

        <div class="collect-share-card__cover">
            {% if coverFile %}
                <img src="{{ path('app_collect_file_thumb', {id: collection.id, fileId: coverFile.id}) }}" alt="">
            {% else %}
                <div class="collect-share-card__cover-fallback">{{ collection.title|slice(0, 1)|upper }}</div>
            {% endif %}
            {% if primaryShareUrl %}
                <div class="collect-share-card__qr-wrap">
                    <canvas class="collect-qr collect-qr--xl" data-qr="{{ primaryShareUrl }}" width="168" height="168" aria-label="QR"></canvas>
                </div>
            {% endif %}
        </div>

        {% if primaryShareUrl %}
            <div class="collect-share-row">
                <input class="form-control" readonly value="{{ primaryShareUrl }}" id="collectPrimaryLink">
                <button type="button" class="collect-btn collect-btn--primary" data-copy="#collectPrimaryLink">{{ 'collect.copyLink'|trans }}</button>
            </div>
        {% else %}
            <p class="collect-sheet__sub">{{ 'collect.noLinks'|trans }}</p>
        {% endif %}

        <button type="button" class="collect-btn w-100 mt-3" id="collectOpenAccessFromShare">{{ 'collect.manageAccess'|trans }}</button>
    </div>
</div>

{# Access & sharing #}
<div class="collect-overlay" id="collectAccessModal" hidden data-open-panel="{{ app.request.query.get('panel') == 'access' ? '1' : '0' }}">
    <div class="collect-overlay__backdrop" data-close-overlay></div>
    <div class="collect-overlay__card collect-access-card" role="dialog" aria-modal="true" aria-label="{{ 'collect.accessSharing'|trans }}">
        <button type="button" class="collect-overlay__close" data-close-overlay aria-label="{{ 'collect.close'|trans }}">×</button>
        <p class="collect-share-card__eyebrow">{{ 'collect.manage'|trans }}</p>
        <h2 class="collect-share-card__title">{{ 'collect.accessSharing'|trans }}</h2>

        <p class="collect-access-section-label">{{ 'collect.share'|trans|upper }}</p>
        <div class="collect-access-share-actions">
            {% if primaryShareUrl %}
                <button type="button" class="collect-access-tile" data-copy="#collectPrimaryLinkHidden">
                    <span class="collect-access-tile__icon">🔗</span>
                    <span>{{ 'collect.copyLink'|trans }}</span>
                </button>
                <button type="button" class="collect-access-tile" id="collectShowQrFromAccess">
                    <span class="collect-access-tile__icon">▦</span>
                    <span>{{ 'collect.qrCode'|trans }}</span>
                </button>
                <input type="hidden" id="collectPrimaryLinkHidden" value="{{ primaryShareUrl }}">
            {% endif %}
        </div>

        <p class="collect-access-section-label">{{ 'collect.members'|trans|upper }}</p>
        <ul class="collect-member-list">
            <li class="collect-member">
                <span class="collect-member__avatar" style="--avatar: #e07a5f">{{ owner ? (owner.email|slice(0,2)|upper) : 'YO' }}</span>
                <span class="collect-member__meta">
                    <strong>{{ owner ? owner.email : '—' }}</strong>
                    <small>{{ 'collect.member.owner'|trans }}</small>
                </span>
                <span class="collect-member__you">{{ 'collect.member.you'|trans }}</span>
            </li>
            {% for row in members %}
                {% set m = row.member %}
                <li class="collect-member">
                    <span class="collect-member__avatar">{{ m.initials }}</span>
                    <span class="collect-member__meta">
                        <strong>{{ m.displayName }}</strong>
                        <small>{{ m.email }} · {{ ('collect.role.' ~ m.role)|trans }}</small>
                    </span>
                    <div class="dropdown">
                        <button class="collect-more__btn" type="button" data-bs-toggle="dropdown" aria-label="{{ 'collect.more'|trans }}">⋯</button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            {% for role in ['viewer', 'downloader', 'uploader', 'member'] %}
                                <li>
                                    <form method="post" action="{{ path('app_collect_member_role', {id: collection.id, memberId: m.id}) }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('collect_member_role_' ~ m.id) }}">
                                        <input type="hidden" name="role" value="{{ role }}">
                                        <button class="dropdown-item{% if m.role == role %} active{% endif %}" type="submit">{{ ('collect.role.' ~ role)|trans }}</button>
                                    </form>
                                </li>
                            {% endfor %}
                            {% if row.url %}
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <button type="button" class="dropdown-item" data-copy-text="{{ row.url|e('html_attr') }}">{{ 'collect.copyPersonalLink'|trans }}</button>
                                </li>
                            {% endif %}
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form method="post" action="{{ path('app_collect_member_remove', {id: collection.id, memberId: m.id}) }}" onsubmit="return confirm('{{ 'collect.member.confirmRemove'|trans|e('js') }}');">
                                    <input type="hidden" name="_token" value="{{ csrf_token('collect_member_remove_' ~ m.id) }}">
                                    <button class="dropdown-item text-danger" type="submit">{{ 'collect.member.remove'|trans }}</button>
                                </form>
                            </li>
                        </ul>
                    </div>
                </li>
            {% endfor %}
        </ul>

        <form class="collect-member-add" method="post" action="{{ path('app_collect_member_add', {id: collection.id}) }}">
            <input type="hidden" name="_token" value="{{ csrf_token('collect_member_add_' ~ collection.id) }}">
            <p class="collect-access-section-label">{{ 'collect.member.add'|trans|upper }}</p>
            <input class="form-control mb-2" type="email" name="email" required placeholder="{{ 'collect.member.emailPlaceholder'|trans }}">
            <input class="form-control mb-2" type="text" name="name" placeholder="{{ 'collect.member.namePlaceholder'|trans }}">
            <select class="form-select mb-2" name="role">
                <option value="member">{{ 'collect.role.member'|trans }}</option>
                <option value="downloader">{{ 'collect.role.downloader'|trans }}</option>
                <option value="viewer">{{ 'collect.role.viewer'|trans }}</option>
                <option value="uploader">{{ 'collect.role.uploader'|trans }}</option>
            </select>
            <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" name="sendInvite" value="1" id="collectSendInvite" checked>
                <label class="form-check-label" for="collectSendInvite">{{ 'collect.member.sendInvite'|trans }}</label>
            </div>
            <button class="collect-btn collect-btn--primary w-100" type="submit">{{ 'collect.member.add'|trans }}</button>
        </form>
    </div>
</div>

{# Settings modal (moved to body by collect.ts so backdrop does not block clicks) #}
<div class="modal fade collect-modal" id="collectSettingsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" method="post" action="{{ path('app_collect_settings', {id: collection.id}) }}">
            <div class="modal-header">
                <h5 class="modal-title">{{ 'collect.settings'|trans }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'collect.close'|trans }}"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="_token" value="{{ csrf_token('collect_settings_' ~ collection.id) }}">
                <label class="form-label">{{ 'collect.field.title'|trans }}</label>
                <input class="form-control mb-3" name="title" value="{{ collection.title }}" required>
                <label class="form-label">{{ 'collect.field.description'|trans }}</label>
                <textarea class="form-control mb-3" name="description" rows="2">{{ collection.description }}</textarea>
                <label class="form-label">{{ 'collect.field.type'|trans }}</label>
                <select class="form-select mb-3" name="type">
                    <option value="share" {% if collection.type == 'share' %}selected{% endif %}>{{ 'collect.type.share'|trans }}</option>
                    <option value="collect" {% if collection.type == 'collect' %}selected{% endif %}>{{ 'collect.type.collect'|trans }}</option>
                    <option value="collab" {% if collection.type == 'collab' %}selected{% endif %}>{{ 'collect.type.collab'|trans }}</option>
                </select>
                <label class="form-label">{{ 'collect.field.expiresAt'|trans }}</label>
                <input class="form-control mb-3" type="datetime-local" name="expiresAt" value="{{ collection.expiresAt ? collection.expiresAt|date('Y-m-d\\TH:i') : '' }}">
                <div class="form-check"><input class="form-check-input" type="checkbox" name="requirePassword" value="1" {% if collection.requirePassword %}checked{% endif %}><label class="form-check-label">{{ 'collect.sec.password'|trans }}</label></div>
                <input class="form-control mb-2" type="password" name="password" placeholder="{{ 'collect.sec.passwordPlaceholder'|trans }}">
                <div class="form-check"><input class="form-check-input" type="checkbox" name="requireEmailCode" value="1" {% if collection.requireEmailCode %}checked{% endif %}><label class="form-check-label">{{ 'collect.sec.emailCode'|trans }}</label></div>
                <div class="form-check"><input class="form-check-input" type="checkbox" name="requireTerms" value="1" {% if collection.requireTerms %}checked{% endif %}><label class="form-check-label">{{ 'collect.sec.terms'|trans }}</label></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="collect-btn" data-bs-dismiss="modal">{{ 'collect.close'|trans }}</button>
                <button type="submit" class="collect-btn collect-btn--primary">{{ 'collect.save'|trans }}</button>
            </div>
        </form>
    </div>
</div>

<div class="modal fade collect-modal" id="collectActivityModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ 'collect.activity'|trans }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <ul class="collect-activity">
                    {% for e in collection.events|slice(0, 40) %}
                        <li>
                            <span class="collect-activity__time">{{ e.createdAt|date('d.m.Y H:i') }}</span>
                            <span class="collect-activity__type">{{ ('collect.event.' ~ e.eventType)|trans }}</span>
                            {% if e.file %}
                                <span class="collect-activity__file">{{ e.file.originalFilename }}</span>
                            {% endif %}
                            {% if e.details %}
                                <span class="collect-activity__details">{{ e.details }}</span>
                            {% endif %}
                            {% if e.actor %}
                                <span class="collect-activity__actor">{{ e.actor }}</span>
                            {% endif %}
                        </li>
                    {% else %}
                        <li>—</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>

{% if trash|length %}
<div class="modal fade collect-modal" id="collectTrashModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ 'collect.trashBin'|trans }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <ul>
                    {% for f in trash %}
                        <li class="mb-2">
                            {{ f.originalFilename }}
                            <form class="d-inline" method="post" action="{{ path('app_collect_file_restore', {id: collection.id, fileId: f.id}) }}">
                                <input type="hidden" name="_token" value="{{ csrf_token('collect_file_restore_' ~ f.id) }}">
                                <button type="submit" class="collect-btn">{{ 'collect.restore'|trans }}</button>
                            </form>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}
{% block javascripts %}{{ parent() }}{{ encore_entry_script_tags('collect') }}{% endblock %}