<template>
  <b-container>
    <b-row>
      <b-col class="mx-auto" cols="12" lg="4" sm="8">
        <b-card class="mt-5">
          <div class="my-4 text-center">
            <b-img src="@/assets/musicbrainz.svg" id="provider-banner"/>
          </div>
          <div class="mt-4">

            <b-form @submit.prevent="performLogin" v-if="true">
              <b-form-group
                  id="input-group-1"
                  label="Username:"
                  label-for="input-1"
              >
                <b-form-input
                    id="input-1"
                    v-model="form.username"
                    required
                    placeholder=""
                    autocomplete="off"
                ></b-form-input>
              </b-form-group>

              <b-form-group id="input-group-2" label="Password:" label-for="input-2"
                            description="Yes, the same one you use on MusicBrainz"
              >
                <b-form-input
                    id="input-2"
                    v-model="form.password"
                    required
                    placeholder=""
                    autocomplete="off"
                    type="password"
                ></b-form-input>
              </b-form-group>

              <div class="text-right">
                <b-button type="submit" variant="primary">Login</b-button>
              </div>
            </b-form>


          </div>
        </b-card>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    }
  },
  methods: {
    performLogin() {

    }
  }
}
</script>

<style scoped>
#provider-banner {
  width: 75%;
}
</style>