<template>
  <div class="fc-maint">
    <p class="text-body-2 mb-4">
      Machine-assisted tagging controls. Backfill and centroid recompute run
      nightly automatically; the allowlist auto-applies accepted tags to new
      and existing images.
    </p>
    <div class="fc-maint__grid">
      <MLBackfillCard />
      <CentroidRecomputeCard />
    </div>
    <MLThresholdSliders class="mt-4" />
    <AllowlistTable class="mt-4" />
    <AliasTable class="mt-4" />
    <BackupCard class="mt-6" />
    <TagMaintenanceCard class="mt-6" />
    <BrowserExtensionCard class="mt-6" />
    <LegacyMigrationCard class="mt-6" />
  </div>
</template>

<script setup>
import MLBackfillCard from './MLBackfillCard.vue'
import CentroidRecomputeCard from './CentroidRecomputeCard.vue'
import MLThresholdSliders from './MLThresholdSliders.vue'
import AllowlistTable from './AllowlistTable.vue'
import AliasTable from './AliasTable.vue'
import BackupCard from './BackupCard.vue'
import TagMaintenanceCard from './TagMaintenanceCard.vue'
import BrowserExtensionCard from './BrowserExtensionCard.vue'
import LegacyMigrationCard from './LegacyMigrationCard.vue'
</script>

<style scoped>
.fc-maint__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
</style>
