<template>
  <div class="login-screen">
    <v-card class="login-card" elevation="12">
      <div class="brand-lockup">
        <span class="brand-mark">MA</span>
        <span class="brand-name">DepreCore</span>
      </div>
      <v-divider />
      <v-card-text class="pa-5">
        <h1 class="text-h5 font-weight-bold mb-5">Fixed asset command center</h1>
        <v-text-field v-model="localForm.email" label="Email" autocomplete="email" prepend-inner-icon="mdi-email-outline" />
        <v-text-field
          v-model="localForm.password"
          label="Password"
          type="password"
          autocomplete="current-password"
          prepend-inner-icon="mdi-lock-outline"
          @keyup.enter="$emit('login', localForm)"
        />
        <v-alert v-if="error" class="mb-4" density="compact" type="error">{{ error }}</v-alert>
        <v-btn block color="primary" :loading="loading" prepend-icon="mdi-login" @click="$emit('login', localForm)">Sign in</v-btn>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
export default {
  props: {
    error: { type: String, default: '' },
    form: { type: Object, required: true },
    loading: { type: Boolean, default: false }
  },
  emits: ['login'],
  data() {
    return {
      localForm: { ...this.form }
    };
  },
  watch: {
    form(value) {
      this.localForm = { ...value };
    }
  }
};
</script>
