<template>
  <div style="height:100%">
    <app-header btnToProp="login" btnLabel="Register.loginBtn" btnIconName="mdi-login"></app-header>
    <v-container fluid class="align-start fill-height backgroundImg">
      <img src="../../public/img/radio2.png" />
      <v-row justify="center" class="loginCard">
        <v-col xs="12" sm="8" md="4">
          <v-card class="elevation-12" light elevation="24">
            <v-toolbar color="light-green" dark>
              <v-toolbar-title>{{$t('Register.registerHeader')}}</v-toolbar-title>
            </v-toolbar>
            <v-card-text>
              <v-form>
                <v-text-field 
                :label="$t('Register.username')" 
                prepend-icon="mdi-account-circle"
                :rules="[rules.required]" />
                <v-text-field
                  :type="!showPassword1?'password' :'text'"
                  :label="$t('Register.password')"
                  prepend-icon="mdi-lock"
                  @click:append="showPassword1 = !showPassword1"
                  :append-icon="showPassword1 ? 'mdi-eye': 'mdi-eye-off'"
                  v-model="firstPass"
                  :rules="[rules.required, rules.min]"
                />
                <v-text-field
                  :type="!showPassword2?'password' :'text'"
                  :label="$t('Register.repeatPassword')"
                  prepend-icon="mdi-lock"
                  @click:append="showPassword2 = !showPassword2"
                  :append-icon="showPassword2 ? 'mdi-eye': 'mdi-eye-off'"
                  v-model="secondPass"
                  :rules="[rules.required, rules.matchPass]"
                />
              </v-form>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="light-green white--text">
                <v-icon left>mdi-login</v-icon>
                <small>{{$t('Register.registerBtn')}}</small>
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
    <app-footer></app-footer>
  </div>
</template>

<script>
import AppFooter from "../components/AppFooter.vue";
import AppHeader from "../components/AppHeader.vue";
export default {
  components: {
    "app-footer": AppFooter,
    "app-header": AppHeader
  },
  data() {
    return {
      firstPass: undefined,
      secondPass: undefined,
      showPassword1: false,
      showPassword2: false,
      rules: {
        required: value => !!value || this.$t("Register.required"),
        min: v => {
          if (v==undefined)
            return true
          return v.length >= 8 || this.$t("Register.min8Character");
        },
        matchPass: v => {
          return (
            this.firstPass === this.secondPass ||
            this.$t('Register.matchPass')
          );
        }
      }
    };
  }
};
</script>

<style scoped>
.backgroundImg {
  background-color: #abdae4ad;
}

img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  opacity: 0.6;
  filter: grayscale(0.5) blur(2px);
  z-index: 0;
}

.loginCard {
  z-index: 10;
}

.backgroundImg {
  overflow-y: hidden;
}
</style>