<%@ taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page session="true"%>

<header>
    <div class="header-top" >
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="margin-bottom: 0" >
            <div class="container" >
                <div class="navbar-header" >
                    <a class="navbar-brand" href="/" >
                        <i class="glyphicon glyphicon-king" data-original-title title ></i>
                        <strong>Scrum</strong>Friend
                    </a>
                </div>

                <div class="logout-form">
                    <c:url value="/logout" var="logoutUrl" />
                    <form id="logout" action="${logoutUrl}" method="post" >
                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
                    </form>
                </div>

                <c:if test="${pageContext.request.userPrincipal.name != null}">
                    <ul class="nav navbar-nav navbar-right top-menu" >
                        <li class="dropdown" >
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#" >
                                <span class="username" >${pageContext.request.userPrincipal.name}</span>
                                <b class="caret" ></b>
                            </a>

                                <ul class="dropdown-menu" >
                                    <div class="log-arrow-up" ></div>
                                    <li>
                                        <a href="javascript:document.getElementById('logout').submit()" class="logout-link" >
                                            <i class="fa fa-key" data-original-title title ></i>
                                            Log Out
                                        </a>
                                    </li>
                                </ul>
                        </li>
                    </ul>
                </c:if>
            </div>
        </nav>
    </div>

    <div class="header-bottom" >
        <div class="content-nav-bottom">
            <nav class="navbar" role="navigation">
                <div class="container">
                    <div class="collapse navbar-collapse navbar-ex1-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav" id="menu-list">
                            <li class="active" id="projects-tab">
                                <a href="projects">PROJECTS</a>
                            </li>

                            <li class="active" id="members-tab">
                                <a href="members">MEMBERS</a>
                            </li>

                            <li class="active" id="backlog-tab">
                                <a href="backlog">PRODUCT BACKLOG</a>
                            </li>

                            <li class="active" id="sprints-tab">
                                <a href="sprints">SPRINTS</a>
                            </li>

                            <li class="active" id="statistics-tab">
                                <a href="statistics">STATISTICS</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</header>