<script>
 import { createEventDispatcher } from 'svelte';

 import {
     Button,
     Icon,
     Row,
 } from '@sveltestrap/sveltestrap';

 const dispatch = createEventDispatcher();

 export let member = {};
 export let canDelete = false;
</script>

<Row class="form-group my-3">
    <div class="col-sm">
        <!-- svelte-ignore a11y-autofocus -->
	<input type="text" class="form-control" bind:value={member.lastname} placeholder="Nom" autofocus>
    </div>
    <div class="col-sm">
	<input type="text" class="form-control" bind:value={member.firstname} placeholder="Prénom">
    </div>
    <div class="col-sm">
	<input type="text" class="form-control" bind:value={member.nickname} placeholder="Pseudo">
    </div>
    <div class="col-sm">
	<input type="text" class="form-control" bind:value={member.company} placeholder="Entreprise">
    </div>
    {#if canDelete}
        <div class="col-sm-auto">
	    <Button color="danger" type="button" on:click={dispatch('delete', member)}>
                <Icon name="trash" />
	    </Button>
        </div>
    {/if}
</Row>
