<template>
  <q-page>
    <q-banner rounded class="bg-primary text-white" style="text-align: center">
      <span class="mybanner">{{ $t('install.Installazione_Sito') }}</span>
    </q-banner>

    <q-banner
      v-if="idapp"
      rounded
      class="bg-positive text-white"
      style="text-align: center"
    >
      <div>
        ID APP ASSEGNATA {{ idapp }} !
      </div>
    </q-banner>

    <form
      @submit.prevent.stop="submit"
      class="row justify-center text-center padding"
    >
      <div class="q-gutter-sm q-ma-sm">
        <div>
          <q-banner
            rounded
            class="bg-primary text-white"
            style="text-align: center"
          >
            <span class="mybanner">{{ $t('install.title_inst') }}</span>
          </q-banner>
          <br />

          <q-input
            ref="emailRef"
            v-model="form.email"
            rounded
            outlined
            autocomplete="email"
            maxlength="50"
            debounce="1000"
            :error="v$.email.$error"
            :error-message="tools.errorMsg('email', v$.email)"
            :label="$t('reg.email')"
          >
            <template v-slot:prepend>
              <q-icon name="email" />
            </template>
          </q-input>
          <br />
          <q-input
            v-model="form.idappSent"
            rounded
            outlined
            maxlength="50"
            :label="$t('install.idapp')"
          >
            <template v-slot:prepend>
              <q-icon name="fas fa-home" />
            </template>
          </q-input>
          <br />
          <q-input
            v-model="form.name"
            rounded
            outlined
            maxlength="50"
            :label="$t('install.name')"
          >
            <template v-slot:prepend>
              <q-icon name="fas fa-home" />
            </template>
          </q-input>
          <br />
          <q-input
            v-model="form.username"
            rounded
            outlined
            maxlength="50"
            :label="$t('install.username')"
          >
            <template v-slot:prepend>
              <q-icon name="fas fa-user" />
            </template>
          </q-input>
          <br />
          <q-input
            v-model="form.password"
            rounded
            outlined
            maxlength="50"
            :label="$t('install.password')"
          >
            <template v-slot:prepend>
              <q-icon name="fas fa-key" />
            </template>
          </q-input>
          <br />
          <q-input
            v-model="form.host"
            rounded
            outlined
            :label="$t('install.domain')"
          >
            <template v-slot:prepend>
              <q-icon name="fas fa-home" />
            </template>
          </q-input>
          <br />
          <q-input
            v-model="form.code"
            rounded
            outlined
            maxlength="50"
            :label="$t('install.code')"
          >
            <template v-slot:prepend>
              <q-icon name="fas fa-key" />
            </template>
          </q-input>

          <br />

          <div class="center q-ma-sm">
            <q-btn
              rounded
              size="lg"
              color="primary"
              type="submit"
              :disable="v$.$error || v$.$invalid"
              >{{ $t('install.submit') }}
            </q-btn>
          </div>
        </div>
      </div>
    </form>
  </q-page>
</template>
<script lang="ts" src="./install_site.ts">
</script>

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