<template>
    <div>
        <a class="new nav-link" href="javascript:void(0);" data-bs-toggle="dropdown">
            <svg xmlns="http://www.w3.org/2000/svg" class="header-icon-svgs" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
                <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
            </svg>

            <span class="position-absolute start-90 translate-middle badge rounded-pill bg-primary">
                8
                <span class="visually-hidden">Thông báo</span>
            </span>
        </a>
        <div class="dropdown-menu">
            <div class="menu-header-content bg-default text-start" style="padding:0.6rem 0.8rem">
                <div class="d-flex">
                    <h6 class="dropdown-title mb-1 tx-20 fw-semibold">Thông báo</h6>
                    <a href="javascript:void(0);" class="ms-auto my-auto float-end text-dark tx-18"
                        title="Đánh dấu là đã đọc">
                        <i class="fa fa-book-reader"></i>
                    </a>
                </div>
                <p class="mg-b-0 mg-t-10 text-end">
                    <a href="https://laravelui.spruko.com/valex/mail" class="text-dark">Xem tất cả</a>
                </p>
            </div>
            <div class="main-notification-list">

                <a v-for="item in items" class="d-flex p-3 border-bottom noti-item text-dark" :href="item.link">
                    <div class="tx-20">
                        <!--<img src="/src/assets/images/6.jpg" class="logo vue" alt="Vue logo"
                             style="width: 42px;border-radius: 50%;height: 42px;">-->
                        <i class="fas fa-file-medical"></i>
                    </div>
                    <div class="ms-3">
                        <p class="px-13 mb-2 tx-14">
                            {{ item.text }}
                        </p>
                        <div class="notification-subtext tx-12">10 hour ago</div>
                    </div>
                </a>


            </div>

        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
const items = reactive([
    { id: 0, text: "Khách hàng abc đã tạo mới đơn hàng", link: "https://ladaexpress.vn" },
    { id: 0, text: "Khách hàng abc đã tạo mới đơn hàng", link: "https://ladaexpress.vn" },
    { id: 0, text: "Khách hàng abc đã tạo mới đơn hàng", link: "https://ladaexpress.vn" },
    { id: 0, text: "Khách hàng abc đã tạo mới đơn hàng", link: "https://ladaexpress.vn" },
    { id: 0, text: "Khách hàng abc đã tạo mới đơn hàng", link: "https://ladaexpress.vn" },
    { id: 0, text: "Khách hàng abc đã tạo mới đơn hàng đã tạo mới đơn hàng", link: "https://ladaexpress.vn" },
    { id: 0, text: "Khách hàng abc đã tạo mới đơn hàng", link: "https://ladaexpress.vn" },
    { id: 0, text: "Khách hàng abc đã tạo mới đơn hàng", link: "https://ladaexpress.vn" },
    { id: 0, text: "Khách hàng abc đã tạo mới đơn hàng", link: "https://ladaexpress.vn" },
    { id: 0, text: "Khách hàng abc đã tạo mới đơn hàng", link: "https://ladaexpress.vn" },
    { id: 0, text: "Khách hàng abc đã tạo mới đơn hàng", link: "https://ladaexpress.vn" },
    { id: 0, text: "Khách hàng abc đã tạo mới đơn hàng", link: "https://ladaexpress.vn" },
]);
</script>