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

 import { goto } from '$app/navigation';

 import CardTheme from '$lib/components/CardTheme.svelte';

 import { my } from '$lib/stores/my.js';
 import { teams } from '$lib/stores/teams.js';
 import { myThemes, themes } from '$lib/stores/mythemes.js';
 import { settings } from '$lib/stores/settings.js';
</script>

<Container class="mt-3">
    {#if !$my}
        {#if $settings.allowRegistration}
            <Alert color="warning" class="text-justify" fade={false}>
                <strong>Votre équipe n'est pas encore enregistrée.</strong> Rendez-vous sur <a href="register">cette page</a> pour procéder à votre inscription.
            </Alert>
        {:else}
            <Alert color="danger" class="text-justify" fade={false}>
                <strong>Il semblerait qu'il y ait eu un problème lors de l'attribution de votre certificat.</strong> Veuillez vous signaler auprès de notre équipe afin de corriger ce problème.
            </Alert>
        {/if}
    {:else if !($my.team_id)}
        <Alert color="danger" fade={false}>
            <strong>Attention&nbsp;:</strong> puisqu'il s'agit de captures effectuées dans le but de découvrir si des actes malveillants ont été commis sur différents systèmes d'information, les contenus qui sont téléchargeables <em>peuvent</em> contenir du contenu malveillant&nbsp;!
        </Alert>
    {:else if $teams[$my.team_id]}
        <Alert color="info" class="text-justify" fade={false}>
            <strong>Félicitations {#if $my.members}{#each $my.members as member, index (member.id)}{#if member.id !== $my.members[0].id}{#if member.id === $my.members[$my.members.length - 1].id}&nbsp;et {:else}, {/if}{/if}{member.firstname} {member.lastname}{/each}&nbsp;{/if}!</strong> vous êtes maintenant connecté à l'espace de votre équipe <em>{$teams[$my.team_id].name}</em>.
            {#if !$settings.denyNameChange}Vous pouvez changer ce nom dès maintenant en vous rendant sur la page de <a href="edit">votre équipe</a>.{/if}
        </Alert>

        {#if !$settings.ignoreTeamMembers && $my.team_id && (!$my.members || !$my.members.length)}
            <Alert color="warning" class="text-justify" fade={false}>
                <strong>Les membres de votre équipe ne sont pas encore enregistrés.</strong> Passez voir l'équipe serveur pour corriger cela.
            </Alert>
        {/if}
    {/if}

    <Row cols={{ lg: 3, md: 2, sm: 1 }}>
        {#each $themes as th, index}
            <Col class="mb-3">
            <CardTheme
                class="{$my && $my.team_id && $myThemes[th.id].exercice_solved > 0?'border-light ':''}{th.exercice_coeff_max > 1?'border-success ':''}{th.locked?' border-secondary ':''}"
                theme={th}
                on:click={goto(`${th.urlid}`)}
            />
            </Col>
        {/each}
    </Row>
</Container>
