<template>
  <v-container
          fluid
        >
          <v-row
            align="center"
            justify="center"
          >
            <v-col
              cols="12"
              sm="8"
              md="4"
            >
              <v-card class="elevation-1">
                <v-toolbar
                  color="primary"
                  dark
                  flat
                >                  
                  <v-avatar color="teal">
                    <span class="headline">AD</span>
                  </v-avatar>
                  <v-toolbar-title class="ml-3">Sarah Mcbeal</v-toolbar-title>
                </v-toolbar>
                <v-card-text>
                  <v-form>
                    <v-select
                      :items="roleItems"
                      label="Role"
                      prepend-icon="mdi-account"
                    ></v-select>

                    <v-text-field
                      v-model="username"
                      label="Name"
                      prepend-icon="mdi-account"
                      type="text"
                      :rules="rules"
                    ></v-text-field>

                    <v-text-field
                      v-model="userid"
                      label="ID"
                      prepend-icon="mdi-account"
                      type="text"
                      :rules="rules"
                    ></v-text-field>
  
                    <v-text-field
                      v-model="password"
                      label="Password"
                      prepend-icon="mdi-lock"
                      type="password"
                    ></v-text-field>

                    <v-text-field
                      v-model="repassword"
                      label="Repassword"
                      prepend-icon="mdi-lock"
                      type="password"
                    ></v-text-field>
                  </v-form>
                </v-card-text>

                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn
                    color="blue darken-1"
                    text
                  >
                    Save
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-col>
          </v-row>
        </v-container>
</template>

<script>
  export default {
    name: 'AccountUser',
    data: () => ({
      password: "",
      repassword: "",
      roleItems: ['Administrator', 'Manager', 'Member'],
      userid: 'admin',
      username: 'Sarah Mcbeal',
      rules: [
        value => !!value || 'Required.',
        value => (value && value.length >= 3) || 'Min 3 characters',
      ],
    }),
  }
</script>
