<script setup>
const { t } = useI18n()
</script>

<template>
  <div>
    <div class="hero justify-start">
      <div class="hero-content flex-col items-end pb-0">
        <div class=" flex">
          <!-- <router-link to="/" class="text-3xl">
            <div i-carbon-arrow-left class="mr-2 hover:bg-primary" />
          </router-link> -->
          <div>
            <ul class="steps">
              <li class="step step-primary">
                {{ t('Personalization.Collect') }}
              </li>
              <li class="step step-primary">
                {{ t('Personalization.Annotations') }}
              </li>
              <li class="step">
                {{ t('Personalization.Train') }}
              </li>
            </ul>
          </div>
        </div>
        <!-- <div class="text-gray-500">
          修改后重启生效
        </div> -->
      </div>
    </div>

    <div class="flex justify-center flex-col items-center">
      <div text-3xl class="label-title">
        图像标注
      </div>
      <div flex items-center mt-2>
        <div class="label-left mr-4">
          <div>
            <ul class="menu bg-base-100 p-1 py-2 rounded-box border">
              <li class="menu-title">
                <span>标注类别-眼睛</span>
              </li>
              <li>
                <a class="active"><div i-mingcute-eye-line />眼睛开</a>
              </li>
              <li><a><div i-mingcute-eye-close-fill />眼睛闭</a></li>
              <li class="menu-title">
                <span>标注类别-嘴巴</span>
              </li>
              <li><a><div i-icon-park-outline-surprised-face-with-open-big-mouth />嘴巴开</a></li>
              <li><a><div i-icon-park-outline-face-without-mouth />嘴巴闭</a></li>
            </ul>
          </div>
          <div />
          <div class="stats stats-vertical border mt-4">
            <div class="stat">
              <div class="stat-title flex items-center">
                <div i-ri-quill-pen-fill />已标记
              </div>
              <div class="stat-value">
                200
              </div>
            </div>

            <div class="stat">
              <div class="stat-title flex items-center">
                <div i-ep-warn-triangle-filled />未标记
              </div>
              <div class="stat-value">
                18
              </div>
            </div>
          </div>
        </div>
        <div class="label-center flex ">
          <img class="max-w-full h-100 rounded-lg bg-contain bg-clip-border" src="/Snipaste_2022-12-01_22-59-42.png" alt="image description">
        </div>
        <div class="label-right ml-4 flex flex-col space-y-6">
          <div class="tooltip tooltip-right tooltip-primary" data-tip="上一张">
            <button class="btn btn-square btn-primary ">
              <div i-material-symbols-keyboard-double-arrow-up-rounded text-2xl />
            </button>
          </div>
          <div class="tooltip tooltip-right tooltip-primary" data-tip="清除">
            <button class="btn btn-square btn-primary ">
              <div i-carbon-clean text-2xl />
            </button>
          </div>
          <div class="tooltip tooltip-right tooltip-primary" data-tip="保存">
            <button class="btn btn-square btn-primary ">
              <div i-material-symbols-save-as-rounded text-2xl />
            </button>
          </div>
          <div class="tooltip tooltip-right tooltip-primary" data-tip="下一张">
            <button class="btn btn-square btn-primary ">
              <div i-material-symbols-keyboard-double-arrow-down-rounded text-2xl />
            </button>
          </div>
          <!-- <div class="label-imgs h-96 carousel carousel-vertical rounded-md">
            <div class="carousel-item h-2/5 indicator hover:cursor-pointer">
              <span class="indicator-item badge badge-primary indicator-start indicator-bottom "><div i-carbon:checkmark-filled />已标注</span>
              <img src="/Snipaste_2022-12-01_22-59-42.png">
            </div>
            <div class="carousel-item h-2/5 mt-1">
              <img src="/Snipaste_2022-12-01_22-59-42.png">
            </div>
            <div class="carousel-item h-2/5 mt-1">
              <img src="/Snipaste_2022-12-01_22-59-42.png">
            </div>
            <div class="carousel-item h-2/5 mt-1">
              <img src="/Snipaste_2022-12-01_22-59-42.png">
            </div>
          </div> -->
        </div>
      </div>
    </div>

    <div class="w-full flex justify-around mt-4">
      <div class="flex-col items-end">
        <div class=" flex">
          <router-link to="/Personalization">
            <button class="btn btn-primary ">
              <div i-carbon-arrow-left />采集
            </button>
          </router-link>
        </div>
      </div>
      <div class="flex-col items-end">
        <div class="btn-group">
          <button class="btn hover:btn-primary">
            <router-link to="/Personalization/train" class="flex items-center">
              <div i-mingcute-cloud-line />云端训练
            </router-link>
          </button>
          <button class="btn hover:btn-primary">
            <router-link to="/Personalization/train" class="flex items-center">
              <div i-mingcute-computer-line />本地训练
            </router-link>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style  scoped>
.indicator {
  position: relative;
  display: inline-flex;
  width: max-content;
}
.indicator :where(.indicator-item) {
  z-index: 1;
  position: absolute;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.indicator :where(.indicator-item) {
  right: 0px;
  left: auto;
  top: 0px;
  bottom: auto;
  --tw-translate-x: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.indicator :where(.indicator-item.indicator-start) {
  right: auto;
  left: 0px;
  --tw-translate-x: 0%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.indicator :where(.indicator-item.indicator-center) {
  right: 50%;
  left: 50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.indicator :where(.indicator-item.indicator-end) {
  right: 0px;
  left: auto;
  --tw-translate-x: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.indicator :where(.indicator-item.indicator-bottom) {
  top: auto;
  bottom: 0px;
  --tw-translate-y: -15%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.indicator :where(.indicator-item.indicator-middle) {
  top: 50%;
  bottom: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.indicator :where(.indicator-item.indicator-top) {
  top: 0px;
  bottom: auto;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.stat {
    display: inline-grid;
    width: 100%;
    grid-template-columns: repeat(1, 1fr);
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    border-color: hsl(var(--bc) / var(--tw-border-opacity));
    --tw-border-opacity: 0.1;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
</style>
