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

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

<template>
  <section v-for="k in projekt.architektur" :key="k.name" class="komponente">
    <h3>{{ k.name }}</h3>
    <p class="besch">{{ k.beschreibung }}</p>
    <p v-if="k.beziehungen.length" class="beziehungen">
      <template v-for="(b, i) in k.beziehungen" :key="i">
        <span v-if="i"> · </span>{{ b.typ }} → {{ b.ziel }}
      </template>
    </p>
    <details>
      <summary>{{ k.einheiten.length }} Einheiten</summary>
      <EinheitDetail v-for="eid in k.einheiten" :key="eid"
                     :projekt-name="projekt.name" :id="eid" />
    </details>
  </section>
  <p v-if="!projekt.architektur.length" class="leer">Keine Architektur-Sicht vorhanden.</p>
</template>

<style scoped>
.komponente {
  background: var(--panel); border: 1px solid var(--rand); border-radius: 10px;
  padding: 0.9rem 1.2rem; margin-bottom: 1rem;
}
.komponente h3 { margin: 0; font-size: 1.02rem; }
.besch { color: var(--dezent); font-size: 0.9rem; margin: 0.2rem 0; }
.beziehungen { color: var(--akzent); font-size: 0.85rem; margin: 0.2rem 0 0.5rem; }
summary { font-size: 0.9rem; color: var(--dezent); padding: 0.3rem 0; }
.leer { color: var(--dezent); }
</style>
