<script>
 import {
     Badge,
     Button,
     ButtonGroup,
     Col,
     Collapse,
     Container,
     Dropdown,
     DropdownItem,
     DropdownMenu,
     DropdownToggle,
     Icon,
     Navbar,
     NavbarToggler,
     NavbarBrand,
     Nav,
     NavItem,
     NavLink,
     Progress,
     Row,
 } from 'sveltestrap';

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

 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>

<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=".">
            <img src="img/fic.png" alt="Forum International de la Cybersécurité" class="h-100">
        </a>
        <HeaderPartners />
    </Container>
</div>
<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.end - $settings.start >= 0 && $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>
        <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].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 && $teams}
                    <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>
                {/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>
