<template>
  <q-card class="col-4">
    <q-card-section class="row fit justify-center items-center content-center">
      <q-avatar size="150px">
        <q-img :src="pic" placeholder-src="logo-black.svg" />
      </q-avatar>
    </q-card-section>
    <q-card-section>
      <div class="text-h6">{{ firstname }} {{ lastname }}</div>
      <div class="text-subtitle2">{{ club }}</div>
      <q-separator />
      <div class="text-subtitle2">Aufgabe bei Flaschengeist:</div>
      <div>
        {{ job }}
      </div>
    </q-card-section>

    <q-card-section class="q-pt-none">
      {{ description }}
    </q-card-section>
  </q-card>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
  name: 'Developer',
  props: {
    pic: {
      default: 'logo-dark.svg'
    },
    firstname: {
      //required: true,
      default: 'firstname'
    },
    lastname: {
      //required: true,
      default: 'lastname'
    },
    job: {
      default: 'student'
    },
    club: {
      default: 'Studentenclub Wu5 e.V.'
    },
    description: {
      default:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. '
    }
  }
});
</script>
