<?php
$userAgent = $_SERVER['HTTP_USER_AGENT']; // Tarayıcı bilgisini al
$browserName = strtok($userAgent, '/'); // "/" karakterinden önceki kısmı al

if ($browserName === "SSMobil") {
?>
<style media="screen">
  .ssmobil-none{
    display: none !important;
  }
  .ssmobil-mb-50{
    margin-bottom: 50px !important;
  }

  .ssmobil-dash{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
</style>
<?php
}else {
  $style = "";
}
 ?>
<!DOCTYPE html>
<html lang="tr" dir="ltr" class="fi min-h-screen">
    <head>
        <meta charset="utf-8" />
        <meta name="csrf-token" content="MoRgCsS88i8UUxarcBc32Cy6D2InNztyLbCEw24c" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="icon" href="https://serversistemleri.com/design/images/icons/favicons/apple-icon-180x180.png" />
        <link rel="apple-touch-icon" sizes="57x57" href="https://serversistemleri.com/design/images/icons/favicons/apple-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="60x60" href="https://serversistemleri.com/design/images/icons/favicons/apple-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="72x72" href="https://serversistemleri.com/design/images/icons/favicons/apple-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="76x76" href="https://serversistemleri.com/design/images/icons/favicons/apple-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114" href="https://serversistemleri.com/design/images/icons/favicons/apple-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120" href="https://serversistemleri.com/design/images/icons/favicons/apple-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144" href="https://serversistemleri.com/design/images/icons/favicons/apple-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="152x152" href="https://serversistemleri.com/design/images/icons/favicons/apple-icon-152x152.png">
        <link rel="apple-touch-icon" sizes="180x180" href="https://serversistemleri.com/design/images/icons/favicons/apple-icon-180x180.png">
        <link rel="icon" type="image/png" sizes="192x192" href="https://serversistemleri.com/design/images/icons/favicons/android-icon-192x192.png">
        <link rel="icon" type="image/png" sizes="32x32" href="https://serversistemleri.com/design/images/icons/favicons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="96x96" href="https://serversistemleri.com/design/images/icons/favicons/favicon-96x96.png">
        <link rel="icon" type="image/png" sizes="16x16" href="https://serversistemleri.com/design/images/icons/favicons/favicon-16x16.png">
        <script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
        <title>
            {{ $pageTitle }} - Server Sistemleri
        </title>

        <style>
            [x-cloak=""],
            [x-cloak="x-cloak"],
            [x-cloak="1"] {
                display: none !important;
            }

            @media (max-width: 1023px) {
                [x-cloak="-lg"] {
                    display: none !important;
                }
            }

            @media (min-width: 1024px) {
                [x-cloak="lg"] {
                    display: none !important;
                }
            }
        </style>

        <link href="https://sspanel.serversistemleri.com/css/filament/forms/forms.css?v=3.2.92.0" rel="stylesheet" data-navigate-track />
        <link href="https://sspanel.serversistemleri.com/css/filament/support/support.css?v=3.2.92.0" rel="stylesheet" data-navigate-track />
        <link href="https://sspanel.serversistemleri.com/css/dark-light.css" rel="stylesheet" data-navigate-track />
        <style>
            :root {
                --danger-50: 254, 242, 242;
                --danger-100: 254, 226, 226;
                --danger-200: 254, 202, 202;
                --danger-300: 252, 165, 165;
                --danger-400: 248, 113, 113;
                --danger-500: 239, 68, 68;
                --danger-600: 220, 38, 38;
                --danger-700: 185, 28, 28;
                --danger-800: 153, 27, 27;
                --danger-900: 127, 29, 29;
                --danger-950: 69, 10, 10;
                --gray-50: 250, 250, 250;
                --gray-100: 244, 244, 245;
                --gray-200: 228, 228, 231;
                --gray-300: 212, 212, 216;
                --gray-400: 161, 161, 170;
                --gray-500: 113, 113, 122;
                --gray-600: 82, 82, 91;
                --gray-700: 63, 63, 70;
                --gray-800: 39, 39, 42;
                --gray-900: 24, 24, 27;
                --gray-950: 9, 9, 11;
                --info-50: 239, 246, 255;
                --info-100: 219, 234, 254;
                --info-200: 191, 219, 254;
                --info-300: 147, 197, 253;
                --info-400: 96, 165, 250;
                --info-500: 59, 130, 246;
                --info-600: 37, 99, 235;
                --info-700: 29, 78, 216;
                --info-800: 30, 64, 175;
                --info-900: 30, 58, 138;
                --info-950: 23, 37, 84;
                --primary-50: 244, 250, 252;
                --primary-100: 232, 244, 249;
                --primary-200: 198, 228, 241;
                --primary-300: 164, 211, 232;
                --primary-400: 96, 179, 215;
                --primary-500: 28, 146, 198;
                --primary-600: 25, 131, 178;
                --primary-700: 21, 110, 149;
                --primary-800: 17, 88, 119;
                --primary-900: 14, 72, 97;
                --primary-950: 8, 44, 59;
                --success-50: 240, 253, 244;
                --success-100: 220, 252, 231;
                --success-200: 187, 247, 208;
                --success-300: 134, 239, 172;
                --success-400: 74, 222, 128;
                --success-500: 34, 197, 94;
                --success-600: 22, 163, 74;
                --success-700: 21, 128, 61;
                --success-800: 22, 101, 52;
                --success-900: 20, 83, 45;
                --success-950: 5, 46, 22;
                --warning-50: 255, 251, 235;
                --warning-100: 254, 243, 199;
                --warning-200: 253, 230, 138;
                --warning-300: 252, 211, 77;
                --warning-400: 251, 191, 36;
                --warning-500: 245, 158, 11;
                --warning-600: 217, 119, 6;
                --warning-700: 180, 83, 9;
                --warning-800: 146, 64, 14;
                --warning-900: 120, 53, 15;
                --warning-950: 69, 26, 3;
            }
        </style>

        <link href="https://sspanel.serversistemleri.com/css/filament/filament/app.css?v=3.2.92.0" rel="stylesheet" data-navigate-track />

        <link rel="preconnect" href="https://fonts.bunny.net" />
        <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap" rel="stylesheet" />

        <style>
            :root {
                --font-family: "Inter";
                --sidebar-width: 20rem;
                --collapsed-sidebar-width: 4.5rem;
                --default-theme-mode: light;
            }
        </style>

        <style>
            [wire\:loading][wire\:loading],
            [wire\:loading\.delay][wire\:loading\.delay],
            [wire\:loading\.inline-block][wire\:loading\.inline-block],
            [wire\:loading\.inline][wire\:loading\.inline],
            [wire\:loading\.block][wire\:loading\.block],
            [wire\:loading\.flex][wire\:loading\.flex],
            [wire\:loading\.table][wire\:loading\.table],
            [wire\:loading\.grid][wire\:loading\.grid],
            [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {
                display: none;
            }
            [wire\:loading\.delay\.none][wire\:loading\.delay\.none],
            [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest],
            [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter],
            [wire\:loading\.delay\.short][wire\:loading\.delay\.short],
            [wire\:loading\.delay\.default][wire\:loading\.delay\.default],
            [wire\:loading\.delay\.long][wire\:loading\.delay\.long],
            [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer],
            [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {
                display: none;
            }
            [wire\:offline][wire\:offline] {
                display: none;
            }
            [wire\:dirty]:not(textarea):not(input):not(select) {
                display: none;
            }
            :root {
                --livewire-progress-bar-color: #2299dd;
            }
            [x-cloak] {
                display: none !important;
            }
        </style>
    </head>

    <body class="fi-body fi-panel-admin min-h-screen bg-gray-50 font-normal text-gray-950 antialiased dark:bg-gray-950 dark:text-white">

    <div class="fi-layout flex min-h-screen w-full flex-row-reverse overflow-x-clip">
        <div x-data="{}" x-bind:style="'display: flex; opacity:1;'" class="fi-main-ctn w-screen flex-1 flex-col opacity-0">
            <div class="fi-topbar sticky top-0 z-20 overflow-x-clip">

                <nav class="flex h-16 items-center gap-x-4 bg-white px-4 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 md:px-6 lg:px-8">
                  <?php
                  $userAgent = $_SERVER['HTTP_USER_AGENT']; // Tarayıcı bilgisini al
                  $browserName = strtok($userAgent, '/'); // "/" karakterinden önceki kısmı al

                  if ($browserName === "SSMobil") {
                    ?>
                    <a href="/dashboard">
                      <img style="width:155px;" alt="Server Sistemleri" src="https://sspanel.serversistemleri.com/img/logo_white.webp" class="l-none flex">
                      <img style="width:155px;" alt="Server Sistemleri" src="https://sspanel.serversistemleri.com/img/logo_dark.webp" class="d-none flex">
                    </a>
                    <?php
                  }else {
                    ?>
                    <button
                        style="--c-300: var(--gray-300); --c-400: var(--gray-400); --c-500: var(--gray-500); --c-600: var(--gray-600);"
                        class="fi-icon-btn relative flex items-center justify-center rounded-lg outline-none transition duration-75 focus-visible:ring-2 -m-1.5 h-9 w-9 text-gray-400 hover:text-gray-500 focus-visible:ring-primary-600 dark:text-gray-500 dark:hover:text-gray-400 dark:focus-visible:ring-primary-500 fi-color-gray fi-topbar-open-sidebar-btn lg:hidden"
                        title="Kenar çubuğunu genişlet"
                        type="button"
                        x-cloak="x-cloak"
                        x-data="{}"
                        x-on:click="$store.sidebar.open()"
                        x-show="! $store.sidebar.isOpen"
                    >
                        <span class="sr-only">
                            Kenar çubuğunu genişlet
                        </span>

                        <svg class="fi-icon-btn-icon h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                        </svg>
                    </button>
                    <button
                        style="--c-300: var(--gray-300); --c-400: var(--gray-400); --c-500: var(--gray-500); --c-600: var(--gray-600);"
                        class="fi-icon-btn relative flex items-center justify-center rounded-lg outline-none transition duration-75 focus-visible:ring-2 -m-1.5 h-9 w-9 text-gray-400 hover:text-gray-500 focus-visible:ring-primary-600 dark:text-gray-500 dark:hover:text-gray-400 dark:focus-visible:ring-primary-500 fi-color-gray fi-topbar-close-sidebar-btn lg:hidden"
                        title="Kenar çubuğunu daralt"
                        type="button"
                        x-cloak="x-cloak"
                        x-data="{}"
                        x-on:click="$store.sidebar.close()"
                        x-show="$store.sidebar.isOpen"
                    >
                        <span class="sr-only">
                            Kenar çubuğunu daralt
                        </span>

                        <svg class="fi-icon-btn-icon h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                        </svg>
                    </button>
                    <?php
                  }
                   ?>



                    <div x-persist="topbar.end" class="ms-auto flex items-center gap-x-4">
                        <div
                            wire:snapshot='{"data":{"search":""},"memo":{"id":"41NCbOWbFzyUlzxsFJM1","name":"filament.livewire.global-search","path":"clients","method":"GET","children":[],"scripts":[],"assets":[],"lazyLoaded":false,"lazyIsolated":true,"errors":[],"locale":"tr"},"checksum":"5f7279138f9b4f4e850d4ca6835d62c6bf5db14e5388c8b0be69708229399563"}'
                            wire:effects="[]"
                            wire:id="41NCbOWbFzyUlzxsFJM1"
                            x-intersect="$wire.__lazyLoad(&#039;eyJkYXRhIjp7ImZvck1vdW50IjpbW10seyJzIjoiYXJyIn1dfSwibWVtbyI6eyJpZCI6Ijc0TUVXUkxBQVBaemVhTzRocjVYIiwibmFtZSI6Il9fbW91bnRQYXJhbXNDb250YWluZXIifSwiY2hlY2tzdW0iOiIwYzE4YjRiNGUzYTc1Y2E0ODIwM2ZkMzI4NzViYTU1NzQzNDlmMThlY2Q1NmJkMTE3ZjI2Y2EzYWZkYzFjZDZlIn0=&#039;)"
                        ></div>

                        <div
                            wire:snapshot='{"data":{"paginators":[[],{"s":"arr"}]},"memo":{"id":"RqurRdG8LYzTammMwciu","name":"filament.livewire.database-notifications","path":"clients","method":"GET","children":[],"scripts":[],"assets":[],"lazyLoaded":false,"lazyIsolated":true,"errors":[],"locale":"tr"},"checksum":"9b8588cd6bef1db2d69f289de81679cb745ef1cf35b1abc3ce3c80321a1bee09"}'
                            wire:effects='{"listeners":["databaseNotificationsSent","notificationClosed","markedNotificationAsRead","markedNotificationAsUnread"]}'
                            wire:id="RqurRdG8LYzTammMwciu"
                            x-intersect="$wire.__lazyLoad(&#039;eyJkYXRhIjp7ImZvck1vdW50IjpbW10seyJzIjoiYXJyIn1dfSwibWVtbyI6eyJpZCI6IjdhOHJtVnBqeVNJWG03ejRhNzFsIiwibmFtZSI6Il9fbW91bnRQYXJhbXNDb250YWluZXIifSwiY2hlY2tzdW0iOiI3NzFmNjUxMzA3ZTBkNjYwZjg0Njg0MTk4NTljNzFjNzUxYTlhMWU0M2Q4NTA5OWRjOGJlYzQ5OThiY2MxMDIyIn0=&#039;)"
                        ></div>
                        <?php if ($browserName === "SSMobil"): ?>

                          <?php else: ?>
                            <div class="fi-dropdown fi-user-menu">
                                <div x-on:click="toggle" class="fi-dropdown-trigger flex cursor-pointer">
                                    <a target="_blank" style="--c-400:var(--primary-400);--c-500:var(--primary-500);--c-600:var(--primary-600);" class="ssmobil-none fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-custom fi-btn-color-primary fi-color-primary fi-size-md fi-btn-size-md gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-custom-500 focus-visible:ring-custom-500/50 dark:bg-custom-500 dark:hover:bg-custom-400 dark:focus-visible:ring-custom-400/50 fi-ac-action fi-ac-btn-action" href="https://serversistemleri.com">SİTEYE GİT</a>
                                </div>
                            </div>
                        <?php endif; ?>

                        <div x-data="{
                            toggle: function (event) {
                                $refs.panel.toggle(event)
                            },
                            open: function (event) {
                                $refs.panel.open(event)
                            },
                            close: function (event) {
                                $refs.panel.close(event)
                            },
                        }" class="fi-dropdown fi-user-menu">
                            <div x-on:click="toggle" class="fi-dropdown-trigger flex cursor-pointer">
                                <button aria-label="Kullanıcı menüsü" type="button" class="shrink-0">
                                    <img class="fi-avatar object-cover object-center fi-circular rounded-full h-8 w-8 fi-user-avatar"
                                         src="https://ui-avatars.com/api/?name=<?php echo substr($client_firstname, 0, 1); ?>+<?php echo substr($client_lastname, 0, 1); ?>&amp;color=FFFFFF&amp;background=09090b"
                                         alt="filament-panels::layout.avatar.alt" />
                                </button>
                            </div>

                            <div x-cloak
                                 x-float.placement.bottom-end.flip.teleport.offset="{ offset: 8 }"
                                 x-ref="panel"
                                 x-transition:enter-start="opacity-0"
                                 x-transition:leave-end="opacity-0"
                                 class="fi-dropdown-panel absolute z-10 w-screen divide-y divide-gray-100 rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition dark:divide-white/5 dark:bg-gray-900 dark:ring-white/10 !max-w-[14rem]"
                                 style="">
                                <div class="fi-dropdown-list p-1">
                                    <a href="https://sspanel.serversistemleri.com/profile" wire:navigate
                                       class="fi-dropdown-list-item flex w-full items-center gap-2 whitespace-nowrap rounded-md p-2 text-sm transition-colors duration-75 outline-none disabled:pointer-events-none disabled:opacity-70 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5 fi-dropdown-list-item-color-gray fi-color-gray">
                                        <svg class="fi-dropdown-list-item-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z" clip-rule="evenodd" />
                                        </svg>
                                        <span class="fi-dropdown-list-item-label flex-1 truncate text-start text-gray-700 dark:text-gray-200">Profil</span>
                                    </a>
                                </div>
                                <div class="fi-dropdown-list p-1">
                                    <a href="https://sspanel.serversistemleri.com/emails" wire:navigate
                                       class="fi-dropdown-list-item flex w-full items-center gap-2 whitespace-nowrap rounded-md p-2 text-sm transition-colors duration-75 outline-none disabled:pointer-events-none disabled:opacity-70 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5 fi-dropdown-list-item-color-gray fi-color-gray">
                                        <svg class="fi-dropdown-list-item-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor" aria-hidden="true">
                                            <path d="M320 128C214 128 128 214 128 320C128 426 214 512 320 512C337.7 512 352 526.3 352 544C352 561.7 337.7 576 320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320L576 352C576 405 533 448 480 448C450.7 448 424.4 434.8 406.8 414.1C384 435.1 353.5 448 320 448C249.3 448 192 390.7 192 320C192 249.3 249.3 192 320 192C347.9 192 373.7 200.9 394.7 216.1C400.4 211.1 407.8 208 416 208C433.7 208 448 222.3 448 240L448 352C448 369.7 462.3 384 480 384C497.7 384 512 369.7 512 352L512 320C512 214 426 128 320 128zM384 320C384 284.7 355.3 256 320 256C284.7 256 256 284.7 256 320C256 355.3 284.7 384 320 384C355.3 384 384 355.3 384 320z"/>
                                        </svg>
                                        <span class="fi-dropdown-list-item-label flex-1 truncate text-start text-gray-700 dark:text-gray-200">E-Postalarım</span>
                                    </a>
                                </div>
                                <div class="fi-dropdown-list p-1">
                                    <div x-data="{ theme: null }"
                                         x-init="
                                             $watch('theme', () => {
                                                 $dispatch('theme-changed', theme)
                                             });
                                             theme = localStorage.getItem('theme') || 'light';
                                         "
                                         class="fi-theme-switcher grid grid-flow-col gap-x-1">
                                        <button aria-label="Açık tema" type="button"
                                                x-on:click="(theme = 'light') && close()"
                                                class="fi-theme-switcher-btn flex justify-center rounded-md p-2 outline-none transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"
                                                x-bind:class="theme === 'light' ? 'fi-active bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400' : 'text-gray-400 hover:text-gray-500 focus-visible:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus-visible:text-gray-400'">
                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path d="M10 2a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 2ZM10 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 15ZM10 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM15.657 5.404a.75.75 0 1 0-1.06-1.06l-1.061 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM6.464 14.596a.75.75 0 1 0-1.06-1.06l-1.06 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM18 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 18 10ZM5 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 5 10ZM14.596 15.657a.75.75 0 0 0 1.06-1.06l-1.06-1.061a.75.75 0 1 0-1.06 1.06l1.06 1.06ZM5.404 6.464a.75.75 0 0 0 1.06-1.06l-1.06-1.06a.75.75 0 1 0-1.061 1.06l1.06 1.06Z"/>
                                            </svg>
                                        </button>

                                        <button aria-label="Koyu tema" type="button"
                                                x-on:click="(theme = 'dark') && close()"
                                                class="fi-theme-switcher-btn flex justify-center rounded-md p-2 outline-none transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"
                                                x-bind:class="theme === 'dark' ? 'fi-active bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400' : 'text-gray-400 hover:text-gray-500 focus-visible:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus-visible:text-gray-400'">
                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path fill-rule="evenodd" d="M7.455 2.004a.75.75 0 0 1 .26.77 7 7 0 0 0 9.958 7.967.75.75 0 0 1 1.067.853A8.5 8.5 0 1 1 6.647 1.921a.75.75 0 0 1 .808.083Z" clip-rule="evenodd"/>
                                            </svg>
                                        </button>

                                        <button aria-label="Sistem varsayılanı" type="button"
                                                x-on:click="(theme = 'system') && close()"
                                                class="fi-theme-switcher-btn flex justify-center rounded-md p-2 outline-none transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"
                                                x-bind:class="theme === 'system' ? 'fi-active bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400' : 'text-gray-400 hover:text-gray-500 focus-visible:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus-visible:text-gray-400'">
                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path fill-rule="evenodd" d="M2 4.25A2.25 2.25 0 0 1 4.25 2h11.5A2.25 2.25 0 0 1 18 4.25v8.5A2.25 2.25 0 0 1 15.75 15h-3.105a3.501 3.501 0 0 0 1.1 1.677A.75.75 0 0 1 13.26 18H6.74a.75.75 0 0 1-.484-1.323A3.501 3.501 0 0 0 7.355 15H4.25A2.25 2.25 0 0 1 2 12.75v-8.5Zm1.5 0a.75.75 0 0 1 .75-.75h11.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75H4.25a.75.75 0 0 1-.75-.75v-7.5Z" clip-rule="evenodd"/>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                                <div class="fi-dropdown-list p-1">
                                    <form action="{{ route('logout') }}" method="POST">
                                        @csrf
                                        <button type="submit" class="fi-dropdown-list-item flex w-full items-center gap-2 whitespace-nowrap rounded-md p-2 text-sm transition-colors duration-75 outline-none disabled:pointer-events-none disabled:opacity-70 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5 fi-dropdown-list-item-color-gray fi-color-gray">
                                            <svg class="fi-dropdown-list-item-icon h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z" clip-rule="evenodd"/>
                                                <path fill-rule="evenodd" d="M19 10a.75.75 0 0 0-.75-.75H8.704l1.048-.943a.75.75 0 1 0-1.004-1.114l-2.5 2.25a.75.75 0 0 0 0 1.114l2.5 2.25a.75.75 0 1 0 1.004-1.114l-1.048-.943h9.546A.75.75 0 0 0 19 10Z" clip-rule="evenodd"/>
                                            </svg>
                                            <span class="fi-dropdown-list-item-label flex-1 truncate text-start text-gray-700 dark:text-gray-200">Oturumu kapat</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>


                    </div>
                </nav>
            </div>
