<template>
  <v-container fill-height>
    <v-layout align-center justify-center>
      <v-flex xs12 sm8 md4>

        <v-card>
          <v-toolbar dark color="primary">
            <v-toolbar-title>Sign In</v-toolbar-title>
          </v-toolbar>

          <v-card-text>
            <v-form v-model="validSignInForm">
              <v-text-field
                type="text"
                v-model="username"
                :rules="usernameRules"
                label="Username"
                prepend-icon="person"
                required
              ></v-text-field>
              <v-text-field
                type="password"
                v-model="password"
                :rules="passwordRules"
                label="Password"
                prepend-icon="lock"
                required
              ></v-text-field>
            </v-form>
          </v-card-text>

          <v-card-actions>
            <v-btn :disabled="!validSignInForm" block color="primary" @click="submitSignInForm">Sign In</v-btn>
          </v-card-actions>

          <v-card-text>
            Don't have an account? <router-link to="/signUp">Create One.</router-link>
          </v-card-text>
        </v-card>

      </v-flex>
    </v-layout>
  </v-container>
</template>