<script setup lang="ts">
import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
import AppBox from 'components/app/AppBox.vue';
</script>
<template>
  <div class="column">
    <div class="row text-h6 text-weight-bold q-mb-md">จัดการสาขา</div>

    <app-box bordered style="width: 100%; height: 500px">
      <div class="column" style="height: 100%">
        <div class="col-1 self-end">
          <q-btn
            unelevated
            class="color-btn-icon"
            size="10px"
            round
            icon="mdi-exclamation"
            :class="{ dark: $q.dark.isActive }"
          >
            <q-tooltip>test</q-tooltip>
          </q-btn>
        </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>
/* .test {
  display: flex;
  align-items: center;
} */

.color-btn-icon {
  --_bg-color-btn-icon: var(--blue-5-hsl);
  transform: rotate(180deg);
  color: var(--gray-0);
  background: hsl(var(--_bg-color-btn-icon));

  &.dark {
    --_bg-color-btn-icon: var(--surface-0);
    border: 2px solid;
    border-color: var(--brand-1);
  }
}
</style>
