<li class="nav-item dropdown d-none d-md-inline-flex">
    <a class="dropdown-toggle gray-6" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="{$lang.header.messages}">
        <span class="bullet-dot bg-primary animation-blink"></span>
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
            <path fill="currentColor" d="M3 20.077V4.615q0-.69.463-1.152Q3.925 3 4.615 3h14.77q.69 0 1.152.463q.463.462.463 1.152v10.77q0 .69-.462 1.153q-.463.462-1.153.462H6.077zM5.65 16h13.735q.23 0 .423-.192q.192-.193.192-.423V4.615q0-.23-.192-.423Q19.615 4 19.385 4H4.615q-.23 0-.423.192Q4 4.385 4 4.615v13.03zM4 16V4z"/>
        </svg>
    </a>
    <div class="dropdown-menu shadow rounded-2 notification" id="NotificationsDiv">
        <div class="card border-0">
            <div class="card-header d-flex justify-content-between align-items-center py-2">
                <h4 class="mb-0 title-font">{$lang.header.messages}</h4>
                <a href="#" class="btn btn-link" title="view all">{$lang.header.all}</a>
            </div>
            <ul class="card-body p-0 list-unstyled mb-0 custom_scroll ps-2" style="height: 400px;">
                <li class="pe-2">
                    <a class="d-flex p-lg-3 p-2 rounded-3" href="javascript:void(0);">
                        <div class="avatar sm">
                            <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"></path>
                            </svg>
                        </div>
                        <div class="flex-fill ms-3">
                            <span class="d-flex justify-content-between"><small class="text-primary">Holiday Sale</small><small class="text-muted">11:30 AM Today</small></span>
                            <p class="mb-0 mt-1">Your New Campaign sale live on themeforest and our store is approved.</p>
                        </div>
                    </a>
                </li>
                <li class="pe-2">
                    <a class="d-flex p-lg-3 p-2 rounded-3" href="javascript:void(0);">
                        <div class="avatar sm">
                            <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M8 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h5.697"></path>
                                <path d="M18 14v4h4"></path>
                                <path d="M18 11v-4a2 2 0 0 0 -2 -2h-2"></path>
                                <path d="M8 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
                                <path d="M18 18m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
                                <path d="M8 11h4"></path>
                                <path d="M8 15h3"></path>
                            </svg>
                        </div>
                        <div class="flex-fill ms-3">
                            <span class="d-flex justify-content-between"><small class="text-info">Reports</small><small class="text-muted">04:00 PM Today</small></span>
                            <p class="mb-0 mt-1">Website visits from Twitter is 27% higher than last week.</p>
                        </div>
                    </a>
                </li>
                <li class="pe-2">
                    <a class="d-flex p-lg-3 p-2 rounded-3 align-items-start" href="javascript:void(0);">
                        <div class="avatar sm">
                            <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                                <path d="M12 8v4"></path>
                                <path d="M12 16h.01"></path>
                            </svg>
                        </div>
                        <div class="flex-fill ms-3">
                            <span class="d-flex justify-content-between"><small class="text-warning">HTML Code</small><small class="text-muted">1day</small></span>
                            <p class="mb-0 mt-1">Update new code in github and share deteail</p>
                        </div>
                    </a>
                </li>
                <li class="pe-2">
                    <a class="d-flex p-lg-3 p-2 rounded-3" href="javascript:void(0);">
                        <div class="avatar sm">
                            <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                                <path d="M12 8v4"></path>
                                <path d="M12 16h.01"></path>
                            </svg>
                        </div>
                        <div class="flex-fill ms-3">
                            <span class="d-flex justify-content-between"><small class="text-danger">Error 404</small><small class="text-muted">Yesterday</small></span>
                            <p class="mb-0 mt-1">SE admin template on website analytics configurations</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</li>