<template>
  <div
    class="dark:text-white container mx-auto h-full flex justify-center items-center"
  >
    <table class="table-fixed shadow-lg">
      <thead>
        <tr>
          <th
            class="w-1/2 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
          >
            Name
          </th>
          <th
            class="w-1/4 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
          >
            ID
          </th>
          <th
            class="w-1/4 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
          >
            Default Prefix
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="site in sites">
          <td class="border px-8 py-4">{{ site.name }}</td>
          <td class="border px-8 py-4">{{ site.id }}</td>
          <td class="border px-8 py-4">{{ site.default_prefix }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div
    class="dark:text-white container mx-auto h-full flex justify-center items-center mt-12"
  >
    <h1 class="font-hairline mb-6 text-center">New Site</h1>
    <form>
      <label
        >Name
        <input type="text" placeholder="Name" />
      </label>
      <label>
        Default Prefix
        <input type="text" placeholder="Default Prefix" />
      </label>
    </form>
  </div>
</template>

<script lang="ts">
import { getSites, Site } from "../api";
import { ref } from "vue";

export default {
  name: "Sites",
  setup() {
    const sites = ref<Site[]>([]);
    getSites().then((s) => void (sites.value = s));
    return { sites };
  },
};
</script>

<style scoped></style>
