<template>
  <div class="column w100 text-caption">
    <div class="flex items-center no-wrap">
      <q-checkbox v-model="modelValue" val="terms" class="q-pr-sm"/>
      <span>
        {{ $t('agreements__checkbox_agreement_terms') + ' ' }}
        <span
          @click="router.push({ name: 'terms' })"
          class="cursor-pointer text-primary"
          >
          {{ $t('agreements__checkbox_agreement_terms_doc') }}
        </span>
      </span>
    </div>
    <div class="flex items-center no-wrap">
      <q-checkbox v-model="modelValue" val="consent" class="q-pr-sm"/>
      <span>
        {{ $t('agreements__checkbox_agreement_consent') + ' ' }}
        <span
          @click="router.push({ name: 'consent' })"
          class="cursor-pointer text-primary"
          >
          {{ $t('agreements__checkbox_agreement_consent_doc') }}
        </span>
        {{ ' ' +  $t('agreements__checkbox_agreement_privacy') + ' ' }}
        <span
          @click="router.push({ name: 'privacy' })"
          class="cursor-pointer text-primary"
          >
          {{ $t('agreements__checkbox_agreement_privacy_doc') }}
        </span>
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router'

  const modelValue = defineModel<('terms'| 'consent')[]>({ default: () => [] })
  
  const router = useRouter()

</script>
