<script setup lang="ts">
import { ref } from "vue";

/** importComponents*/
import ListView from "@/modules/06_webservices/view/listView.vue";
import LogView from "@/modules/06_webservices/view/historyView.vue";
import ManageWebServices from "@/modules/06_webservices/view/manage.vue";

const tabs = ref<string>("list");
</script>

<template>
  <div class="row items-center">
    <div class="toptitle text-dark row items-center q-py-xs">
      จัดการ web services
    </div>
  </div>

  <q-card flast bordered>
    <q-tabs
      v-model="tabs"
      align="left"
      bordered
      dense
      inline-label
      indicator-color="primary"
      active-color="primary bg-teal-1"
    >
      <q-tab name="list" label="รายการ web services" />
      <q-tab name="log" label="ประวัติการใช้งาน" />
      <q-tab name="manage" label="จัดการ API" />
    </q-tabs>
    <q-separator />

    <q-tab-panels v-model="tabs" animated>
      <q-tab-panel name="list"> <ListView /> </q-tab-panel>
      <q-tab-panel name="log"> <LogView /> </q-tab-panel>
      <q-tab-panel name="manage">
        <ManageWebServices />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<style scoped></style>
