<script setup>
defineProps({
  history: { type: Array, required: true }
})
const emit = defineEmits(['restore'])
</script>

<template>
  <div class="card">
    <div class="ch"><div class="ct">Run history</div><div class="cs">Last 5 runs</div></div>
    <div v-if="!history.length" style="padding:20px;color:var(--t3);font-size:12.5px;">No previous runs yet.</div>
    <div v-for="run in history" :key="run.id" class="fi" style="padding:0;">
      <div class="fi-body" style="padding:12px 16px;">
        <div class="fi-title">{{ run.started_at }} · {{ run.competitors_total }} competitors</div>
        <div class="fi-meta">Status: {{ run.status }}</div>
      </div>
      <div class="fi-right">
        <UButton size="xs" color="neutral" variant="ghost" @click="emit('restore', run.id)">Restore</UButton>
      </div>
    </div>
  </div>
</template>
