<template>
  <v-row no-gutters>
    <v-col cols="12">
      <v-card
        width="100%"
        variant="outlined"
        border="thin"
        rounded="lg"
        :loading="false"
      >
        <v-toolbar density="compact" color="grey-lighten-4">
          <template #prepend>
            <v-btn fab icon density="comfortable">
              <v-icon>mdi-refresh</v-icon>
            </v-btn>
          </template>
          <template #append>
            <v-row no-gutters justify="end" align="center">
              <span class="mr-2 text-caption text-fontgray">
                {{ pageRange }}
              </span>
              <local-pagination v-model="page" :length="pages" />
            </v-row>
          </template>
        </v-toolbar>

        <v-data-table
          :headers="headers"
          :items="items"
          item-value="_id"
          items-per-page="20"
          fixed-header
          hide-default-footer
          hide-default-header
          style="max-height: calc(100vh - (180px))"
        >
          <template #item.permissions="{ value }">
            <span class="text-caption font-weight-bold text-capitalize">
              permissions
            </span>
            <v-chip>{{ value.length }}</v-chip>
          </template>

          <template #item.nature="{ item }">
            <span class="text-capitalize">
              {{ item.nature }}
            </span>
          </template>
        </v-data-table>
      </v-card>
    </v-col>
  </v-row>
</template>

<script setup lang="ts">
const page = ref(1);
const pages = ref(0);
const pageRange = ref("-- - -- of --");

const items = ref<Array<Record<string, any>>>([]);

const headers = [
  { title: "Name", value: "name" },
  { title: "Nature", value: "nature" },
];
</script>
