<script>
 import { page } from '$app/stores'

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

 import { auth, gitlab, version } from '$lib/stores/auth';

 export let activemenu = "";
 $: {
     const path = $page.url.href.substr(document.baseURI.length-1).split("/");
     if (path.length > 1) {
         activemenu = path[1];
     } else {
         activemenu = "";
     }
 }
</script>

<Navbar color="dark" dark expand="xs">
    <NavbarBrand href=".">
        <img src="../img/fic.png" alt="FIC" height="26">
        QA
    </NavbarBrand>
    <Nav navbar>
        <NavItem>
            <NavLink
                href="."
                active={activemenu === ''}
            >
                <Icon name="house-door" />
                <span class="d-none d-md-inline">Accueil</span>
            </NavLink>
        </NavItem>
        <NavItem>
            <NavLink
                href="themes"
                active={activemenu === 'themes'}
            >
                <Icon name="box-seam" />
                <span class="d-none d-md-inline">Scénarios</span>
            </NavLink>
        </NavItem>
        <NavItem>
            <NavLink
                href="exercices"
                active={activemenu === 'exercices'}
            >
                <Icon name="bar-chart-steps" />
                <span class="d-none d-md-inline">Étapes</span>
            </NavLink>
        </NavItem>
        {#if $auth && $auth.is_manager}
        <NavItem>
            <NavLink
                href="teams"
                active={activemenu === 'teams'}
            >
                <Icon name="people" />
                <span class="d-none d-md-inline">Équipes</span>
            </NavLink>
        </NavItem>
        <NavItem>
            <NavLink
                href="repositories"
                active={activemenu === 'repositories'}
            >
                <Icon name="archive" />
                <span class="d-none d-md-inline">Dépôts</span>
            </NavLink>
        </NavItem>
        {/if}
    </Nav>
    <Nav class="ms-auto text-light" navbar>
        {#if $gitlab}
            <Icon name="gitlab" />
        {:else}
            <Button
                color="warning"
                size="sm"
                href={"auth/gitlab?next=" + encodeURIComponent($page.url.pathname) }
            >
                <Icon name="gitlab" /> Connexion GitLab
            </Button>
        {/if}
        <NavItem class="ms-2 text-truncate">
	    v{$version.version}
            {#if $auth}&ndash; Logged as {$auth.name} (team #{$auth.id_team}){/if}
        </NavItem>
    </Nav>
</Navbar>
