<script context="module">
 export async function load({ page, fetch, session, context }) {
     return {
         props: {
             refresh_my: context.refresh_my,
         }
     }
 }
</script>

<script>
 import {
     Alert,
     Badge,
     Card,
     Col,
     Container,
     Icon,
     Row,
 } from 'sveltestrap';

 import TeamChangeName from '../components/TeamChangeName.svelte';
 import TeamMembers from '../components/TeamMembers.svelte';

 import { my } from '../stores/my.js';
 import { settings } from '../stores/settings.js';

 export let refresh_my;
</script>

<Container class="my-3">
    <h1 class="text-dark">
        Votre équipe
        {#if $my}
            <small class="text-muted">{$my.name}</small>
        {/if}
    </h1>

    {#if $my}
        <Row>
            <Col md>
            <TeamMembers members={$my.members} />
            {#if !$settings.denyNameChange}
                <TeamChangeName {refresh_my} />
            {/if}
            </Col>
            <Col md>
            <!--BrowserNotify /-->
            </Col>
        </Row>
    {:else}
        <Alert color="danger">
            <strong>Vous n'avez pas encore d'équipe&nbsp;!</strong>
            Rendez-vous sur <a href="/register">la page d'inscription</a> pour plus d'information.
        </Alert>
    {/if}
</Container>
