<template>
  <b-card no-body>
    <b-card-header>
      <h4 class="d-flex align-items-center mb-0">
        {{ $t('Realms') }}
        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_default_domain_configuration" />
      </h4>
      <base-services v-bind="services" class="mt-3 mb-0" variant="info" />
    </b-card-header>
    <div class="card-body">
      <base-search :use-search="useSearch">
        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Realm') }}</b-button>
      </base-search>
      <the-table class="mt-3"
        :isLoading="isLoading"
        :items="items"
        :columns="columns"
        :visibleColumns="visibleColumns"
        @reSearch="reSearch"
        @setColumns="setColumns"
      />
    </div>
  </b-card>
</template>
<script>
import {
  BaseButtonConfirm,
  BaseButtonHelp,
  BaseSearch,
  BaseSearchInputColumns,
  BaseServices,
  BaseTableSortable
} from '@/components/new/'
import TheTable from './TheTable'

const components = {
  BaseButtonConfirm,
  BaseButtonHelp,
  BaseSearch,
  BaseSearchInputColumns,
  BaseServices,
  BaseTableSortable,
  TheTable
}

import { toRefs } from '@vue/composition-api'
import { useRouter, useSearch, useServices } from '../_composables/useCollection'

const setup = (props, context) => {

  const { root: { $router } = {} } = context

  const router = useRouter($router)

  const search = useSearch()

  const services = useServices()

  return {
    useSearch,
    ...router,
    ...toRefs(search),
    services
  }
}

// @vue/component
export default {
  name: 'the-search',
  inheritAttrs: false,
  components,
  setup
}
</script>
