nav.menu(
    ng-if="vm.project"
    ng-class="{'menu-fixed': vm.fixed}",
)
    .menu-container
        ul.main-nav
            li#nav-search
                a(
                    href=""
                    ng-click="vm.search()"
                    ng-class="{active: vm.active == 'search'}"
                    aria-label="{{'PROJECT.SECTION.SEARCH' | translate}}"
                    tabindex="1"
                )
                    tg-svg(svg-icon="icon-search")
                    span.helper(translate="PROJECT.SECTION.SEARCH")

            li#nav-timeline
                a(
                    tg-nav="project:project=vm.project.get('slug')"
                    ng-class="{active: vm.active == 'project-timeline'}"
                    aria-label="{{'PROJECT.SECTION.TIMELINE' | translate}}"
                    tabindex="2"
                )
                    tg-svg(svg-icon="icon-timeline")
                    span.helper(translate="PROJECT.SECTION.TIMELINE")

            li#nav-epics(ng-if="vm.menu.get('epics')")
                a(
                    tg-nav="project-epics:project=vm.project.get('slug')"
                    ng-class="{active: vm.active == 'epics'}"
                    aria-label="{{'EPICS.TITLE' | translate}}"
                    tabindex="2"
                )
                    tg-svg(svg-icon="icon-epics")
                    span.helper(translate="EPICS.TITLE")

            li#nav-backlog(
                ng-if="vm.menu.get('backlog')"
                ng-mouseover="backlogHover = true"
                ng-mouseleave="backlogHover = false"
                ng-init="backlogHover = false"
            )
                a(
                    tg-nav="project-backlog:project=vm.project.get('slug')"
                    ng-class="{active: vm.active == 'backlog'}"
                    aria-label="{{'PROJECT.SECTION.BACKLOG' | translate}}"
                    tabindex="2"
                )
                    tg-svg(svg-icon="icon-scrum")

                span.backlog-sprints-menu(ng-show="backlogHover")
                  span(translate="PROJECT.SECTION.BACKLOG")
                  a(
                      tg-repeat="sprint in vm.project.get('milestones') track by sprint.get('id')"
                      ng-if="!sprint.get('closed')"
                      tg-nav="project-taskboard:project=vm.project.get('slug'),sprint=sprint.get('slug')"
                  ) {{::sprint.get('name')}}

            li#nav-kanban(ng-if="vm.menu.get('kanban')")
                a(
                    tg-nav="project-kanban:project=vm.project.get('slug')"
                    ng-class="{active: vm.active == 'kanban'}"
                    aria-label="{{'PROJECT.SECTION.KANBAN' | translate}}"
                    tabindex="3"
                )
                    tg-svg(svg-icon="icon-kanban")
                    span.helper(translate="PROJECT.SECTION.KANBAN")

            li#nav-issues(ng-if="vm.menu.get('issues')")
                a(
                    tg-nav="project-issues:project=vm.project.get('slug')"
                    ng-class="{active: vm.active == 'issues'}"
                    aria-label="{{'PROJECT.SECTION.ISSUES' | translate}}"
                    tabindex="4"
                )
                    tg-svg(svg-icon="icon-issues")
                    span.helper(translate="PROJECT.SECTION.ISSUES")

            li#nav-wiki(ng-if="vm.menu.get('wiki')")
                a(
                    tg-nav="project-wiki:project=vm.project.get('slug')"
                    ng-class="{active: vm.active == 'wiki'}"
                    aria-label="{{'PROJECT.SECTION.WIKI' | translate}}"
                    tabindex="5"
                )
                    tg-svg(svg-icon="icon-wiki")
                    span.helper(translate="PROJECT.SECTION.WIKI")

            li#nav-team
                a(
                    tg-nav="project-team:project=vm.project.get('slug')"
                    ng-class="{active: vm.active == 'team'}"
                    aria-label="{{'PROJECT.SECTION.TEAM' | translate}}"
                    tabindex="6"
                )
                    tg-svg(svg-icon="icon-team")
                    span.helper(translate="PROJECT.SECTION.TEAM")

            li#nav-video(ng-if="vm.project.get('videoconferenceUrl')")
                a(
                    ng-href="{{vm.project.get('videoconferenceUrl')}}"
                    target="_blank"
                    aria-label="{{'PROJECT.SECTION.MEETUP' | translate}}"
                    tabindex="7"
                )
                    tg-svg(svg-icon="icon-bubble")
                    span.helper(translate="PROJECT.SECTION.MEETUP")

            li#nav-admin(ng-if="vm.project.get('i_am_admin')")
                a(
                    tg-nav="project-admin-home:project=vm.project.get('slug')"
                    ng-class="{active: vm.active == 'admin'}"
                    aria-label="{{'PROJECT.SECTION.ADMIN' | translate}}"
                    tabindex="8"
                )
                    tg-svg(svg-icon="icon-settings")
                    span.helper(translate="PROJECT.SECTION.ADMIN")
