<script setup>
import EinheitDetail from './EinheitDetail.vue'

defineProps({ projekt: { type: Object, required: true } })
</script>

<template>
  <section v-for="f in projekt.flows" :key="f.titel" class="flow">
    <h3>{{ f.titel }}</h3>
    <ol>
      <li v-for="(s, i) in f.schritte" :key="i">
        {{ s.text }}
        <details v-if="s.einheiten.length" class="refs">
          <summary><code v-for="(eid, j) in s.einheiten" :key="eid">{{ j ? ', ' : '' }}{{ eid }}</code></summary>
          <EinheitDetail v-for="eid in s.einheiten" :key="eid"
                         :projekt-name="projekt.name" :id="eid" />
        </details>
      </li>
    </ol>
  </section>
  <p v-if="!projekt.flows.length" class="leer">Keine Flow-Sicht vorhanden.</p>
</template>

<style scoped>
.flow {
  background: var(--panel); border: 1px solid var(--rand); border-radius: 10px;
  padding: 0.9rem 1.2rem; margin-bottom: 1rem;
}
.flow h3 { margin: 0 0 0.4rem; font-size: 1.02rem; }
.flow li { margin: 0.3rem 0; }
.refs > summary { font-size: 0.8rem; color: var(--dezent); padding: 0.15rem 0; }
.leer { color: var(--dezent); }
</style>
