<html
    xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
    xmlns:testproject="http://typo3.org/ns/Gfdhfhgfgg/Testproject/ViewHelpers"
    data-namespace-typo3-fluid="true"
>
    <header class="">
        <div class="">
            <div class="left">
                <button
                    class="burger-menu"
                    id="left-nav-toggle"
                    aria-label="Menüyü aç/kapat"
                >
                    <div class="line-menu line-half first-line"></div>
                    <div class="line-menu"></div>
                    <div class="line-menu line-half last-line"></div>
                </button>
                <a href="{f:uri.page(pageUid: 1)}" class="nav-img">
                    <f:if condition="{headerLogo}">
                        <f:then>
                            <f:image
                                image="{headerLogo}"
                                alt="Logo"
                                height="90"
                                class="h-20"
                            />
                        </f:then>
                        <f:else>
                            <f:if condition="{logo}">
                                <f:then
                                    ><img
                                        src="{logo}"
                                        alt="Logo"
                                        height="90"
                                        class="h-20"
                                /></f:then>
                                <f:else
                                    ><img
                                        src="/assets/images/logo/logo.svg"
                                        alt="Logo"
                                        height="90"
                                /></f:else>
                            </f:if>
                        </f:else>
                    </f:if>
                </a>
            </div>
            <div class="right">
                <a href="{f:uri.page(pageUid: 1)}" class="lg:hidden">
                    <f:if condition="{headerLogo}">
                        <f:then>
                            <f:image
                                image="{headerLogo}"
                                alt="Logo"
                                height="90"
                            />
                        </f:then>
                        <f:else>
                            <f:if condition="{logo}">
                                <f:then
                                    ><img src="{logo}" alt="Logo" height="90"
                                /></f:then>
                                <f:else
                                    ><img
                                        src="/assets/images/logo/logo.svg"
                                        alt="Logo"
                                        height="90"
                                /></f:else>
                            </f:if>
                        </f:else>
                    </f:if>
                </a>
                <nav>
                    <f:for each="{mainnavigation}" as="item">
                        <div>
                            <f:if condition="{item.children}">
                                <f:then>
                                    <a
                                        class="more {f:if(condition: item.active, then: 'active')}"
                                        href="{item.link}"
                                        target="{item.target}"
                                        title="{item.title -> f:format.htmlspecialchars()}"
                                    >
                                        <span>{item.title}</span>
                                    </a>
                                    <div class="dropdown-container">
                                        <f:for
                                            each="{item.children}"
                                            as="child"
                                        >
                                            <div>
                                                <a
                                                    href="{child.link}"
                                                    target="{child.target}"
                                                    title="{child.title -> f:format.htmlspecialchars()}"
                                                    class="{f:if(condition: child.active, then: 'active')}"
                                                >
                                                    <span>{child.title}</span>
                                                </a>
                                            </div>
                                        </f:for>
                                    </div>
                                </f:then>
                                <f:else>
                                    <a
                                        class="{f:if(condition: item.active, then: 'active')}"
                                        href="{item.link}"
                                        target="{item.target}"
                                        title="{item.title -> f:format.htmlspecialchars()}"
                                    >
                                        <span>{item.title}</span>
                                    </a>
                                </f:else>
                            </f:if>
                        </div>
                    </f:for>
                </nav>
                <div class="icons">
                    <a
                        href="{f:uri.page(pageUid: 1)}"
                        class="cart"
                        title="Sepet"
                    >
                        <span><i class="fa-solid fa-cart-shopping"></i></span>
                        <small>0</small>
                    </a>
                    <f:if condition="{social.facebook}">
                        <a
                            href="{social.facebook}"
                            target="_blank"
                            rel="noopener noreferrer"
                            aria-label="Facebook"
                        >
                            <span><i class="fa-brands fa-facebook-f"></i></span>
                        </a>
                    </f:if>
                    <f:if condition="{social.instagram}">
                        <a
                            href="{social.instagram}"
                            target="_blank"
                            rel="noopener noreferrer"
                            aria-label="Instagram"
                        >
                            <span><i class="fa-brands fa-instagram"></i></span>
                        </a>
                    </f:if>
                    <f:if condition="{social.twitter}">
                        <a
                            href="{social.twitter}"
                            target="_blank"
                            rel="noopener noreferrer"
                            aria-label="Twitter"
                        >
                            <span><i class="fa-brands fa-twitter"></i></span>
                        </a>
                    </f:if>
                    <f:if condition="{social.pinterest}">
                        <a
                            href="{social.pinterest}"
                            target="_blank"
                            rel="noopener noreferrer"
                            aria-label="Pinterest"
                        >
                            <span><i class="fa-brands fa-pinterest"></i></span>
                        </a>
                    </f:if>

                    <!-- ============================================================ -->
                    <!-- Authentication: Login / Register / User Profile             -->
                    <!-- ============================================================ -->
                    <testproject:frontendUser as="fe_user">
                        <f:if condition="{fe_user}">
                            <!-- ========== LOGGED IN ========== -->
                            <f:then>
                                <div class="auth-menu relative" id="auth-menu">
                                    <button
                                        class="auth-trigger flex items-center gap-2 cursor-pointer"
                                        id="auth-menu-toggle"
                                        title="Profil Menüsü"
                                        aria-label="Kullanıcı menüsü"
                                        aria-expanded="false"
                                    >
                                        <span
                                            class="w-9 h-9 rounded-full bg-color-brown text-white flex items-center justify-center text-sm font-roboto-slab font-semibold tracking-[1px]"
                                        >
                                            <f:if
                                                condition="{fe_user.first_name}"
                                            >
                                                <f:then
                                                    >{fe_user.first_name ->
                                                    f:format.crop(maxCharacters:
                                                    1)}</f:then
                                                >
                                                <f:else
                                                    ><i
                                                        class="fa-solid fa-user text-xs"
                                                    ></i
                                                ></f:else>
                                            </f:if>
                                        </span>
                                        <i
                                            class="fa-solid fa-chevron-down text-[10px] text-color-dark-gray t-all"
                                        ></i>
                                    </button>

                                    <!-- Dropdown -->
                                    <div
                                        class="auth-dropdown absolute right-0 top-full mt-3 w-60 bg-white border border-color-brown opacity-0 invisible translate-y-2 z-50"
                                        id="auth-dropdown"
                                        style="
                                            transition:
                                                opacity 0.25s ease,
                                                transform 0.25s ease,
                                                visibility 0.25s ease;
                                        "
                                    >
                                        <!-- User Info -->
                                        <div
                                            class="px-5 py-4 border-b border-color-brown"
                                        >
                                            <div
                                                class="flex items-center gap-3"
                                            >
                                                <div
                                                    class="w-10 h-10 rounded-full bg-color-brown text-white flex items-center justify-center font-roboto-slab font-semibold text-sm"
                                                >
                                                    <f:if
                                                        condition="{fe_user.first_name}"
                                                    >
                                                        <f:then
                                                            >{fe_user.first_name
                                                            ->
                                                            f:format.crop(maxCharacters:
                                                            1)}</f:then
                                                        >
                                                        <f:else
                                                            ><i
                                                                class="fa-solid fa-user"
                                                            ></i
                                                        ></f:else>
                                                    </f:if>
                                                </div>
                                                <div class="flex-1 min-w-0">
                                                    <p
                                                        class="text-sm font-roboto-slab font-semibold text-color-soft-black tracking-[0.5px] truncate"
                                                    >
                                                        <f:if
                                                            condition="{fe_user.first_name}"
                                                        >
                                                            {fe_user.first_name}
                                                            <f:if
                                                                condition="{fe_user.last_name}"
                                                            >
                                                                {fe_user.last_name}</f:if
                                                            >
                                                        </f:if>
                                                    </p>
                                                    <p
                                                        class="text-xs font-roboto text-color-dark-gray truncate mt-0.5"
                                                    >
                                                        {fe_user.email}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Menu Items -->
                                        <div class="py-2">
                                            <f:if
                                                condition="{settings.felogin.profilePageId}"
                                            >
                                                <a
                                                    href="{f:uri.page(pageUid: settings.felogin.profilePageId)}"
                                                    class="flex items-center gap-3 px-5 py-2.5 text-sm font-roboto text-color-soft-black hover:bg-color-light-gray t-all"
                                                >
                                                    <i
                                                        class="fa-solid fa-user text-color-dark-gray w-4 text-center text-xs"
                                                    ></i>
                                                    <span>Profil</span>
                                                </a>
                                            </f:if>
                                            <f:if
                                                condition="{settings.felogin.ordersPageId}"
                                            >
                                                <a
                                                    href="{f:uri.page(pageUid: settings.felogin.ordersPageId)}"
                                                    class="flex items-center gap-3 px-5 py-2.5 text-sm font-roboto text-color-soft-black hover:bg-color-light-gray t-all"
                                                >
                                                    <i
                                                        class="fa-solid fa-shopping-bag text-color-dark-gray w-4 text-center text-xs"
                                                    ></i>
                                                    <span>Siparişlerim</span>
                                                </a>
                                            </f:if>
                                            <f:if
                                                condition="{settings.felogin.wishlistPageId}"
                                            >
                                                <a
                                                    href="{f:uri.page(pageUid: settings.felogin.wishlistPageId)}"
                                                    class="flex items-center gap-3 px-5 py-2.5 text-sm font-roboto text-color-soft-black hover:bg-color-light-gray t-all"
                                                >
                                                    <i
                                                        class="fa-solid fa-heart text-color-dark-gray w-4 text-center text-xs"
                                                    ></i>
                                                    <span>İstek Listesi</span>
                                                </a>
                                            </f:if>
                                            <f:if
                                                condition="{settings.felogin.settingsPageId}"
                                            >
                                                <a
                                                    href="{f:uri.page(pageUid: settings.felogin.settingsPageId)}"
                                                    class="flex items-center gap-3 px-5 py-2.5 text-sm font-roboto text-color-soft-black hover:bg-color-light-gray t-all"
                                                >
                                                    <i
                                                        class="fa-solid fa-gear text-color-dark-gray w-4 text-center text-xs"
                                                    ></i>
                                                    <span>Ayarlar</span>
                                                </a>
                                            </f:if>
                                        </div>

                                        <!-- Logout -->
                                        <div
                                            class="px-3 py-2 border-t border-color-brown"
                                        >
                                            <form
                                                method="post"
                                                action="{f:uri.page(pageUid: settings.felogin.loginPageId)}"
                                            >
                                                <input
                                                    type="hidden"
                                                    name="logintype"
                                                    value="logout"
                                                />
                                                <button
                                                    type="submit"
                                                    class="w-full flex items-center gap-3 px-2 py-2.5 text-sm font-roboto text-color-brown hover:text-color-soft-black t-all cursor-pointer"
                                                >
                                                    <i
                                                        class="fa-solid fa-sign-out-alt w-4 text-center text-xs"
                                                    ></i>
                                                    <span
                                                        class="font-roboto-slab font-medium tracking-[0.5px]"
                                                        >Çıkış Yap</span
                                                    >
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </f:then>

                            <!-- ========== NOT LOGGED IN ========== -->
                            <f:else>
                                <f:if
                                    condition="{settings.felogin.loginPageId}"
                                >
                                    <a
                                        href="{f:uri.page(pageUid: settings.felogin.loginPageId)}"
                                        title="Giriş Yap"
                                    >
                                        <span
                                            ><i
                                                class="fa-solid fa-sign-in-alt"
                                            ></i
                                        ></span>
                                    </a>
                                </f:if>
                                <f:if
                                    condition="{settings.felogin.registerPageId}"
                                >
                                    <a
                                        href="{f:uri.page(pageUid: settings.felogin.registerPageId)}"
                                        title="Kayıt Ol"
                                    >
                                        <span
                                            ><i
                                                class="fa-solid fa-user-plus"
                                            ></i
                                        ></span>
                                    </a>
                                </f:if>
                            </f:else>
                        </f:if>
                    </testproject:frontendUser>
                </div>
            </div>
        </div>
    </header>
</html>
