<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import InputText from 'primevue/inputtext'
import Button from 'primevue/button'
import Card from 'primevue/card'
import Dropdown from 'primevue/dropdown'

const router = useRouter()
const table_name = ref('Default Table Name')
const table_link = ref('default_table_link')
const version = ref(12)

const availableVersion = ref([11, 12])

function saveTable() {
  axios
    .post('/api/tables', {
      table_name: table_name.value,
      table_link: table_link.value,
      version: version.value,
    })
    .then(() => router.push({ name: 'home' }))
}
</script>

<style>
@import 'primeicons/primeicons.css';

.detailCard {
  margin: 25px;
}

.button-box {
  margin: 5px;
}
</style>

<template>
  <Card class="detailCard flex">
    <template #title> New Table Details </template>
    <template #content>
      <div class="flex flex-column">
        <InputText class="button-box" type="text" placeholder="Table Name" v-model="table_name" />
        <InputText class="button-box" type="text" placeholder="Table Link" v-model="table_link" />
        <Dropdown class="button-box" v-model="version" :options="availableVersion"></Dropdown>
      </div>
    </template>
    <template #footer>
      <Button class="button-box" label="Save" @click="saveTable()" />
      <Button class="button-box" label="Clear" />
    </template>
  </Card>
</template>
