<template>
    <div class="ms-2">
        <ul class="row gx-1 mb-0 list-inline d-flex align-items-center">
            <li class="col-4 me-0" v-for="(member, index) in members" :key="index">
                <div class="ratio ratio-1x1 mb-0 profile-list">
                    <img
                        :src="`${baseUrl}upload/img/profile/${member.MEMBERPRF}`"
                        :style="`border-color: ${member.usercolor} !important;`"
                        alt="User Profile"
                        class="rounded-circle border border-2"
                        @error="$event.target.src = '/img/icons/icon.png'"
                    />
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            members: {
                type: Array,
                required: true,
            },
            baseUrl: {
                type: String,
                required: true,
            },
        },
    };
</script>
