<script setup lang="ts">
import AppBox from 'components/app/AppBox.vue';
import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
import StatCardComponet from 'components/01_branch-management/StatCardComponet.vue';
import TooltipComponet from 'src/components/TooltipComponet.vue';
</script>
<template>
  <div class="column">
    <div class="row text-h6 text-weight-bold q-mb-md">
      {{ $t('branchManagement') }}
    </div>

    <app-box>
      <stat-card-componet amount="10" label="สาขาใหญ่" />
    </app-box>

    <app-box bordered style="width: 100%; height: 500px">
      <div class="column" style="height: 100%">
        <div class="col-1 self-end">
          <div class="row">
            <tooltip-componet imgSrc="img-table-" />
          </div>
        </div>

        <div
          class="col test self-center"
          style="display: flex; align-items: center"
        >
          <btn-add-componet
            :label="'สร้างสำนักงานใหญ่'"
            @trigger="
              () => {
                console.log('test');
              }
            "
          />
        </div>
      </div>
    </app-box>
  </div>
</template>

<style scoped></style>
