<template>
  <div v-if="contact">
    <div class="q-gutter-md">
      <q-carousel
        v-model="slide"
        transition-prev="slide-right"
        transition-next="slide-left"
        swipeable
        animated
        control-color="white"
        navigation
        padding
        arrows
        height="200px"
        class="text-white shadow-1 rounded-borders"
      >
        <q-carousel-slide name="1" class="column no-wrap flex-center">
          <q-icon name="house" size="56px" />
          <div class="q-mt-sm text-center">
            <CMySelectCity
              :label="$t('reg.resid_province')"
              table="users"
              jointable="provinces"
              v-model="contact.profile.resid_province"
              myclass="selectorwide"
              :db_type="costanti.FieldType.string"
              db_field="profile"
              db_subfield="resid_province"
              :db_id="contact._id"
              :db_rec="contact"
            >
            </CMySelectCity>
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="2" class="column no-wrap flex-center">
          <q-icon name="live_tv" size="56px" />
          <div class="q-mt-md text-center"></div>
        </q-carousel-slide>
        <q-carousel-slide name="3" class="column no-wrap flex-center">
          <q-icon name="layers" size="56px" />
          <div class="q-mt-md text-center"></div>
        </q-carousel-slide>
        <q-carousel-slide name="4" class="column no-wrap flex-center">
          <q-icon name="terrain" size="56px" />
          <div class="q-mt-md text-center"></div>
        </q-carousel-slide>
        <template v-slot:control>
          <q-carousel-control
            position="bottom-right"
            :offset="[18, 18]"
            class="q-gutter-xs"
          >
            <q-btn
              v-if="slide !== '1'"
              push
              text-color="black"
              icon="arrow_left"
              :label="$t('dialog.indietro')"
              @click="$refs.carousel.previous()"
            />
            <q-btn
              v-if="slide !== '4'"
              push
              color="primary"
              icon="arrow_right"
              :label="$t('dialog.avanti')"
              :disabled="checkifDisabled"
              @click="!checkifDisabled ? $refs.carousel.next() : null"
            />
          </q-carousel-control>
        </template>
      </q-carousel>
      <div class="row justify-center">
        <q-btn-toggle
          glossy
          v-model="slide"
          :options="[
            { label: '1', value: '1' },
            { label: 2, value: '2' },
            { label: 3, value: '3' },
            { label: 4, value: '4' },
          ]"
        />
      </div>
    </div>
  </div>
  <q-dialog v-model="showAccountInfo" full-height full-width>
    <q-card v-if="true">
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title class="text-h7">
          {{ tools.getNomeUtenteByRecUser(contact) }}
        </q-toolbar-title>
        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
      </q-toolbar>
    </q-card>
  </q-dialog>
</template>

<script lang="ts" src="./CMyProfileTutorial.ts">
</script>

<style lang="scss" scoped>
@import './CMyProfileTutorial.scss';
</style>
