<template>
  <div class="sidebar">
    <SiteCard v-for="(site, index) in sites" :key="site.id"
              :site="site"
              :active="selectedId === site.id"
              :disabled="!site.enabled"
              @select="$emit('select-site', site)" />

    <AddSiteForm :show="pendingAdd"
                 @start="$emit('start-add')"
                 @cancel="$emit('cancel-add')"
                 @submit="(name) => $emit('add-site', name)" />
  </div>
</template>

<script setup lang="ts">
import SiteCard from './SiteCard.vue'
import AddSiteForm from './AddSiteForm.vue'

defineProps<{
  sites: Array<{ id: string; name: string; enabled: boolean }>
  selectedId: string | null
  pendingAdd: boolean
}>()

defineEmits<{ 'select-site': [site: { id: string; name: string; enabled: boolean }]; 'start-add': []; 'cancel-add': []; 'add-site': [name: string] }>()
</script>

<style scoped>
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>
