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

<template>
  <div>
    <div class="hero justify-start">
      <div class="hero-content flex-col items-end">
        <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 step-primary">
                {{ 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 mt-4>
        <div flex items-center>
          <div ml-1 text-lg>
            进度：
          </div>
          <progress class="progress ml-3" />
        </div>
        <div flex flex-col items-start mt-1>
          <div class="ml-1 text-lg">
            输出日志：
          </div>
          <div class="mockup-code flex flex-col items-start mt-2">
            <pre data-prefix="$"><code>loading annotations into memory...</code></pre>
            <pre data-prefix=">" class="text-warning"><code>[11/30 10:54:19] INFO: Epoch: [110] [ 0/40] loss: 1.585057 </code></pre>
            <pre data-prefix=">" class="text-success"><code>[11/30 10:56:32] INFO: Epoch: [110] [ 1/40] loss: 1.580321</code></pre>
          </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/annotations">
            <button class="btn btn-primary ">
              <div i-carbon-arrow-left />标注
            </button>
          </router-link>
        </div>
      </div>
      <div class="flex-col items-end">
        <div class="">
          <button class="btn hover:btn-primary">
            <router-link to="/Personalization/deploy" class="flex items-center">
              <div i-material-symbols-cloud-download-outline />本地部署
            </router-link>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style  scoped>
.mockup-code {
  position: relative;
  overflow: hidden;
  overflow-x: auto;
  min-width: 30rem/* 288px */;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
  padding-top: 1.25rem/* 20px */;
  padding-bottom: 1.25rem/* 20px */;
  --tw-text-opacity: 1;
  color: hsl(var(--nc) / var(--tw-text-opacity));
  border-radius: var(--rounded-box, 1rem);
}
.mockup-code pre[data-prefix]:before {
  content: attr(data-prefix);
  content: attr(data-prefix);
  display: inline-block;
  text-align: right;
  width: 2rem/* 32px */;
  opacity: 0.5;
}
.mockup-code:before {
  content: "";
  margin-bottom: 1rem/* 16px */;
  display: block;
  height: 0.75rem/* 12px */;
  width: 0.75rem/* 12px */;
  border-radius: 9999px;
  opacity: 0.3;
  box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
}
.mockup-code pre {
  padding-right: 1.25rem/* 20px */;
}
.mockup-code pre:before {
  content: "";
  margin-right: 2ch;
}

.progress {
  position: relative;
  width: 24.5rem;
  appearance: none;
  overflow: hidden;
  height: 0.5rem/* 8px */;
  border-radius: var(--rounded-box, 1rem);
}
.progress::-moz-progress-bar {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
}
.progress:indeterminate::after {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: -40%;
  width: 33.333333%;
  border-radius: var(--rounded-box, 1rem);
  animation: progress-loading 5s infinite ease-in-out;
}
.progress::-webkit-progress-bar {
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.2;
  border-radius: var(--rounded-box, 1rem);
}
.progress::-webkit-progress-value {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
  border-radius: var(--rounded-box, 1rem);
}
</style>
