{% set variant = variant|default('') %}
{% set isPreviewable = activeAsset.isImage() or 'pdf' == activeAsset.getFileType()|lower or activeAsset.getMime() starts with 'video' or activeAsset.getMime() starts with 'audio' %}

{% macro renderPreviewContent(activeAsset, assetDownloadUrl) %}
    {% if activeAsset.isImage() %}
        <img src="{{ assetDownloadUrl ~ '?stream=1' }}" alt="{{ activeAsset.getTitle()|escape }}" class="img-thumbnail" />
    {% elseif 'pdf' == activeAsset.getFileType()|lower %}
        <iframe src="{{ assetDownloadUrl ~ '?stream=1#view=FitH' }}" style="width: 100%; height: 70vh; border: none;" title="{{ 'mautic.asset.preview.pdf_iframe_title'|trans({'%title%': activeAsset.getTitle()|escape}) }}"></iframe>
    {% elseif activeAsset.getMime() starts with 'video' or activeAsset.getExtension() in ['mpg', 'mpeg', 'mp4', 'webm'] %}
        <video src="{{ assetDownloadUrl ~ '?stream=1' }}" controls style="width: 100%;">
            {{ 'mautic.asset.no_video_support'|trans }}
        </video>
    {% elseif activeAsset.getMime() starts with 'audio' or activeAsset.getExtension() in ['mp3', 'ogg', 'wav'] %}
        <audio controls>
            <source src="{{ assetDownloadUrl ~ '?stream=1' }}" type="{{ activeAsset.getMime() }}">
            {{ 'mautic.asset.no_audio_support'|trans }}
        </audio>
    {% else %}
        <div class="d-flex jc-center ai-center text-helper">
            <i class="{{ activeAsset.getIconClass() }} ri-lg mr-xs"></i>
            <span>{{ 'mautic.asset.no_preview'|trans }}</span>
        </div>
    {% endif %}
{% endmacro %}

{% if variant == 'interactive' %}
    {% if isPreviewable %}
    <h5 class="fw-sb mb-xs">{{ 'mautic.asset.asset.preview'|trans }}</h5>

    <div class="asset-preview">
        {% if activeAsset.isImage() %}
        <div class="asset-preview--image">
            <div class="asset-preview__label">
                {% include '@MauticCore/Helper/_tag.html.twig' with {
                    tags: [
                        {
                            label: 'mautic.asset.click_to_zoom',
                            color: 'gray',
                            size: 'sm'
                        }
                    ]
                } %}
            </div>
            {{ _self.renderPreviewContent(activeAsset, assetDownloadUrl) }}
        </div>
        {% elseif 'pdf' == activeAsset.getFileType()|lower %}
            <div class="asset-preview__label">
                {% include '@MauticCore/Helper/_tag.html.twig' with {
                    tags: [
                        {
                            label: 'mautic.asset.click_to_view_full_size',
                            color: 'gray',
                            size: 'sm',
                            attributes: {
                                'href': '#',
                                'data-toggle': 'modal',
                                'data-target': '#pdf-preview-modal'
                            }
                        }
                    ]
                } %}
            </div>
            <div class="pdf-preview-thumbnail">
                {{ _self.renderPreviewContent(activeAsset, assetDownloadUrl) }}
            </div>
            
            {% include '@MauticCore/Components/modal.html.twig' with {
                id: 'pdf-preview-modal',
                size: 'xl',
                type: 'productive',
                modalHeading: activeAsset.getTitle()|escape,
                modalAriaLabel: 'PDF Preview',
                modalContent: _self.renderPreviewContent(activeAsset, assetDownloadUrl),
                hasScrollingContent: false
            } %}
        {% else %}
            {{ _self.renderPreviewContent(activeAsset, assetDownloadUrl) }}
        {% endif %}
    </div>
    {% else %}
    <div class="d-flex jc-center ai-center text-helper">
        <i class="{{ activeAsset.getIconClass() }} ri-lg mr-xs"></i>
        <span>{{ 'mautic.asset.no_preview'|trans }}</span>
    </div>
    {% endif %}
    <div class="clearfix"></div>

{% elseif variant == 'dialog' %}
    {% set modalId = 'asset-dialog-preview-modal-' ~ activeAsset.id|default('new') %}
    {% if isPreviewable %}
        {% include '@MauticCore/Components/tile.html.twig' with {
            type: 'mini',
            href: '#',
            title: 'mautic.asset.open_preview',
            icon: 'ri-rectangle-line',
            attributes: {
                'data-toggle': 'modal',
                'data-target': '#' ~ modalId
            }
        } %}
    {% endif %}

    {% include '@MauticCore/Components/modal.html.twig' with {
        id: modalId,
        size: 'xl',
        type: 'productive',
        modalHeading: activeAsset.getTitle()|escape,
        modalAriaLabel: 'mautic.asset.preview.ariaLabel'|trans({'%title%': activeAsset.getTitle()|escape}),
        modalContent: _self.renderPreviewContent(activeAsset, assetDownloadUrl)
    } %}
{% else %}
    {{ _self.renderPreviewContent(activeAsset, assetDownloadUrl) }}
{% endif %}