<script setup>
definePageMeta({
  middleware: ['auth']
})

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

<template>
  <Head>
    <Title>Add Organization</Title>
  </Head>

  <NuxtLayout name="org">
    <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">Add Organization</h4>
          <div class="card-action-element">
            <button type="button" class="btn btn-ms btn-secondary waves-effect waves-light">
              <span class="tf-icon ti ti-chevron-left ti-xs me-1"></span> Back
            </button>
          </div>
        </div>
        <div class="collapse show">
          <form class="p-0.75rem">
            <div class="d-flex ss:flexDirection-column">
              <div class="w-100pct sr:w-50pct p-0.75rem">
                <label class="label">Organization Value</label>
                <input type="text" class="input" />
              </div>
              <div class="w-100pct sr:w-50pct p-0.75rem">
                <label class="label">Organization Name</label>
                <input type="text" class="input" />
              </div>
            </div>
            <div class="p-0.75rem">
              <label class="label">Description</label>
              <textarea class="input"></textarea>
            </div>
            <div class="d-flex justify-between">
              <div class="p-0.75rem">
                <button type="button" class="btn btn-ms btn-secondary waves-effect waves-light">
                  <span class="tf-icon ti ti-disk ti-xs me-1"></span> Create
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>

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