{% extends '@Contao/fragment/user_account/_base.html.twig' %}

{% block main %}
    <div class="py-16 border-t border-gray-200 dark:border-gray-800">
        <div class="mb-10">
            <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">{{ 'userAccount.consents.title'|trans({}, 'cms') }}</h2>
            <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
                {{ 'userAccount.consents.text'|trans({}, 'cms') }}
            </p>
        </div>

        <twig:Cms:Consents />

        {# the legal right to withdraw, spelled out once for the whole page #}
        <div class="mt-8 flex items-start gap-2.5 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3.5 text-[12.5px] leading-relaxed text-gray-500 dark:border-gray-700 dark:bg-gray-800/60 dark:text-gray-400">
            <twig:ux:icon name="lucide:shield" class="mt-0.5 size-4 flex-none text-gray-400" />
            <span>{{ 'userAccount.consents.legal'|trans({}, 'cms') }}</span>
        </div>
    </div>
{% endblock %}
