<template>
  <q-card flat bordered class="login-box column content-center">
    <div class="column logo content-center">
      <img src="../assets/logo/loginLogo.png" alt="Logo">
    </div>

    <div class="login-fields column content-center">
      <q-input color="orange" placeholder="login">
        <template v-slot:prepend>
          <q-icon name="person"/>
        </template>
      </q-input>

      <q-input color="orange" placeholder="senha">
        <template v-slot:prepend>
          <q-icon name="vpn_key"/>
        </template>
      </q-input>
    </div>

    <div class="column content-center login-button">
      <q-btn color="orange" label="Entrar"></q-btn>
    </div>

    <a class="forget-password" href="">Esqueceu a senha?</a>
  </q-card>
</template>

<script>
export default {
  name: 'LoginBox'
}
</script>

<style lang="scss" scoped>
  ::placeholder {
    color: $gunmetal;
  }

  a {
    text-decoration: none;
    color: $gunmetal;
  }

  .logo {
    margin-top: 50px;
    margin-bottom: 40px;

    img {
      width: 40%;
    }
  }

  .login-box {
    width: 400px;
    border-radius: 30px;
  }

  .login-button {
    margin-top: 40px;

    * {
      width: 50%;
    }
  }

  .forget-password {
    margin-top: 20px;
    margin-bottom: 40px;
    text-align: center;
  }
</style>
