@php
    $sidebar_user = Auth::user();
@endphp

<div id="kt_aside" class="aside aside-dark aside-hoverable gap-6" data-kt-drawer="true" data-kt-drawer-name="aside" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'200px', '300px': '250px'}" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_aside_mobile_toggle" style="background-image: var(--bs-gradient-color-aside); height: 100vh;">

    <!-- Logo -->
    <div class="aside-logo d-flex justify-content-center mt-12 mt-md-12" id="kt_aside_logo">
        <a href="#">
            <img alt="Logo" src="{{ asset('/media/logo-gymnastics-white.png') }}" class="img-fluid" />
        </a>
    </div>

    <!-- User Info -->
    <div class="px-3 mt-8">
        <div style="background: rgba(255, 255, 255, .2)" class="rounded-4">
            <div class="menu-content d-flex align-items-center p-5">
                <div class="symbol symbol-50px me-5">
                    <span class="symbol-label bg-light-primary text-primary fw-bold rounded-4">
                        @if ($sidebar_user)
                            {{ substr($sidebar_user->name, 0, 1) }}
                        @else
                            V
                        @endif
                    </span>
                </div>
                <div class="row">
                    <div class="col-12 fw-bold d-flex align-items-center fs-5">
                        @if ($sidebar_user)
                            {{ $sidebar_user?->name }}
                        @else
                            VIP Guest
                        @endif
                    </div>
                    <a href="#" class="col-12 fw-semibold text-white fs-7">{{ $sidebar_user?->labelRole }}</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Scrollable Menu Wrapper -->
    <div class="aside-menu flex-column-fluid" id="kt_aside_menu_wrapper"
        data-kt-scroll="true"
        data-kt-scroll-activate="true"
        data-kt-scroll-height="200px"
        data-kt-scroll-dependencies="#kt_aside_logo"
        data-kt-scroll-wrappers="#kt_aside_menu_wrapper"
        data-kt-scroll-offset="20px"
        style="overflow-y: auto; padding: 0 12px;">

        <!-- Sidebar Menu Partial -->
        @if ($sidebar_user)
            @if ($sidebar_user->role == 'superadmin')
                @include('layout.partials.superadmin')
            @elseif ($sidebar_user->role == 'admin_loc' || $sidebar_user->role == 'admin_loc_accre')
                @include('layout.partials.admin_loc')
            @elseif ($sidebar_user->role == 'admin_nf')
                @include('layout.partials.admin_nf')
            @elseif ($sidebar_user->role == 'admin_agu')
                @include('layout.partials.admin_agu')
            @elseif ($sidebar_user->role == 'admin_media')
                @include('layout.partials.admin_media')
            @elseif ($sidebar_user->role == 'admin_observer')
                @include('layout.partials.admin_observer')
            @else
                @include('layout.partials.other_nf')
            @endif
        @endif
    </div>
</div>