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

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

    {{ form_start(form, { attr: { class: 'md:col-span-2' } }) }}

    <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
        <div class="p-6">
            <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                <div class="col-span-full">
                    {{ form_row(form.oldPassword) }}
                </div>
                {% for field in form.plainPassword %}
                    <div class="sm:col-span-3">
                        {{ form_row(field) }}
                    </div>
                {% endfor %}
            </div>
        </div>

        <div class="flex items-center justify-between gap-4 border-t border-gray-200 bg-gray-50 px-6 py-4 dark:border-gray-700 dark:bg-gray-800/60">
            <span class="hidden items-center gap-2 text-xs text-gray-500 sm:flex dark:text-gray-400">
                <svg class="h-3.5 w-3.5 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
                {{ 'userAccount.changePasswordTab.note'|trans({}, 'cms') }}
            </span>
            {{ form_widget(form.submit, { attr: { class: 'whitespace-nowrap' } }) }}
        </div>
    </div>

    {{ form_end(form) }}

</div>
{% endblock %}
