{{-- Header --}}
<div class="d-flex align-items-center justify-content-between flex-wrap p-5 bgi-size-cover bgi-no-repeat rounded-top"
    style="background-image: url('{{ asset('media/images/layout/ez-bg.png') }}')">
    <div class="d-flex align-items-center" style="gap: 0.6rem;">
        {{-- Symbol --}}
        <div class="symbol">
            <span class="symbol-label text-white font-weight-bold font-size-h4 bg-primary">
                {{ $user_first_letter }}
            </span>
        </div>

        {{-- Text --}}
        <div class="text-white m-0 flex-grow-1 d-inline-block text-truncate" style="width: 160px;">
            {{ $user_name }}
        </div>
    </div>
    <span class="label label-primary label-lg font-weight-bold label-inline">
        Admin
    </span>
</div>

{{-- Nav --}}
<div class="navi navi-spacer-x-0">
    <div class="navi-footer justify-content-end p-5">
       @include('layout.partials.logoutButton.logoutButton')
    </div>
</div>