<script setup lang="ts">
import type { PipelineStepRun } from '../../types/pipeline'

defineProps<{ steps: PipelineStepRun[] }>()
</script>

<template>
  <ol class="step-timeline">
    <li v-for="step in steps" :key="step.step_run_id">
      <span>{{ String(step.step_order).padStart(2, '0') }}</span>
      <div>
        <strong>{{ step.step_key }}</strong>
        <small>attempt {{ step.attempt }} · {{ step.status }}</small>
        <p v-if="step.error_message">{{ step.error_message }}</p>
      </div>
    </li>
  </ol>
</template>

<style scoped>
.step-timeline { list-style: none; padding: 0; display: grid; gap: 8px; }
li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 10px; border: 1px solid #e4e7ee; border-radius: 10px; }
li > span { color: #6b7280; font-variant-numeric: tabular-nums; }
small { display: block; color: #6b7280; }
p { margin: 6px 0 0; color: #b42335; }
</style>
