<script>
 import { base } from '$app/paths';

 import {
     Badge,
     Button,
     ButtonGroup,
     Col,
     Collapse,
     Container,
     Icon,
     Navbar,
     NavbarToggler,
     NavbarBrand,
     Nav,
     NavItem,
     NavLink,
     Progress,
     Row,
 } from 'sveltestrap';

 import { challengeInfo } from '$lib/stores/challengeinfo.js';
 import { my } from '$lib/stores/my.js';
 import { teams } from '$lib/stores/teams.js';
 import { settings, time } from '$lib/stores/settings.js';

 import Clock from './Clock.svelte';
 import HeaderClock from './HeaderClock.svelte';
 import HeaderIssues from './HeaderIssues.svelte';
 import HeaderPartners from './HeaderPartners.svelte';
 import NavThemes from './NavThemes.svelte';
 import NavTags from './NavTags.svelte';

 let isOpen = false;

 function handleUpdate(event) {
     isOpen = event.detail.isOpen;
 }
</script>

{#if !$settings.hide_header}
<div class="container-fluid bg-dark" style="max-height: 15vh;">
    <div style="height: 100%; max-height: inherit; width: 98%; position: absolute">
        <Container class="d-flex justify-content-center align-items-center text-light" style="height: 100%; max-height: inherit">
            <HeaderClock />
        </Container>
    </div>
    <Container class="d-flex justify-content-between p-1" style="max-height: inherit">
        <a href="." style="max-width: 50%">
            {#if $challengeInfo && $challengeInfo.main_logo}
                {#each $challengeInfo.main_logo as logo, i}
                    <img src={logo.replace('$FILES$', base + '/files/')} alt={'Logo principal #' + i} class={'h-100' + (i > 0?' d-none d-md-inline ms-2':'')}>
                {/each}
            {/if}
        </a>
        <HeaderPartners />
    </Container>
</div>
{/if}
<div class="sticky-top">
<Navbar color="dark" dark expand="md">
    <NavbarToggler on:click={() => (isOpen = !isOpen)} />
    <Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
        <Nav navbar>
            <NavItem>
                <NavLink href=".">
                    <Icon name="box-seam" />
                    Accueil
                </NavLink>
            </NavItem>
            <NavThemes />
            <NavTags />
            {#if $settings && $settings.start >= $settings.recvTime && $teams && Object.keys($teams).length}
            <NavItem>
                <NavLink href="rank">
                    <Icon name="sort-down" />
                    Classement
                </NavLink>
            </NavItem>
            {/if}
            <HeaderIssues />
            <NavItem>
                <NavLink href="rules">
                    <Icon name="signpost-split" />
                    Aide
                </NavLink>
            </NavItem>
        </Nav>
        {#if $settings.hide_header && $settings.end - $settings.start > 0}
            <Nav class="ms-auto text-light display-6" navbar>
                <Clock />
            </Nav>
        {/if}
        <Nav class="ms-auto text-light" navbar>
            {#if $my && $my.team_id}
                <NavItem>
                    {Math.round($my.score*100)/100} {$my.score === 1 ? 'point' : 'points'}
                    {#if $teams && $teams[$my.team_id] && $teams[$my.team_id].rank}
                        &ndash; {$teams[$my.team_id].rank}<sup>e</sup> sur {Object.keys($teams).length}
                    {/if}
                </NavItem>
            {/if}
            <NavItem class="ms-2">
                {#if !$my}
                    <Badge href="register" color="warning">
	                Inscription
	            </Badge>
                {:else if $my.team_id}
                    {#if $teams && $teams[$my.team_id]}
                        <Badge href="edit" style="background-color: {$teams[$my.team_id].color} !important; color: {$teams[$my.team_id].color};">
	                    <span class="teamname">{$my.name}</span>
	                </Badge>
                    {:else}
                        <Badge href="edit" color="info">
	                    <span class="teamname">{$my.name}</span>
	                </Badge>
                    {/if}
                {/if}
            </NavItem>
        </Nav>
    </Collapse>
</Navbar>
<Progress value={$time.progression * 100} color="info" style="height: 5px; border-radius: 0;" />
</div>

<style>
 .teamname {
     -webkit-filter: invert(100%);
     filter: invert(100%);
 }
</style>
