<template>
  <div class="fc-empty">
    <v-icon size="56" icon="mdi-image-off-outline" class="fc-empty__icon" />
    <h2 class="fc-empty__title">No images yet</h2>
    <p class="fc-empty__body">
      Drop files into <code>/import</code> and run a scan from
      <RouterLink to="/settings?tab=import">Settings → Import</RouterLink>.
    </p>
  </div>
</template>

<style scoped>
.fc-empty {
  text-align: center;
  padding: 96px 24px;
  color: rgb(var(--v-theme-on-surface));
}
.fc-empty__icon { color: rgb(var(--v-theme-accent)); margin-bottom: 16px; }
.fc-empty__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
}
.fc-empty__body { color: rgb(var(--v-theme-on-surface-variant, var(--v-theme-on-surface))); }
code { background: rgb(var(--v-theme-surface-light)); padding: 1px 6px; border-radius: 4px; }
</style>
