<script setup>
const router = useRouter()

definePageMeta({
  middleware: ['auth']
})

const breadCrumb = computed(() => ([
  { link: '/organizations', text: 'Organizations', active: true}
]))

const createOrganization = () => {
  router.push('/organizations/create')
}
</script>

<template>
  <Head>
    <Title>Organizations</Title>
  </Head>

  <NuxtLayout name="new-dash">
    <div>
      <BreadCrumb :items="breadCrumb" class="mb-1.5rem" />

      <div class="card card-action mb-5">
        <div class="card-alert"></div>
        <div class="card-header">
          <h4 class="card-action-title">Organizations</h4>
          <div class="card-action-element">
            <button type="button" @click="createOrganization" class="btn btn-ms btn-primary waves-effect waves-light">
              <span class="tf-icon ti ti-plus ti-xs me-1"></span> Add Organization
            </button>
          </div>
        </div>
        <div class="collapse show">
          <div class="row m-3">
            <div class="col-md-6 col-lg-4 mb-3">
              <div class="card text-center">
                <div class="card-header">
                  <div class="badge bg-primary rounded-pill ms-auto">Pro</div>
                </div>
                <div class="card-body">
                  <h5 class="card-title">Organization Name</h5>
                  <p class="card-text">Created at 2023-12-12</p>
                  <a href="/" class="btn btn-primary waves-effect waves-light">Open Dashboard</a>
                </div>
                <div class="card-footer text-muted d-flex justify-between">
                  <div></div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </NuxtLayout>
</template>