<template>
  <!--begin::Mixed Widget 8-->
  <div :class="widgetClasses" class="card">
    <!--begin::Body-->
    <div class="card-body">
      <!--begin::Heading-->
      <div class="d-flex flex-stack">
        <!--begin:Info-->
        <div class="d-flex align-items-center">
          <!--begin:Image-->
          <div class="symbol symbol-60px me-5">
            <span :class="`bg-${color}-light`" class="symbol-label">
              <img :src="image" class="h-50 align-self-center" alt="" />
            </span>
          </div>
          <!--end:Image-->

          <!--begin:Title-->
          <div class="d-flex flex-column flex-grow-1 my-lg-0 my-2 pr-3">
            <a href="#" class="text-dark fw-bolder text-hover-primary fs-5">
              {{ title }}
            </a>

            <span class="text-muted fw-bold">
              {{ date }}
            </span>
          </div>
          <!--end:Title-->
        </div>
        <!--begin:Info-->

        <!--begin:Menu-->
        <div class="ms-1">
          <button
            type="button"
            class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
            data-kt-menu-trigger="click"
            data-kt-menu-placement="bottom-end"
            data-kt-menu-flip="top-end"
          >
            <span class="svg-icon svg-icon-2">
              <inline-svg src="media/icons/duotune/general/gen024.svg" />
            </span>
          </button>
          <Dropdown2></Dropdown2>
        </div>
        <!--end::Menu-->
      </div>
      <!--end::Heading-->

      <!--begin:Stats-->
      <div class="d-flex flex-column w-100 mt-12">
        <span class="text-dark me-2 fw-bolder pb-3"> Progress </span>

        <div class="progress h-5px w-100">
          <div
            :class="`bg-${color}`"
            class="progress-bar"
            role="progressbar"
            :style="`width: ${progress}%`"
            :aria-valuenow="progress"
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
        </div>
      </div>
      <!--end:Stats-->

      <!--begin:Team-->
      <div class="d-flex flex-column mt-10">
        <div class="text-dark me-2 fw-bolder pb-4">Team</div>

        <div class="d-flex">
          <a
            href="#"
            class="symbol symbol-35px me-2"
            data-bs-toggle="tooltip"
            title="Ana Stone"
          >
            <img src="media/avatars/300-6.jpg" alt="" />
          </a>

          <a
            href="#"
            class="symbol symbol-35px me-2"
            data-bs-toggle="tooltip"
            title="Mark Larson"
          >
            <img src="media/avatars/300-5.jpg" alt="" />
          </a>

          <a
            href="#"
            class="symbol symbol-35px me-2"
            data-bs-toggle="tooltip"
            title="Sam Harris"
          >
            <img src="media/avatars/300-9.jpg" alt="" />
          </a>

          <a
            href="#"
            class="symbol symbol-35px"
            data-bs-toggle="tooltip"
            title="Alice Micto"
          >
            <img src="media/avatars/300-10.jpg" alt="" />
          </a>
        </div>
      </div>
      <!--end:Team-->
    </div>
    <!--end::Body-->
  </div>
  <!--end::Mixed Widget 8-->
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Dropdown2 from "@/components/dropdown/Dropdown2.vue";

export default defineComponent({
  name: "widget-1",
  components: {
    Dropdown2,
  },
  props: {
    widgetClasses: String,
    color: String,
    image: String,
    title: String,
    date: String,
    progress: String,
  },
});
</script>