<template>
  <toolbar-component pageTitle="Member Profile" />
  <q-page padding>
    <q-list bordered>
      <q-separator />
      <q-item>
        <q-item-section avatar>
          <q-avatar icon="person" />
        </q-item-section>
        <q-item-section>
          Ricky Gervais
          <q-item-label caption>Name</q-item-label>
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section avatar>
          <q-avatar icon="numbers" />
        </q-item-section>
        <q-item-section>
          123456
          <q-item-label caption>Member ID</q-item-label>
        </q-item-section>
      </q-item>
      <q-separator />
      <q-item>
        <q-item-section>
          <q-item-label overline>Certifications</q-item-label>
          <q-chip square icon="verified" color="green" text-color="white"
            >J/27</q-chip
          >
          <q-chip square icon="verified" color="blue" text-color="white"
            >Capri25</q-chip
          >
          <q-chip square icon="verified" color="red" text-color="white"
            >Night</q-chip
          >
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>

<script setup lang="ts">
import ToolbarComponent from 'src/components/ToolbarComponent.vue';
</script>
