v-container.fill-height.justify-center.pa-4.review-view-container
v-fade-transition(mode="out-in")
.d-flex.flex-column.justify-center.align-center.fill-height(v-if="loading")
v-progress-circular(indeterminate color="primary" size="64")
.text-body-1.text-grey.mt-4 {{ $t('review.loading') }}
v-card.pa-6.rounded-xl.d-flex.flex-column.align-center.review-card(
v-else-if="currentItem"
)
.d-flex.align-center.w-100.mb-6
v-btn.mr-2(
icon="mdi-arrow-left"
variant="text"
color="grey"
to="/"
density="comfortable"
)
.text-caption.text-grey.font-weight-bold
| {{ sessionDone }} / {{ sessionTotal }}
v-spacer
v-chip.font-weight-bold(
size="small"
:color="getSRSColor(currentItem.srsLevel)"
variant="flat"
) {{ $t('review.level') }} {{ currentItem.srsLevel }}
.text-center.mb-6
.text-caption.text-grey.text-uppercase.tracking-wide.mb-1
| {{ $t('review.meaning') }}
.text-h3.font-weight-bold.text-white.text-shadow
| {{ currentItem.meaning }}
.review-canvas-area
KanjiCanvas(
ref="kanjiCanvasRef"
:char="currentItem.char"
@complete="handleComplete"
@mistake="handleMistake"
)
transition(name="scale")
v-btn.next-fab.glow-btn.text-black(
v-if="showNext"
@click="next"
color="primary"
icon="mdi-arrow-right"
size="large"
elevation="8"
)
.mb-4.d-flex.gap-2
v-btn.text-caption.font-weight-bold.opacity-80(
variant="text"
color="amber-lighten-1"
prepend-icon="mdi-lightbulb-outline"
size="small"
:disabled="showNext"
@click="triggerHint"
) {{ $t('review.showHint') }}
v-sheet.d-flex.align-center.justify-center(
width="100%"
height="48"
color="transparent"
)
transition(name="fade-slide" mode="out-in")
.status-text.text-h6.font-weight-bold(
:key="statusCode"
:class="getStatusClass(statusCode)"
) {{ $t('review.' + statusCode) }}
v-progress-linear.mt-4.progress-bar(
v-model="progressPercent"
color="primary"
height="4"
rounded
)
v-card.pa-8.rounded-xl.elevation-10.text-center.review-card(
v-else-if="sessionTotal > 0 && store.queue.length === 0"
)
.mb-6
v-avatar(color="rgba(0, 206, 201, 0.1)" size="80")
v-icon(size="40" color="primary") mdi-trophy
.text-h4.font-weight-bold.mb-2 {{ $t('review.sessionComplete') }}
.text-body-1.text-grey.mb-8 {{ $t('review.levelup') }}
v-row.mb-6
v-col.border-r.border-subtle(cols="6")
.text-h3.font-weight-bold.text-white {{ accuracy }}%
.text-caption.text-grey.text-uppercase.mt-1 {{ $t('stats.accuracy') }}
v-col(cols="6")
.text-h3.font-weight-bold.text-white {{ sessionCorrect }}
.text-caption.text-grey.text-uppercase.mt-1 {{ $t('stats.correct') }}
v-btn.text-black.font-weight-bold.glow-btn(
to="/"
block
color="primary"
height="50"
rounded="lg"
) {{ $t('review.back') }}
.text-center(v-else)
v-icon.mb-4(size="64" color="grey-darken-2") mdi-check-circle-outline
.text-h4.mb-2.text-white {{ $t('review.caughtUp') }}
.text-grey.mb-6 {{ $t('review.noReviews') }}
v-btn.font-weight-bold(
to="/"
color="primary"
variant="tonal"
) {{ $t('review.viewCollection') }}