<template>
  <q-card class="col-12">
    <q-card-section class="fit row justify-start content-center items-center">
      <q-input
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="Vorname"
        readonly
        :value="user.firstname"
        filled
      />
      <q-input
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="Nachname"
        readonly
        :value="user.lastname"
        filled
      />
      <q-input
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="Benutzername"
        readonly
        :value="user.userid"
        filled
      />
      <q-input
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="E-Mail"
        readonly
        :value="user.mail"
        filled
      />
      <q-select
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="Rollen"
        readonly
        v-model="user.roles"
        :options="user.roles"
        filled
      >
        <template v-slot:selected-item="scope">
          <q-chip v-for="(item, index) in scope.opt" :key="'item' + index">
            {{ item.name }}
          </q-chip>
        </template>
      </q-select>
    </q-card-section>
    <q-separator />
    <q-card-section class="fit row justify-start content-center items-center">
      <q-input
        class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
        label="Password"
        type="password"
        filled
      />
      <q-input
        class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
        label="Neues Password"
        type="password"
        filled
      />
      <q-input
        class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
        label="Wiederhole neues Password"
        type="password"
        filled
      />
    </q-card-section>
  </q-card>
</template>

<script lang="ts">
import { computed, defineComponent } from '@vue/composition-api';
export default defineComponent({
  name: 'Main',
  setup(_, { root: { $store } }) {
    const user = computed(() => {
      return $store.getters['user/user'];
    });
    return { user };
  }
});
</script>
