<template>
  <div
    class="dark:text-white container mx-auto h-full flex justify-center items-center"
  >
    <table class="table-auto shadow-lg">
      <thead>
        <tr>
          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
            Name
          </th>
          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
            Location
          </th>
          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
            Model
          </th>
          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
            Comment
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="ap in aps">
          <td class="border px-8 py-4">{{ ap.ap_name }}</td>
          <td class="border px-8 py-4">{{ ap.location }}</td>
          <td class="border px-8 py-4">{{ ap.model }}</td>
          <td class="border px-8 py-4">{{ ap.comment }}</td>
          <td>
            <!--router-link
            :to="{ name: 'AccessPoints', query: { 'site-id': site.id } }"
            class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
          >Show APs</router-link
          --></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { ref, toRefs } from "vue";
import { getAccessPointDetails, AccessPoint } from "../api";

export default {
  name: "AccessPoints",
  props: {
    site: {
      type: Number,
      required: false,
    },
  },
  async setup(props: { site?: number }) {
    const { site } = toRefs(props);
    const aps = ref<AccessPoint[]>([]);
    async function getAccessPoints() {
      await getAccessPointDetails(site?.value).then(
        (a) => void (aps.value = a)
      );
    }
    await getAccessPoints();

    return { aps };
  },
};
</script>

<style scoped></style>
