siimee/frontend/src/components/ProfileCard.vue

<template lang="pug">
w-card.profile-card-list--card.xs12.pa12
    header.xs12.w-flex.column.center
        NamePlate(
            :pid="card.pid"
            :name="card.name"
            :pronouns="card.pronouns"
            :role="card.role"
            :is-list="isList"
            :is-paired="isPaired"
        )
        
        w-button.text-upper.xs12.pa6(v-if="isPaired && !isList")
            w-icon(xl).mr1 mdi mdi-chat
            | start chat
        
        template(v-if="!isList")
            SummaryBar(
                :is-tab="isPaired"
                :tab-content="card.summary"
            )
            TagList(v-if="!isPaired || isList")

    article.xs12.w-flex.column.justify-space-between
        AspectBar(
            v-if="!isPaired || isList"
            v-for="aspect in aspects"
            :labels="aspect.labels"
            :percentage="aspect.percentage"
            :key="aspect.name"
        )
    
    footer(v-if="!isList && !isPaired")
        .pa12
            p {{ card.summary.about.tab }}
        PairingButton(v-if="!isPaired")
</template>

<script setup>
import { ref } from 'vue'
import NamePlate from './NamePlate.vue'
import AspectBar from './AspectBar.vue'
import SummaryBar from './SummaryBar.vue'
import TagList from './TagList.vue'
import PairingButton from './PairingButton.vue'

const isPaired = ref(true)
// const isPaired = ref(false)

const props = defineProps({
    card: {
        type: Object,
        required: true,
    },
    aspects: {
        type: Array,
        required: true,
    },
    isList: {
        type: Boolean,
        required: false,
        default: true,
    },
})
</script>

<style lang="sass">
.profile-card-list--card
    background-color: #000
    color: #fff
    header > .w-button
        background-color: #116006
        color: #fff
</style>