{% if files %}
<section class="mb-5 border-b border-gray-200 pb-5">
    <p class="text-sm font-semibold text-dark">
        <c-i18n.blocktrans>Attachments</c-i18n.blocktrans> ({{ files|length }})
    </p>
    <div class="mt-3 flex flex-wrap gap-2">
        {% for file in files %}
        <a
            class="group flex w-72 items-center gap-3 rounded-xl border border-gray-200 bg-white p-3 text-left shadow-xs transition hover:border-primary-300 hover:bg-base"
            href="{{ file.download_url }}"
            download
            title="{{ file.filename }}"
        >
            <span class="inline-flex size-9 shrink-0 items-center justify-center rounded-xl bg-primary-50 text-primary-700 group-hover:bg-primary-100">
                <i class="fa fa-paperclip" aria-hidden="true"></i>
            </span>
            <span class="min-w-0">
                <span class="block truncate text-sm font-semibold text-dark">{{ file.filename }}</span>
                <span class="mt-0.5 block text-xs text-gray-500">{{ file.size|filesizeformat }}</span>
            </span>
        </a>
        {% endfor %}
    </div>
</section>
{% endif %}

<iframe
    class="h-[70vh] w-full border-0"
    sandbox="allow-popups allow-popups-to-escape-sandbox"
    srcdoc="{{ content|force_escape }}"
></iframe>