<template>
 <div id="kt_sliders_widget_1_slider" class="card card-flush carousel carousel-custom carousel-stretch slide h-250px"
 data-bs-ride="carousel" data-bs-interval="1000">
 <div class="card-header d-flex align-items-center justify-content-between flex-wrap"
 >
 <span class="text-gray-400 fs-4 fw-bolder pe-2" />
 <ol class="p-0 m-0 carousel-indicators carousel-indicators-bullet carousel-indicators-active-primary">
 <li data-bs-target="#kt_sliders_widget_1_slider" :data-bs-slide-to="index - 1" class="ms-1 "
 :class="{ active: index - 1 == 0 }" aria-current="true" v-test-id=""item-dots"" v-for="index in messages.length"
 :key="index - 1" />

 </div>
 <div class="card-body carousel-inner pt-2">
 <div class="carousel-item " :class="{ "active show": index == 0 }" v-test-id=""items""
 v-for="(message, index) in messages" :key="index">
 <div class="m-0">
 <span class="fs-4 text-dark fw-bolder text-hover-primary text-dark lh-base cursor-pointer">
 {{ message.title }}
 </span>
 <div class="fw-bold fs-5 text-gray-600 text-dark mt-2 mb-5"
 v-html="removeHtml(message.content).slice(0, 150).trim() + "..."" />
 <span class="text-muted me-2 fs-7"
 v-html="$t("phrases.message-send-at-by", { sendAt: message.sentAt, sentBy: message.author })" />
 </div>
 </div>
 <div class="d-flex align-items-center justify-content-center min-h-95px" v-if="messages.length === 0"
 v-test-id=""no-data"">
 {{ $t("common.no-data") }}
 </div>
 </div>
 </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue"
import { Message } from "@support/core/types"

export default defineComponent({
 props: {
 messages: {
 type: Array as PropType<Array<Message>>,
 required: true
 },
 device: {
 type: String,
 required: true,
 default: "web:desktop"
 },
 storyMode: {
 type: Boolean as PropType<boolean>,
 required: false,
 default: false
 }
 },
 setup (props, { emit }) {
 ....
 }

})
</script>

<style>
.carousel.carousel-custom .carousel-indicators {
 align-items: center;
 position: static;
 z-index: auto;
 margin: 0;
 padding: 0;
 list-style: none;
}

.carousel.carousel-custom .carousel-indicators.carousel-indicators-bullet li.active {
 transition: all 0.3s ease;
 background-color: #33589E;
 height: 6px;
 width: 16px;
}

.carousel.carousel-custom .carousel-indicators.carousel-indicators-bullet li {
 transition: all 0.3s ease;
 background-color: #D9D9D9;
 border-radius: 6px;
 height: 6px;
 width: 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}

.carousel.carousel-custom .carousel-indicators li {
 transform: none;
 opacity: 1;
}

.carousel-indicators [data-bs-target] {
 box-sizing: content-box;
 flex: 0 1 auto;
 width: 30px;
 height: 3px;
 padding: 0;
 margin-right: 3px;
 margin-left: 3px;
 text-indent: -999px;
 cursor: pointer;
 background-color: #ffffff;
 background-clip: padding-box;
 border: 0 !important;
 border-top-color: currentcolor;
 border-top-style: none;
 border-top-width: 0px;
 border-bottom-color: currentcolor;
 border-bottom-style: none;
 border-bottom-width: 0px;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 opacity: 0.5;
 transition: opacity 0.6s ease;
}
</style>