<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:flashMessages as="flashMessages">
                        <f:for each="{flashMessages}" as="msg">
                            <div
                                class="mb-4 border border-color-brown rounded px-4 py-3 text-sm text-color-soft-black font-roboto"
                            >
                                {msg.message}
                            </div>
                        </f:for>
                    </f:flashMessages>

                    <f:form
                        action="save"
                        name="user"
                        id="sfrForm"
                        objectName="user"
                        object="{user}"
                        class="border border-color-brown bg-white p-10"
                    >
                        <div class="text-center mb-8">
                            <h2 class="headline-2-center">KAYIT OL</h2>
                            <p class="sub-headline-center mt-3">
                                Yeni hesap oluşturun
                            </p>
                        </div>

                        <div class="space-y-6">
                            <!-- Ad / Soyad -->
                            <div class="grid grid-cols-2 gap-6">
                                <div>
                                    <label
                                        for="firstName"
                                        class="block text-sm font-medium text-color-soft-black font-roboto-slab tracking-[1px] mb-2"
                                        >Ad</label
                                    >
                                    <f:form.textfield
                                        property="firstName"
                                        id="firstName"
                                        required="required"
                                        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="lastName"
                                        class="block text-sm font-medium text-color-soft-black font-roboto-slab tracking-[1px] mb-2"
                                        >Soyad</label
                                    >
                                    <f:form.textfield
                                        property="lastName"
                                        id="lastName"
                                        required="required"
                                        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>

                            <!-- E-posta -->
                            <div>
                                <label
                                    for="email"
                                    class="block text-sm font-medium text-color-soft-black font-roboto-slab tracking-[1px] mb-2"
                                    >E-posta</label
                                >
                                <f:form.textfield
                                    property="email"
                                    id="email"
                                    type="email"
                                    required="required"
                                    autocomplete="email"
                                    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>

                            <!-- Şifre -->
                            <div>
                                <label
                                    for="password"
                                    class="block text-sm font-medium text-color-soft-black font-roboto-slab tracking-[1px] mb-2"
                                    >Şifre</label
                                >
                                <f:form.password
                                    property="password"
                                    id="password"
                                    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>

                            <!-- Şifre Tekrar -->
                            <div>
                                <label
                                    for="passwordRepeat"
                                    class="block text-sm font-medium text-color-soft-black font-roboto-slab tracking-[1px] mb-2"
                                    >Şifre Tekrar</label
                                >
                                <f:form.password
                                    property="passwordRepeat"
                                    id="passwordRepeat"
                                    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="KAYIT OL"
                                    class="btn-1 w-full flex justify-center cursor-pointer"
                                />
                            </div>

                            <p class="text-center paragraph mt-4">
                                Zaten hesabınız var mı?
                                <f:link.page
                                    pageUid="{settings.loginPageId}"
                                    class="text-color-brown hover:text-color-soft-black font-roboto-slab font-medium tracking-[1px] t-all"
                                    >Giriş Yap</f:link.page
                                >
                            </p>
                        </div>
                    </f:form>
                </div>
            </div>
        </div>
    </div>
</html>
