<template>
  <v-expansion-panel>
    <v-expansion-panel-title>
      <div class="d-flex flex-row">
        <div class="charactername">{{ character.characterName || "Unkown Character"}}</div>
        <div class="playername"> ( {{ character.playerName || "Unkown Player"}} )</div>
      </div>
    </v-expansion-panel-title>
    <v-expansion-panel-text>
      <div>Alias: {{ character.characterAlias }}</div>
      <slot></slot>
    </v-expansion-panel-text>
  </v-expansion-panel>
</template>

<style>
	.charactername {
		font-weight: bold;
		margin-right: 10px;
	}
</style>

<script setup lang="ts">
import { defineProps } from 'vue'
import { Character, ListCharacterRequest } from '../proto/character'

const props = defineProps<{ character?: Character }>()
</script>
