<div class="page-header">
    <div class="header-wrapper row m-0">
        <div class="header-logo-wrapper col-auto p-0">
            <div class="logo-wrapper">
                <a href="{{ route('dashboard.overview') }}">
                    <img class="img-fluid for-light" src="{{ asset('assets/images/logo/logo.png') }}" alt="image">
                    <img class="img-fluid for-dark" src="{{ asset('assets/images/logo/logo-dark.png') }}"
                        alt="image"></a>
            </div>
            <div class="toggle-sidebar">
                <i class="status_toggle middle sidebar-toggle" data-feather="align-center"></i>
            </div>
        </div>
        <div class="nav-right col-xxl-7 col-xl-6 col-md-7 col-8 pull-right right-header p-0 ms-auto">
            <ul class="nav-menus">
                <li class="onhover-dropdown">
                    <div class="mode">
                        <i data-feather="home"></i>
                    </div>
                    <div class="onhover-show-div bookmark-flip">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="front">
                                    <h6 class="f-18 mb-0 dropdown-title">Barbershop</h6>
                                    <ul class="bookmark-dropdown">
                                        <li>
                                            <div class="row">
                                                @foreach (barbershop() as $barbershop)
                                                    <div class="col-6 text-center">
                                                        <a
                                                            href="{{ route('dashboard.changeBarbershop', encryptId($barbershop->id)) }}">
                                                            <div class="bookmark-content">
                                                                <div class="bookmark-icon">
                                                                    <i data-feather="home"></i>
                                                                </div>
                                                                <span>{{ $barbershop->name }}</span>
                                                            </div>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="back">
                                    <ul>
                                        <li><a class="f-w-700 d-block flip-back btn btn-primary w-100" id="flip-back"
                                                href="#!">Back</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="mode">
                        <i data-feather="moon"></i>
                    </div>
                </li>
                <li>
                    <a href="{{ route('homepage') }}">
                        <i data-feather="monitor"></i>
                    </a>
                </li>
                <li class="profile-nav onhover-dropdown pe-0 py-0">
                    <div class="media profile-media">
                        <img src="{{ Storage::url('users/' . Auth::user()->attachments()->first()->formatted_attachment) }}"
                            alt="image">
                        <div class="media-body">
                            <span>{{ Auth::user()->biography->full_name }}</span>
                            <p class="mb-0">{{ Auth::user()->role->name }} <i class="middle fa fa-angle-down"></i>
                            </p>
                        </div>
                    </div>
                    <ul class="profile-dropdown onhover-show-div">
                        <li>
                            <a href="{{ route('setting.account') }}">
                                <i data-feather="user"></i>
                                <span>Profil </span></a>
                        </li>
                        <li>
                            <a href="#"
                                onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                <i data-feather="log-out"></i>
                                <span>Keluar </span>
                            </a>
                            <form id="logout-form" action="{{ route('auth.logout') }}" method="post"
                                style="display: none;">
                                @csrf
                            </form>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <script class="result-template" type="text/x-handlebars-template">
            <div class="ProfileCard u-cf">
                <div class="ProfileCard-avatar">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay m-0"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon>
                    </svg>
                </div>
                <div class="ProfileCard-details">
                </div>
            </div>
        </script>
    </div>
</div>
