<script>
 import {
     Card,
     CardHeader,
     CardBody,
     Icon,
     ListGroup,
     ListGroupItem,
 } from '@sveltestrap/sveltestrap';

 export let members = [];
</script>

<Card class="mb-3">
    <CardHeader>
        <Icon name="people-fill" />
        Membres de l'équipe
    </CardHeader>
    {#if members && members.length}
        <ListGroup>
            {#each members as member (member.id)}
                <ListGroupItem class="list-group-item-action">
                    {member.firstname}
                    {#if member.nickname}
                        <span style="font-style: italic">{member.nickname}</span>
                    {/if}
                    <span style="font-variant: small-caps;">{member.lastname}</span>
                    {#if member.company}&ndash; {member.company}{/if}
                </ListGroupItem>
            {/each}
        </ListGroup>
    {:else}
        <CardBody>
            Passez voir l'équipe d'organisation pour compléter ces informations.
        </CardBody>
    {/if}
</Card>
