<!--
bouton Créer
-->

<template>
  <main>
    <v-btn
      elevation="2"
      color="ot_warning ot_white--text"
      @click="showDialog=true"
    >
      {{ $t('create') }}
    </v-btn>
    <lazy-LayoutDialog
      :show="showDialog"
    >

      <template v-slot:dialogType>{{ $t('creative_assistant') }}</template>
      <template v-slot:dialogTitle>{{ $t('what_do_you_want_to_create') }}</template>
      <template v-slot:dialogText>
        <LayoutHeaderUniversalCreationGenerateCardsSteps :step="step" @updateStep="step=$event" />

      </template>
      <template v-slot:dialogBtn>
        <div class="text-center">
          <v-btn
            color="ot_super_light_grey"
            @click="showDialog=false;step=1"
          >
            {{ $t('cancel') }}
          </v-btn>
          <v-btn
            v-if="step > 1"
            color="ot_super_light_grey"
            @click="step=1"
          >
            {{ $t('previous') }}
          </v-btn>
        </div>
      </template>
    </lazy-LayoutDialog>
  </main>
</template>

<script lang="ts">
import {defineComponent, Ref,ref} from '@nuxtjs/composition-api'

export default defineComponent({
  setup () {
    const showDialog:Ref<Boolean> = ref(false);
    const step:Ref<Number> = ref(1);
    return {
      showDialog,
      step
    }
  }
})
</script>
<style scoped>

</style>
