<template>
  <div>
    <div>
      <h3>server : {{server.name}} ({{server.id}}) <button @click="remove">Remove</button></h3>

    </div>
  <hr>
  </div>

</template>

<script setup>
import {ref, onMounted} from "vue";

// defined constants
const {server} = defineProps({
  server: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['remove'])

// defined methods
async function remove(){
  const response = await fetch(`/api/server/servers/${server.id}/`, {
    method: 'DELETE'
  })
  if (response.ok) {
    emit('remove')
  } else {
    console.error("Failed to delete server:", response.statusText)
  }
}

onMounted(() => {

})
</script>

<style scoped>

</style>