<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>