<nav class="navbar navbar-default" style="border-radius: 0px; background-color: #fff;">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#space-nav" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">
                <img alt="Brand" src="/img/logo.png" width=20 height=20>
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="space-nav">

            <ul class="nav navbar-nav">
                <li><a href="/">URLooker</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li><a href="/strategy/{{.Id}}/edit">Edit</a></li>
            </ul>
            <ul class="nav navbar-nav">
            <li><a href="#">{{.Url}}</a></li>
            </ul>
            


            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="/teams">
                        <span class="glyphicon glyphicon-user"></span>
                          team
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        {{.UserName}} 
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript:show_profile_page()">
                                <span class="glyphicon glyphicon-user"></span>
                                personal info
                            </a>
                        </li>
                        <li>
                            <a href="javascript:show_chpwd_page()">
                                 <span class="glyphicon glyphicon-lock"></span>
                                change password
                            </a>
                        </li>
                        <li role="separator" class="divider"></li>
                        <li>
                            <a href="https://github.com/710leo/urlooker" target="_blank">
                                <span class="glyphicon glyphicon-question-sign"></span>
                                help
                            </a>
                        </li>
                        <li>
                            <a href="/auth/logout">
                                <span class="glyphicon glyphicon-off"></span>
                                logout
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>


        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="modal fade" id="profile_div">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">personal info</h4>
            </div>
            <div class="modal-body">
              {{ template "inc/profile" }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">colse</button>
                <button type="button" class="btn btn-success" onclick="update_profile();">update</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

{{ template "inc/chpwd" }}
