{% for item in feedItems %}
    {% set video = item.video %}
    <section class="video-section stack-item" data-stack-item>
        {% if video.playbackUrl %}
            <video
                class="stack-video feed-video kinetic-video"
                data-video-id="{{ video.id }}"
                src="{{ video.playbackUrl }}"
                {% if video.thumbnailUrl %}poster="{{ video.thumbnailUrl }}"{% endif %}
                muted
                playsinline
                webkit-playsinline
                preload="metadata"
            ></video>
        {% elseif video.thumbnailUrl %}
            <img class="stack-video feed-video kinetic-video" data-video-id="{{ video.id }}" src="{{ video.thumbnailUrl }}" alt="{{ video.title }}">
        {% endif %}

        <aside class="stack-actions" aria-label="Video Aktionen">
            <button
                type="button"
                class="stack-action-btn heart-btn spring-btn{% if item.userLiked %} is-liked{% endif %}"
                data-like-btn
                data-video-id="{{ video.id }}"
                data-like-url="{{ path('api_video_like', { id: video.id }) }}"
                data-user-liked="{{ item.userLiked ? '1' : '0' }}"
                {% if not app.user %}data-auth-required data-auth-action="liken"{% endif %}
            >
                <span class="heart-icon-wrapper"><span class="material-symbols-outlined">favorite</span></span>
                <span data-like-count>{{ item.likeCount }}</span>
            </button>
            <button type="button" class="stack-action-btn spring-btn" data-comment-btn data-video-id="{{ video.id }}" data-comments-url="{{ path('api_video_comments', { id: video.id }) }}" data-video-uploader-id="{{ item.uploaderProfileId ?? '' }}">
                <span class="heart-icon-wrapper"><span class="material-symbols-outlined">comment</span></span>
                <span data-comment-count>{{ item.commentCount }}</span>
            </button>
            <button type="button" class="stack-action-btn spring-btn" data-share-btn data-video-id="{{ video.id }}">
                <span class="heart-icon-wrapper"><span class="material-symbols-outlined">share</span></span>
                <span data-share-count>{{ (video.views / 40)|round(0, 'floor') }}</span>
            </button>
            <button
                type="button"
                class="stack-action-btn spring-btn save-btn{% if item.userSaved %} is-saved{% endif %}"
                data-save-btn
                data-video-id="{{ video.id }}"
                data-save-url="{{ path('api_video_favorite', { id: video.id }) }}"
                data-user-saved="{{ item.userSaved ? '1' : '0' }}"
                {% if not app.user %}data-auth-required data-auth-action="Videos speichern"{% endif %}
            >
                <span class="heart-icon-wrapper"><span class="material-symbols-outlined">bookmark</span></span>
                <span data-save-count>{{ item.saveCount }}</span>
            </button>
            <button type="button" class="stack-audio-toggle" data-audio-toggle aria-label="Ton ein oder ausschalten">
                <i class="fa-solid fa-volume-xmark" aria-hidden="true"></i>
            </button>
        </aside>

        <div class="stack-meta">
            <div class="stack-meta-chips animate-entry-1">
                <span class="stack-chip stack-chip-live">
                    <span class="live-indicator"></span>
                    {{ video.company and video.company.category ? video.company.category.name : 'Community' }}
                </span>
                <span class="stack-chip">Trending</span>
            </div>
            {% set uploaderLabel = video.ownerName ?: 'Wanted Community' %}
            {% set chipAvatar = item.uploaderAvatarPath ?: video.ownerAvatarPath %}

            <h2 class="stack-meta-title">
                {% if item.uploaderProfileId %}
                    <a href="{{ path('app_profile_show', {id: item.uploaderProfileId}) }}" {% if not app.user %}data-auth-required data-auth-action="Profile ansehen"{% endif %}>{{ uploaderLabel }}</a>
                {% else %}
                    {{ uploaderLabel }}
                {% endif %}
            </h2>

            <div class="stack-meta-profile animate-entry-2">
                {% if item.uploaderProfileId %}
                    <a href="{{ path('app_profile_show', {id: item.uploaderProfileId}) }}" class="stack-profile-chip" {% if not app.user %}data-auth-required data-auth-action="Profile ansehen"{% endif %}>
                        {% if chipAvatar %}
                            <img src="{{ chipAvatar }}" alt="{{ uploaderLabel }}">
                        {% else %}
                            {{ uploaderLabel|slice(0, 1)|upper }}
                        {% endif %}
                    </a>
                {% else %}
                    <div class="stack-profile-chip" aria-hidden="true">
                        {% if chipAvatar %}
                            <img src="{{ chipAvatar }}" alt="{{ uploaderLabel }}">
                        {% else %}
                            {{ uploaderLabel|slice(0, 1)|upper }}
                        {% endif %}
                    </div>
                {% endif %}
                <div>
                    <h3>
                        {% if item.uploaderProfileId %}
                            <a href="{{ path('app_profile_show', {id: item.uploaderProfileId}) }}" {% if not app.user %}data-auth-required data-auth-action="Profile ansehen"{% endif %}>{{ uploaderLabel }}</a>
                        {% else %}
                            {{ uploaderLabel }}
                        {% endif %}
                    </h3>
                    <p class="muted stack-meta-byline">
                        {% if video.company and video.ownerType == 'community' %}
                            <span class="stack-meta-provider">Anbieter: <a href="{{ path('app_company_show', { slug: video.company.slug }) }}">{{ video.company.name }}</a></span>
                            {% if item.companyRatingCount > 0 %}
                                <span class="feed-company-rating-pill" title="{{ item.companyRatingCount }} Bewertung{{ item.companyRatingCount == 1 ? '' : 'en' }}">
                                    <span class="material-symbols-outlined" aria-hidden="true">star</span>
                                    {{ item.companyRatingAvg|number_format(1, ',', '') }} · {{ item.companyRatingCount }}
                                </span>
                            {% endif %}
                        {% elseif video.company and item.companyRatingCount > 0 %}
                            <span class="feed-company-rating-pill" title="{{ item.companyRatingCount }} Bewertung{{ item.companyRatingCount == 1 ? '' : 'en' }}">
                                <span class="material-symbols-outlined" aria-hidden="true">star</span>
                                {{ item.companyRatingAvg|number_format(1, ',', '') }} · {{ item.companyRatingCount }}
                            </span>
                        {% endif %}
                        {% set metaParts = [] %}
                        {% if video.company and video.company.category is not null %}
                            {% set metaParts = metaParts|merge([video.company.category.name]) %}
                        {% elseif video.ownerCity %}
                            {% set metaParts = metaParts|merge([video.ownerCity]) %}
                        {% elseif not video.company %}
                            {% set metaParts = metaParts|merge(['Community']) %}
                        {% endif %}
                        {% if item.distanceKm is not null %}
                            {% set metaParts = metaParts|merge([item.distanceKm|number_format(1, '.', '') ~ ' km']) %}
                        {% endif %}
                        {% if metaParts|length %}
                            {% if (video.company and video.ownerType == 'community') or (video.company and item.companyRatingCount > 0) %}
                                <span class="stack-meta-byline-sep" aria-hidden="true"> | </span>
                            {% endif %}
                            {{ metaParts|join(' | ') }}
                        {% endif %}
                    </p>
                </div>
            </div>

            <p class="animate-entry-2" data-feed-video-title>{{ video.title }}</p>

            {% if video.ownerType == 'community' and video.providerRating %}
                <div class="feed-rating-row animate-entry-2" aria-label="Bewertung fuer diesen Upload">
                    <span class="muted" style="font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;">Bewertung</span>
                    <span class="feed-rating-stars" role="img" aria-label="{{ video.providerRating }} von 5 Sternen">
                        {% for i in 1..5 %}
                            <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' {{ i <= video.providerRating ? 1 : 0 }}, 'wght' 500, 'GRAD' 0, 'opsz' 24;">star</span>
                        {% endfor %}
                    </span>
                </div>
            {% endif %}

            {% if video.company %}
                <a class="stack-cta-btn shimmer-effect glow-btn spring-btn animate-entry-3" href="{{ path('app_company_show', { slug: video.company.slug }) }}">Book</a>
            {% endif %}
        </div>
    </section>
{% endfor %}