<div class="profile-dropdown position-relative" data-simplebar>
    <div class="py-3 px-7 pb-0">
        <h5 class="mb-0 fs-5 fw-semibold">User Profile</h5>
    </div>
    <div class="d-flex align-items-center py-9 mx-7 border-bottom">
        <img src="{{ asset('assets/images/profile/user-1.jpg') }}" class="rounded-circle" width="80" height="80"
            alt="" />
        <div class="ms-3">
            <h5 class="mb-1 fs-3">{{ auth()->user()->name }}</h5>
            <span class="mb-1 d-block">{{ auth()->user()->getRoleNames()[0] }}</span>
            <p class="mb-0 d-flex align-items-center gap-2">
                <i class="ti ti-mail fs-4"></i> {{ auth()->user()->email }}
            </p>
        </div>
    </div>
    {{-- <div class="message-body">
        <a href="./page-user-profile.html" class="py-8 px-7 mt-8 d-flex align-items-center">
            <span class="d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6">
                <img src="@@webRoot/assets/images/svgs/icon-account.svg" alt="" width="24"
                    height="24" />
            </span>
            <div class="w-75 d-inline-block v-middle ps-3">
                <h6 class="mb-1 fs-3 fw-semibold lh-base">My Profile</h6>
                <span class="fs-2 d-block text-body-secondary">Account Settings</span>
            </div>
        </a>
        <a href="./app-email.html" class="py-8 px-7 d-flex align-items-center">
            <span class="d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6">
                <img src="@@webRoot/assets/images/svgs/icon-inbox.svg" alt="" width="24"
                    height="24" />
            </span>
            <div class="w-75 d-inline-block v-middle ps-3">
                <h6 class="mb-1 fs-3 fw-semibold lh-base">My Inbox</h6>
                <span class="fs-2 d-block text-body-secondary">Messages & Emails</span>
            </div>
        </a>
        <a href="./app-notes.html" class="py-8 px-7 d-flex align-items-center">
            <span class="d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6">
                <img src="@@webRoot/assets/images/svgs/icon-tasks.svg" alt="" width="24"
                    height="24" />
            </span>
            <div class="w-75 d-inline-block v-middle ps-3">
                <h6 class="mb-1 fs-3 fw-semibold lh-base">My Task</h6>
                <span class="fs-2 d-block text-body-secondary">To-do and Daily Tasks</span>
            </div>
        </a>
    </div> --}}
    <div class="d-grid py-4 px-7 pt-8">
        {{-- <div class="upgrade-plan bg-primary-subtle position-relative overflow-hidden rounded-4 p-4 mb-9">
            <div class="row">
                <div class="col-6">
                    <h5 class="fs-4 mb-3 w-50 fw-semibold">Unlimited Access</h5>
                    <button class="btn btn-primary">Upgrade</button>
                </div>
                <div class="col-6">
                    <div class="m-n4 unlimited-img">
                        <img src="@@webRoot/assets/images/backgrounds/unlimited-bg.png" alt=""
                            class="w-100" />
                    </div>
                </div>
            </div>
        </div> --}}
        <a href="{{ route('auth.logout') }}" class="btn btn-outline-primary">Log Out</a>
    </div>
</div>
