<div class="message-body">
    <a href="javascript:void(0)" class="d-flex align-items-center gap-2 py-3 px-4 dropdown-item">
        <div class="position-relative">
            <img src="@@webRoot/assets/images/flag/icon-flag-en.svg" alt="matdash-img" width="20px" height="20px"
                class="rounded-circle object-fit-cover round-20" />
        </div>
        <p class="mb-0 fs-3">English (UK)</p>
    </a>
    <a href="javascript:void(0)" class="d-flex align-items-center gap-2 py-3 px-4 dropdown-item">
        <div class="position-relative">
            <img src="@@webRoot/assets/images/flag/icon-flag-cn.svg" alt="matdash-img" width="20px" height="20px"
                class="rounded-circle object-fit-cover round-20" />
        </div>
        <p class="mb-0 fs-3">中国人 (Chinese)</p>
    </a>
    <a href="javascript:void(0)" class="d-flex align-items-center gap-2 py-3 px-4 dropdown-item">
        <div class="position-relative">
            <img src="@@webRoot/assets/images/flag/icon-flag-fr.svg" alt="matdash-img" width="20px" height="20px"
                class="rounded-circle object-fit-cover round-20" />
        </div>
        <p class="mb-0 fs-3">français (French)</p>
    </a>
    <a href="javascript:void(0)" class="d-flex align-items-center gap-2 py-3 px-4 dropdown-item">
        <div class="position-relative">
            <img src="@@webRoot/assets/images/flag/icon-flag-sa.svg" alt="matdash-img" width="20px" height="20px"
                class="rounded-circle object-fit-cover round-20" />
        </div>
        <p class="mb-0 fs-3">عربي (Arabic)</p>
    </a>
</div>