<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">
                    <div
                        class="border border-color-brown bg-white p-10 text-center"
                    >
                        <!-- Success Icon -->
                        <div
                            class="inline-flex items-center justify-center w-16 h-16 border border-color-brown rounded-full text-color-brown text-3xl mb-6"
                        >
                            &#10003;
                        </div>

                        <!-- Header -->
                        <h2 class="headline-2-center">
                            <f:render
                                partial="RenderLabelOrMessage"
                                arguments="{key: 'status_header'}"
                            />
                        </h2>

                        <!-- Message -->
                        <p class="sub-headline-center mt-3">
                            <f:render
                                partial="RenderLabelOrMessage"
                                arguments="{key: 'status_message'}"
                            />
                        </p>

                        <!-- Form -->
                        <f:form
                            action="login"
                            actionUri="{actionUri}"
                            target="_top"
                            fieldNamePrefix=""
                        >
                            <!-- User Info Box -->
                            <div
                                class="mt-8 border border-color-brown px-4 py-3 text-sm text-color-soft-black mb-6 text-left"
                            >
                                <div class="inline-flex items-center gap-2">
                                    <svg
                                        class="w-4 h-4 text-color-brown"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                    >
                                        <path
                                            fill-rule="evenodd"
                                            d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                            clip-rule="evenodd"
                                        ></path>
                                    </svg>
                                    <div>
                                        <span
                                            class="font-roboto-slab font-medium"
                                            >Şu anda giriş yaptınız:</span
                                        >
                                        <br />
                                        <span class="font-roboto text-xs"
                                            >{user.username}</span
                                        >
                                    </div>
                                </div>
                            </div>

                            <!-- Logout Button -->
                            <f:form.submit
                                value="ÇIKIŞ YAP"
                                name="submit"
                                id="tx-felogin-input-logout"
                                class="btn-1 w-full flex justify-center cursor-pointer border-color-notification-red text-color-notification-red hover:border-color-soft-black hover:text-color-soft-black"
                            />

                            <!-- Hidden Fields -->
                            <div class="hidden">
                                <f:form.hidden
                                    name="logintype"
                                    value="logout"
                                />
                            </div>
                        </f:form>

                        <!-- Back to Home Link -->
                        <p
                            class="paragraph mt-6 pt-6 border-t border-color-brown border-opacity-30"
                        >
                            <a
                                href="/"
                                class="text-color-brown hover:text-color-soft-black font-roboto-slab font-medium tracking-[1px] t-all"
                            >
                                Anasayfaya Dön
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</html>
