<template>
  <q-list class="q-pr-xl q-mt-lg">
    <q-item to="/account/edit">
      <q-item-section avatar>
        <q-avatar size="128px">
          <q-img basic :src="user.photoURL" />
        </q-avatar>
      </q-item-section>
    </q-item>
    <q-item to="/account/edit">
      <q-item-section>
        <q-item-label>{{user.name}}</q-item-label>
        <q-item-label caption>{{user.email}}</q-item-label>
      </q-item-section>
      <q-item-section side>
        <q-btn round dense flat to="/account/edit">
          <q-icon name="fas fa-edit" size="18px" class="q-pa-sm text-grey-4" />
        </q-btn>
      </q-item-section>
    </q-item>
    <q-item to="/account/edit">
      <q-item-section>
        <q-item-label caption>{{user.bio || "No bio yet. Click to add one."}}</q-item-label>
      </q-item-section>
    </q-item>
    <q-item>
      <q-separator class="q-my-md" />
    </q-item>
    <!-- <q-item clickable to="/account">
      <q-item-section avatar>
        <q-avatar color="grey-2">D</q-avatar>
      </q-item-section>
      <q-item-section>
        <q-item-label>Dashboard</q-item-label>
      </q-item-section>
    </q-item>-->
    <q-item clickable to="/account/projects">
      <q-item-section avatar>
        <q-avatar color="grey-2">P</q-avatar>
      </q-item-section>
      <q-item-section>
        <q-item-label>Projects</q-item-label>
      </q-item-section>
    </q-item>
    <q-item clickable to="/account/collections">
      <q-item-section avatar>
        <q-avatar color="grey-2">C</q-avatar>
      </q-item-section>
      <q-item-section>
        <q-item-label>Collections</q-item-label>
      </q-item-section>
    </q-item>
    <q-item clickable to="/account/bookmarks">
      <q-item-section avatar>
        <q-avatar color="grey-2">B</q-avatar>
      </q-item-section>
      <q-item-section>
        <q-item-label>Bookmarks</q-item-label>
      </q-item-section>
    </q-item>
  </q-list>
</template>

<script>
export default {
  // name: 'ComponentName',
  props: ["user"],
  data() {
    return {};
  }
};
</script>

<style>
</style>