<template>
  <pn-page-card>
    <template #title>
      <div class="flex items-center justify-between col-grow">
        <div>
          {{$t('company_create__title_card')}}
        </div>
        <q-btn
          v-if="(Object.keys(companyMod).length !== 0)"
          @click = "addCompany(companyMod)"
          flat round
          icon="mdi-check"
        />
      </div>
    </template>
    <pn-scroll-list>
      <company-info-block v-model="companyMod"/>
    </pn-scroll-list>
  </pn-page-card>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import companyInfoBlock from 'src/components/companyInfoBlock.vue'
  import { useCompaniesStore } from 'stores/companies'
  import type { Company } from 'src/types'

  const router = useRouter()
  const companiesStore = useCompaniesStore()

  const companyMod = ref(<Company>{})
  
  function addCompany (data: Company) {
    companiesStore.addCompany(data)
    router.go(-1)
  }

</script>
