{% if related_products %}
{% set _video_ext = ["mp4", "webm", "mkv", "avi", "mov", "wmv", "flv", "m4v", "ogv"] %}
{% set _audio_ext = ["mp3", "wav", "ogg", "m4a", "flac", "aac", "wma", "opus"] %}
{% set _image_ext = ["jpg", "jpeg", "png", "gif", "webp", "bmp", "svg"] %}
{% set _doc_ext = ["pdf"] %}
{% macro media_type(prod) %}{% set ext = prod.extensions.get("product", "")|lower %}{% if ext in _video_ext %}video{% elif ext in _audio_ext %}audio{% elif ext in _image_ext %}image{% elif ext in _doc_ext %}document{% else %}other{% endif %}{% endmacro %}
<div class="related-content">
    <div class="related-content-header">
        <div class="ring-header-info">
            <h3>Up Next</h3>
            {% if request.shop.watch_mode_enabled %}
            <span id="ring-progress" class="ring-progress"></span>
            {% endif %}
        </div>
        {% if request.shop.watch_mode_enabled %}
        <div class="ring-header-controls">
            <label class="watch-fresh-label js-only">
                <span class="fresh-label-text">Fresh</span>
                <input type="checkbox" id="watch-fresh-toggle" />
                <span class="autoplay-slider"></span>
            </label>
            <label class="watch-direction-label js-only">
                <span class="direction-label-text">Reverse</span>
                <input type="checkbox" id="watch-direction-toggle" />
                <span class="autoplay-slider"></span>
            </label>
            <label class="watch-cinema-label js-only">
                <span class="cinema-label-text">Cinema</span>
                <input type="checkbox" id="watch-cinema-toggle" />
                <span class="autoplay-slider"></span>
            </label>
            <label class="watch-autoplay-label js-only">
                <span class="autoplay-label-text">Autoplay</span>
                <input type="checkbox" id="watch-autoplay-toggle" checked />
                <span class="autoplay-slider"></span>
            </label>
            <button id="karaoke-toggle-btn" class="ring-karaoke-btn mps-button js-only" style="display:none" title="Karaoke: play instrumental version">&#127908;</button>
            <button id="skip-prev-btn" class="skip-next-btn mps-button js-only" title="Go to previous item">&#9664; Prev</button>
            <button id="skip-random-btn" class="skip-next-btn mps-button js-only" title="Jump to random item">&#127922;</button>
            <button id="skip-next-btn" class="skip-next-btn mps-button js-only" title="Skip to next unwatched">Next &#9654;</button>
        </div>
        <div class="ring-filter-controls js-only">
            <button class="ring-filter-btn active" data-filter-type="video">Video</button>
            <button class="ring-filter-btn active" data-filter-type="audio">Audio</button>
            <button class="ring-filter-btn active" data-filter-type="image">Image</button>
            <button class="ring-filter-btn active" data-filter-type="document">Docs</button>
            <button class="ring-filter-btn active" data-filter-type="other">Other</button>
        </div>
        {% endif %}
    </div>
    {% for item in related_products %}
    {% if item is mapping %}
    {% set related = item.product %}
    {% set offset = item.offset %}
    {% else %}
    {% set related = item %}
    {% set offset = loop.index %}
    {% endif %}
    {% if offset == 1 %}
    <div class="related-content-row related-content-row-current">
        <span class="related-content-index">&#9654;</span>
        <span class="related-content-item related-content-now-playing">
            {% if "thumbnail1" in product.extensions %}
            <img src="{{ request.shop_cdn_endpoint }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" />
            {% else %}
            <span class="related-content-no-thumb"></span>
            {% endif %}
            <span class="related-content-title">{{ product.title }}</span>
        </span>
        <button class="queue-add-btn js-only"
                data-product-id="{{ product.id }}"
                data-title="{{ product.title }}"
                data-url="{{ product.absolute_url(request) }}"
                data-thumbnail="{% if 'thumbnail1' in product.extensions %}{{ request.shop_cdn_endpoint }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}{% endif %}"
                title="Add to queue">+</button>
    </div>
    {% endif %}
    <div class="related-content-row{% if offset < 0 %} related-content-row-prev{% endif %}{% if offset > 7 %} related-content-overflow{% endif %}" data-media-type="{{ media_type(related)|trim }}">
        <span class="related-content-index">{{ offset }}</span>
        <a href="{{ related.absolute_url(request) }}" class="related-content-item" data-watch-id="{{ related.id }}">
            {% if "thumbnail1" in related.extensions %}
            <img {% if offset > 7 %}loading="lazy" {% endif %}src="{{ request.shop_cdn_endpoint }}/{{ related.s3_path }}/thumbnail1?ts={{ related.updated_timestamp }}" />
            {% else %}
            <span class="related-content-no-thumb"></span>
            {% endif %}
            <span class="related-content-title">{{ related.title }}</span>
        </a>
        <button class="queue-add-btn js-only"
                data-product-id="{{ related.id }}"
                data-title="{{ related.title }}"
                data-url="{{ related.absolute_url(request) }}"
                data-thumbnail="{% if 'thumbnail1' in related.extensions %}{{ request.shop_cdn_endpoint }}/{{ related.s3_path }}/thumbnail1?ts={{ related.updated_timestamp }}{% endif %}"
                title="Add to queue">+</button>
    </div>
    {% endfor %}
    {% if shop.comments_enabled %}
    <a href="#comments" class="related-content-comments-link">Comments ({{ product.public_comment_count }})</a>
    {% endif %}
</div>
{% endif %}
