<script>
    import { Link } from 'svelte-navigator'
    import SideLink from './SideLink.svelte'
</script>

<nav id="sidebar" class="sidebar js-sidebar">
    <div class="sidebar-content js-simplebar">
        <Link class="sidebar-brand" to="/">
            <span class="fs-1">🚌</span>
            <span class="align-middle">
                Transporte
            </span>
        </Link>

        <ul class="sidebar-nav">
            <li class="sidebar-header">Pages</li>

            <SideLink to="/">
                <i class="align-middle bi bi-house fs-4"></i>
                <span class="align-middle">Inicio</span>
            </SideLink>

            <SideLink to="/perfil">
                <i class="align-middle bi bi-person-lines-fill fs-4"></i>
                <span class="align-middle">Perfil</span>
            </SideLink>

            <li class="sidebar-header">Mapas</li>

            <SideLink to="/mapas/paraderos">
                <i class="align-middle bi bi-map fs-4" />
                <span class="align-middle">Paraderos</span>
            </SideLink>
            
            <SideLink to="/mapas/rutas">
                <i class="align-middle bi bi-map fs-4" />
                <span class="align-middle">Rutas</span>
            </SideLink>
             
            <li class="sidebar-header">GTFS</li>
            
            <SideLink to="/gtfs-upload">
                <i class="align-middle bi bi-cloud-upload-fill fs-4" />                
                <span class="align-middle">Cargar Archivos GTFS</span>
            </SideLink>

            <SideLink to="/gtfs-archivo">
                <i class="align-middle bi bi-card-list fs-4" />                
                <span class="align-middle">Listado Archivos GTFS</span>
            </SideLink>

            <li class="sidebar-header">Mantenedores</li>

            <SideLink to="/paraderos">
                <i class="align-middle bi bi-bus-front fs-4" />
                <span class="align-middle">Paraderos</span>
            </SideLink>

            <SideLink to="/aplicaciones">
                <i class="align-middle bi bi-terminal fs-4" />
                <span class="align-middle">Aplicaciones</span>
            </SideLink>

            <SideLink to="/red-transporte">
                <i class="align-middle bi bi-bezier2 fs-4"></i>
                <span class="align-middle">Red de Transporte</span>
            </SideLink>

            <SideLink to="/operadores">
                <i class="align-middle bi bi-person-workspace fs-4"></i>
                <span class="align-middle">Operadores</span>
            </SideLink>

            <SideLink to="/rutas">
                <i class="align-middle bi bi-sign-turn-right fs-4"></i>
                <span class="align-middle">Servicios de Buses</span>
            </SideLink>

            <SideLink to="/comunas">
                <i class="align-middle bi bi-geo-alt fs-4" />
                <span class="align-middle">Comunas</span>
            </SideLink>

            <SideLink to="/usuarios">
                <i class="align-middle bi bi-people fs-4" />
                <span class="align-middle">Usuarios</span>
            </SideLink>

            <SideLink to="/personas">
                <i class="align-middle bi bi-people fs-4" />
                <span class="align-middle">Personas</span>
            </SideLink>

            <SideLink to="/roles">
                <i class="align-middle bi bi-person-badge fs-4" />
                <span class="align-middle">Roles</span>
            </SideLink>

        </ul>

    </div>
</nav>