<template>
    <li class="nav-item dropdown">
        <a class="nav-icon dropdown-toggle" href="#" @click="toggleDropdown">
            <div class="position-relative">
                <b-icon-chat-left class="bi-valign-middle"></b-icon-chat-left>
            </div>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" id="messagesDropdown">
            <div class="dropdown-menu-header">
                <div class="position-relative">
                    4 New Messages
                </div>
            </div>
            <div class="list-group">
                <a href="#" class="list-group-item">
                    <div class="row g-0 align-items-center">
                        <div class="col-3">
                            <img src="/assets/img/avatars/avatar-5.png"
                                 class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">
                        </div>
                        <div class="col-9 pl-2">
                            <div class="text-dark">Vanessa Tucker</div>
                            <div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu
                                tortor.
                            </div>
                            <div class="text-muted small mt-1">15m ago</div>
                        </div>
                    </div>
                </a>
                <a href="#" class="list-group-item">
                    <div class="row g-0 align-items-center">
                        <div class="col-3">
                            <img src="/assets/img/avatars/avatar-2.png"
                                 class="avatar img-fluid rounded-circle" alt="William Harris">
                        </div>
                        <div class="col-9 pl-2">
                            <div class="text-dark">William Harris</div>
                            <div class="text-muted small mt-1">Curabitur ligula sapien euismod
                                vitae.
                            </div>
                            <div class="text-muted small mt-1">2h ago</div>
                        </div>
                    </div>
                </a>
                <a href="#" class="list-group-item">
                    <div class="row g-0 align-items-center">
                        <div class="col-3">
                            <img src="/assets/img/avatars/avatar-4.png"
                                 class="avatar img-fluid rounded-circle" alt="Christina Mason">
                        </div>
                        <div class="col-9 pl-2">
                            <div class="text-dark">Christina Mason</div>
                            <div class="text-muted small mt-1">Pellentesque auctor neque nec urna.
                            </div>
                            <div class="text-muted small mt-1">4h ago</div>
                        </div>
                    </div>
                </a>
                <a href="#" class="list-group-item">
                    <div class="row g-0 align-items-center">
                        <div class="col-3">
                            <img src="/assets/img/avatars/avatar-3.png"
                                 class="avatar img-fluid rounded-circle" alt="Sharon Lessman">
                        </div>
                        <div class="col-9 pl-2">
                            <div class="text-dark">Sharon Lessman</div>
                            <div class="text-muted small mt-1">Aenean tellus metus, bibendum sed,
                                posuere ac,
                                mattis non.
                            </div>
                            <div class="text-muted small mt-1">5h ago</div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="dropdown-menu-footer">
                <a href="#" class="text-muted">Show all messages</a>
            </div>
        </div>
    </li>
</template>

<script>
import * as BIcons from "bootstrap-icons-vue";

export default {
    name: "Messages",
    components: {
        ...BIcons
    },
    props: {
        messages: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        top_messages() {
            return this.messages.slice(0, 4);
        }
    },
    methods: {
        toggleDropdown() {
            closeAllDropdowns();
            document.getElementById("messagesDropdown").classList.toggle("show");
        }
    }
}
</script>

<style scoped>


.nav-flag::after, .nav-icon::after {
    display: none !important;
}

.nav-flag .feather, .nav-flag svg, .nav-icon .feather, .nav-icon svg {
    width: 20px;
    height: 20px;
}

.nav-flag, .nav-icon {
  padding: .1rem .8rem;
  display: block;
  font-size: 1.5rem;
  color: #6c757d;
  transition: background .1s ease-in-out,color .1s ease-in-out;
  line-height: 1.4;
}
</style>