<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    data-namespace-typo3-fluid="true"
>
    <div class="spacing-6 py-12 px-4">
        <div class="bido-container">
            <div class="flex items-center justify-center min-h-[60vh]">
                <div class="w-full max-w-md">
                    <f:form
                        action="changePassword"
                        method="post"
                        requestToken="{requestToken}"
                        class="border border-color-brown bg-white p-10"
                    >
                        <div class="text-center mb-8">
                            <h2 class="headline-2-center">
                                YENİ ŞİFRE BELİRLE
                            </h2>
                            <p class="sub-headline-center mt-3">
                                Hesabınız için yeni bir şifre oluşturun.
                            </p>
                        </div>

                        <f:render partial="ValidationErrors" />

                        <div class="space-y-6">
                            <div>
                                <label
                                    for="tx-felogin-input-password1"
                                    class="block text-sm font-medium text-color-soft-black font-roboto-slab tracking-[1px] mb-2"
                                >
                                    Yeni Şifre
                                </label>
                                <f:form.password
                                    name="newPassword"
                                    id="tx-felogin-input-password1"
                                    required="required"
                                    autocomplete="new-password"
                                    class="w-full border-0 border-b border-color-brown bg-transparent px-0 py-3 text-sm text-color-soft-black font-roboto placeholder-color-dark-gray focus:outline-none focus:border-color-soft-black transition-colors"
                                />
                            </div>

                            <div>
                                <label
                                    for="tx-felogin-input-password2"
                                    class="block text-sm font-medium text-color-soft-black font-roboto-slab tracking-[1px] mb-2"
                                >
                                    Şifre Tekrar
                                </label>
                                <f:form.password
                                    name="newPasswordRepeat"
                                    id="tx-felogin-input-password2"
                                    required="required"
                                    autocomplete="new-password"
                                    class="w-full border-0 border-b border-color-brown bg-transparent px-0 py-3 text-sm text-color-soft-black font-roboto placeholder-color-dark-gray focus:outline-none focus:border-color-soft-black transition-colors"
                                />
                            </div>

                            <div class="pt-4">
                                <f:form.submit
                                    value="ŞİFREYİ KAYDET"
                                    class="btn-1 w-full flex justify-center cursor-pointer"
                                />
                            </div>
                        </div>
                    </f:form>
                </div>
            </div>
        </div>
    </div>
</html>
