{% extends '@Contao/content_element/_base.html.twig' %}
{% use '@Contao/component/_figure.html.twig' %}

{% block content %}
    {% if as_editor_view %}
        {% block editor_view %}
            <ul>
                {% for source_file in source_files %}
                    <li>
                        <span>{{ source_file.name }}</span>
                        <span class="size">({{ source_file.fileSize|format_bytes }})</span>
                    </li>
                {% endfor %}
            </ul>
        {% endblock %}
    {% else %}
        {{ block('figure_component') }}
    {% endif %}
{% endblock %}

{% block media %}
    {% set media_attributes = attrs(figure.media.attributes)
        .mergeWith(media_attributes|default)
    %}
    <{{ figure.media.type }}{{ media_attributes }}>
        {% for source_attributes in figure.media.sources %}
            {% do csp_source('media-src', source_attributes.src) %}
            <source{{ source_attributes }}>
        {% endfor %}
        {% for track_attributes in figure.media.tracks|default %}
            {% do csp_source('media-src', track_attributes.src) %}
            <track{{ track_attributes }}>
        {% endfor %}
    </{{ figure.media.type }}>
{% endblock %}

{# Add metadata #}
{% block metadata %}
    {% for source_file in source_files %}
        {% set schema_org_data = source_file.schemaOrgData|default({}) %}
        {% if figure.media.attributes.poster|default %}
            {% set schema_org_data = schema_org_data|merge({
                thumbnailUrl: figure.media.attributes.poster,
            }) %}
        {% endif %}
        {% do add_schema_org(schema_org_data) %}
    {% endfor %}
{% endblock %}
