<script setup lang="ts">
import DomainListItem from '@/components/DomainListItem.vue'

import { onMounted } from 'vue'

import { useDomainsStore } from '@/stores/domains'
import { useUiStore } from '@/stores/ui'
const ds = useDomainsStore()
const ui = useUiStore()

onMounted(() => {
  ds.fetchDomains()
})
</script>

<template>
  <HList>
    <DomainListItem
      v-for="domain in ds.domains"
      :key="domain.domain_name"
      :info="domain"
      :selected="domain.domain_name === ui.selectedDomainName"
      @hover="ui.previewDomainName = domain.domain_name"
      @click="ui.selectedDomainName = domain.domain_name"
    />
  </HList>
</template>

<style>
  
</style>