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

 import ScoreGrid from '$lib/components/ScoreGrid.svelte';
 import TeamChangeName from '$lib/components/TeamChangeName.svelte';
 import TeamChangePassword from '$lib/components/TeamChangePassword.svelte';
 import TeamMembers from '$lib/components/TeamMembers.svelte';

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

 // Override theme color
 document.body.style.backgroundColor = "";
</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 />
            {/if}
            {#if $settings.acceptNewIssue}
                <TeamChangePassword />
            {/if}
            </Col>
            <Col md>
            <Card>
                <CardHeader>
                    <Icon name="table" />
                    Détail du score
                </CardHeader>
                <ScoreGrid />
            </Card>
            <!--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>
