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

{% block main %}
    {% set scheduled = not app.user.dontDeleteBefore or app.user.dontDeleteBefore < '+3 months'|date %}

    <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.closeAccount.autoDeletionTitle'|trans({}, 'cms') }}</h2>
            <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'userAccount.closeAccount.autoDeletionText'|trans({}, 'cms') }}</p>
        </div>

        <div 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="mb-4 flex items-center gap-3">
                        {% if scheduled %}
                            <span class="inline-flex items-center gap-2 rounded-full bg-amber-100 px-3 py-1.5 text-xs font-semibold text-amber-800 dark:bg-amber-900/30 dark:text-amber-200">
                                <span class="h-1.5 w-1.5 rounded-full bg-amber-500"></span>
                                {{ 'userAccount.closeAccount.statusScheduled'|trans({}, 'cms') }}
                            </span>
                        {% else %}
                            <span class="inline-flex items-center gap-2 rounded-full bg-green-100 px-3 py-1.5 text-xs font-semibold text-green-800 dark:bg-green-900/30 dark:text-green-200">
                                <span class="h-1.5 w-1.5 rounded-full bg-green-500"></span>
                                {{ 'userAccount.closeAccount.statusExtended'|trans({}, 'cms') }}
                            </span>
                        {% endif %}
                    </div>

                    {% if scheduled %}
                        <div class="flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3.5 text-sm leading-relaxed text-amber-900 dark:border-amber-900/50 dark:bg-amber-900/20 dark:text-amber-200">
                            <svg class="mt-0.5 h-[18px] w-[18px] flex-none text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
                            <div>{{ 'userAccount.closeAccount.autoDeletionInfo'|trans({}, 'cms')|raw }}</div>
                        </div>
                    {% else %}
                        <div class="flex items-start gap-3 rounded-xl border border-green-200 bg-green-50 px-4 py-3.5 text-sm leading-relaxed text-green-900 dark:border-green-900/50 dark:bg-green-900/20 dark:text-green-200">
                            <svg class="mt-0.5 h-[18px] w-[18px] flex-none text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m9 11 3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                            <div>{{ 'userAccount.closeAccount.extendedInfo'|trans({date: app.user.dontDeleteBefore}, 'cms')|raw }}</div>
                        </div>
                    {% endif %}
                </div>

                <div class="flex flex-col items-stretch gap-3 border-t border-gray-200 bg-gray-50 px-6 py-4 sm:flex-row sm:items-center sm:justify-between dark:border-gray-700 dark:bg-gray-800/60">
                    <span class="flex items-center gap-2 text-xs text-gray-500 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"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                        {{ 'userAccount.closeAccount.renewalNote'|trans({}, 'cms') }}
                    </span>
                    <form method="POST" class="sm:flex-none">
                        <input type="hidden" name="FORM_SUBMIT" value="extend_account">
                        <input type="hidden" name="REQUEST_TOKEN" value="{{ contao_request_token() }}">
                        <button type="submit"
                                class="w-full rounded-md bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-xs transition hover:bg-green-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600 sm:w-auto">
                            {{ (scheduled ? 'userAccount.closeAccount.extendAccount' : 'userAccount.closeAccount.extendAgain')|trans({}, 'cms') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <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" x-data="{ modalOpen: false, error: null }">
        <div>
            <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">{{ 'userAccount.closeAccount.deleteNowTitle'|trans({}, 'cms') }}</h2>
            <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'userAccount.closeAccount.deleteNowText'|trans({}, 'cms') }}</p>
        </div>

        <div class="md:col-span-2">
            <div class="overflow-hidden rounded-xl border border-red-200 bg-white shadow-sm dark:border-red-900/40 dark:bg-gray-800">
                <div class="flex flex-col items-start gap-5 p-6 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
                    <p class="max-w-prose text-sm leading-relaxed text-gray-600 dark:text-gray-300">
                        <strong class="font-semibold text-gray-900 dark:text-gray-100">{{ 'userAccount.closeAccount.dangerLead'|trans({}, 'cms') }}</strong>
                        {{ 'userAccount.closeAccount.dangerRest'|trans({}, 'cms') }}
                    </p>
                    <button type="button"
                            @click="modalOpen = true"
                            class="inline-flex flex-none items-center gap-2 rounded-md border border-red-300 bg-white px-3 py-2 text-sm font-semibold text-red-600 shadow-xs transition hover:border-red-400 hover:bg-red-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 dark:border-red-700 dark:bg-transparent dark:text-red-400 dark:hover:bg-red-900/20">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
                        {{ 'userAccount.closeAccount.deleteButton'|trans({}, 'cms') }}
                    </button>
                </div>
            </div>
        </div>

        <div class="fixed bottom-0 inset-x-0 px-4 pb-4 sm:inset-0 sm:flex sm:items-center sm:justify-center z-50"
             x-show="modalOpen"
             style="display: none">
            <div x-show="modalOpen"
                 x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="ease-in duration-200"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="fixed inset-0 transition-opacity">
                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>

            <div x-show="modalOpen"
                 @click.away="modalOpen = false"
                 x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave="ease-in duration-200"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 class="relative bg-white rounded-lg px-4 pt-5 pb-4 overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full sm:p-6"
                 role="dialog"
                 :aria-modal="!!modalOpen"
                 aria-labelledby="modal-headline">
                <form method="post"
                      x-ref="form"
                      @submit.prevent="fetch(window.location.href, { method: 'POST', body: new FormData($refs.form)})
.then(response => {if (response.redirected){ window.location.href = response.url; return; } return response.json();})
.then(json => { error = json.error;})
">

                    <input type="hidden" name="FORM_SUBMIT" value="close_account">
                    <input type="hidden" name="REQUEST_TOKEN" value="{{ contao_request_token() }}">
                    <div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
                        <button @click="modalOpen = false"
                                type="button"
                                class="text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150"
                                aria-label="{{ 'userAccount.closeAccount.modal.close'|trans({}, 'cms') }}">
                            <twig:ux:icon name="lucide:x" class="h-6 w-6" />
                        </button>
                    </div>
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                            <twig:ux:icon name="lucide:triangle-alert" class="h-6 w-6 text-red-600" />
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-50" id="modal-headline">{{ 'userAccount.closeAccount.modal.title'|trans({}, 'cms') }}</h3>
                            <div class="mt-2">
                                <p class="text-sm leading-5 text-gray-500">
                                    {{ 'userAccount.closeAccount.modal.text'|trans({}, 'cms') }}
                                </p>
                            </div>
                            <div class="mt-3 max-w-xs">
                                <label class="mb-1 block text-sm font-medium leading-5 text-gray-700 dark:text-gray-50"
                                       for="ctrl_password">
                                    <span class="sr-only">{{ 'userAccount.closeAccount.modal.passwordLabel'|trans({}, 'cms') }} </span>{{ 'userAccount.closeAccount.modal.passwordLabel'|trans({}, 'cms') }}<span
                                            class="mandatory">*</span>
                                </label>
                                <div class="mt-1 max-w-full rounded-md shadow-sm">
                                    <input class="form-input block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5 dark:bg-gray-100"
                                           :class="error ? 'outline-none shadow-outline-red border-red-300' : ''"
                                           type="password"
                                           name="password"
                                           id="ctrl_password"
                                           value=""
                                           x-ref="password"
                                           required="">
                                </div>
                                <p x-show="!!error" class="mt-2 text-sm text-red-600" id="email-error"
                                   x-text="error"></p>
                                <p x-show="!error" class="mt-2 text-sm text-gray-500 dark:text-gray-400" id="email-description">
                                    {{ 'userAccount.closeAccount.modal.passwordHelp'|trans({}, 'cms') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                        <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
                            <button type="submit"
                                    class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-red-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                                {{ 'userAccount.closeAccount.modal.confirmButton'|trans({}, 'cms') }}
                            </button>
                        </span>
                        <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
                            <button @click="modalOpen = false"
                                    type="button"
                                    class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                                {{ 'userAccount.closeAccount.modal.cancelButton'|trans({}, 'cms') }}
                            </button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}
