<template>
  <v-list-item
    v-for="s in servers"
    :key="s.id"
    rounded="lg"
    density="compact"
    class="terminal-server-item"
    @click="$emit('select', s.id)"
  >
    <template #prepend>
      <v-icon :color="s.is_online ? 'success' : 'grey'" size="8">mdi-circle</v-icon>
    </template>
    <v-list-item-title class="text-body-2 text-truncate" :title="s.name">{{ s.name }}</v-list-item-title>
    <v-list-item-subtitle class="text-caption text-truncate text-medium-emphasis" :title="s.domain">
      {{ s.domain }}
    </v-list-item-subtitle>
  </v-list-item>
  <v-list-item v-if="servers.length === 0" density="compact" class="text-medium-emphasis terminal-server-item">
    暂无匹配的服务器
  </v-list-item>
</template>

<script setup lang="ts">
import type { TerminalServerItem } from '@/composables/terminal/types'

defineProps<{
  servers: TerminalServerItem[]
}>()

defineEmits<{
  select: [serverId: number]
}>()
</script>

<style scoped>
.terminal-server-item {
  min-height: 40px !important;
  padding-block: 2px;
}
.terminal-server-item :deep(.v-list-item__prepend) {
  align-self: center;
}
</style>
