{{# if login }}
    {{# if user.email}}
        <nav id="mainNav" class="navbar navbar-default navbar-fixed-top user-navbar" >
    {{ else }}
        <nav id="mainNav" class="navbar navbar-default navbar-fixed-top admin-navbar" >
    {{/if}}
{{ else }}
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top " >
{{/if}}

    <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="#bs-example-navbar-collapse-1">
                <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 page-scroll" href="/">Solutions.Repo</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse"
             id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">

                <li class="dropdown">
                    <a href="#"
                       class="dropdown-toggle"
                       data-toggle="dropdown"
                       role="button" aria-haspopup="true"
                       aria-expanded="false">Courses <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu">
                            <a tabindex="-1" href="#">First Year</a>
                            <ul class="dropdown-menu scroll-menu">
                                <li><a tabindex="-1" href="/exams/csc108">CSC108</a></li>
                                <li><a href="/exams/csc120">CSC120</a></li>
                                <li><a href="/exams/csc121">CSC121</a></li>
                                <li><a href="/exams/csc148">CSC148</a></li>
                                <li><a href="/exams/csc165">CSC165</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu">
                            <a tabindex="-1" href="#">Second Year</a>
                            <ul class="dropdown-menu scroll-menu">
                                <li><a tabindex="-1" href="/exams/csc204">CSC204</a></li>
                                <li><a href="/exams/csc207">CSC207</a></li>
                                <li><a href="/exams/csc209">CSC209</a></li>
                                <li><a href="/exams/csc236">CSC236</a></li>
                                <li><a href="/exams/csc240">CSC240</a></li>
                                <li><a href="/exams/csc258">CSC258</a></li>
                                <li><a href="/exams/csc263">CSC263</a></li>
                                <li><a href="/exams/csc265">CSC265</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu">
                            <a tabindex="-1" href="#">Third Year</a>
                            <ul class="dropdown-menu scroll-menu">
                                <li><a tabindex="-1" href="/exams/csc300">CSC300</a></li>
                                <li><a href="/exams/csc301">CSC301</a></li>
                                <li><a href="/exams/csc302">CSC302</a></li>
                                <li><a href="/exams/csc304">CSC304</a></li>
                                <li><a href="/exams/csc309">CSC309</a></li>
                                <li><a href="/exams/csc310">CSC310</a></li>
                                <li><a href="/exams/csc318">CSC318</a></li>
                                <li><a href="/exams/csc320">CSC320</a></li>
                                <li><a href="/exams/csc321">CSC321</a></li>
                                <li><a href="/exams/csc324">CSC324</a></li>
                                <li><a href="/exams/csc336">CSC336</a></li>
                                <li><a href="/exams/csc343">CSC343</a></li>
                                <li><a href="/exams/csc358">CSC358</a></li>
                                <li><a href="/exams/csc369">CSC369</a></li>
                                <li><a href="/exams/csc373">CSC373</a></li>
                                <li><a href="/exams/csc384">CSC384</a></li>
                                <li><a href="/exams/csc385">CSC385</a></li>
                                <li><a href="/exams/csc396">CSC396</a></li>

                            </ul>
                        </li>
                        <li class="dropdown-submenu ">
                            <a tabindex="-1" href="#">Fourth Year</a>
                            <ul class="dropdown-menu scroll-menu">
                                <li><a tabindex="-1" href="/exams/csc401">CSC401</a></li>
                                <li><a href="/exams/csc404">CSC404</a></li>
                                <li><a href="/exams/csc410">CSC410</a></li>
                                <li><a href="/exams/csc411">CSC411</a></li>
                                <li><a href="/exams/csc412">CSC412</a></li>
                                <li><a href="/exams/csc418">CSC418</a></li>
                                <li><a href="/exams/csc420">CSC420</a></li>
                                <li><a href="/exams/csc428">CSC428</a></li>
                                <li><a href="/exams/csc436">CSC436</a></li>
                                <li><a href="/exams/csc438">CSC438</a></li>
                                <li><a href="/exams/csc443">CSC443</a></li>
                                <li><a href="/exams/csc446">CSC446</a></li>
                                <li><a href="/exams/csc448">CSC448</a></li>
                                <li><a href="/exams/csc454">CSC454</a></li>
                                <li><a href="/exams/csc456">CSC456</a></li>
                                <li><a href="/exams/csc458">CSC458</a></li>
                                <li><a href="/exams/csc463">CSC463</a></li>
                                <li><a href="/exams/csc465">CSC465</a></li>
                                <li><a href="/exams/csc466">CSC466</a></li>
                                <li><a href="/exams/csc469">CSC469</a></li>
                                <li><a href="/exams/csc473">CSC473</a></li>
                                <li><a href="/exams/csc485">CSC485</a></li>
                                <li><a href="/exams/csc486">CSC486</a></li>
                                <li><a href="/exams/csc488">CSC488</a></li>
                                <li><a href="/exams/csc489">CSC489</a></li>
                                <li><a href="/exams/csc490">CSC490</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                {{# if login }}
                    {{# if user.email }}
                        <li><a href="/user/user_profile">Profile Page</a></li>
                    {{else}}
                        <li><a href="/admin">Admin Panel</a></li>
                    {{/if}}
                {{ else }}
                    <li><a href="/user/signin">Sign In</a></li>
                {{/if}}

                <!--<li><a href="#" data-toggle="modal" data-target=".registration-window">Sign up</a></li>-->
                {{# if login }}
                    <li><a href="/user/logout">Logout</a> </li>
                {{ else }}
                    <li><a href="/user/signup" >Sign up</a></li>
                    <li><a href="/admin/signin">Admin</a></li>
                {{/if}}

            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav> <!-- Ignore error, opening tag will be generated at render time -->

<article class="modal fade signin-window">
    <div class="modal-dialog">
        <div class="modal-content">

            <section class="modal-body">
                <div class="row">
                    <div class="slate signin-page col-sm-12 col-sm-offset-0 col-md-12 col-md-offset-0">
                        <div class="container">
                            {{# if success }}
                                <section class="alert alert-success">
                                    <!-- Change those to banners later -->
                                    <h2>Signup Successful!</h2>
                                </section>
                            {{ else }}
                                {{# if errors }}
                                    <section class="alert alert-danger">
                                        <ul>
                                            {{# each errors }}
                                                <li>{{ this.msg }}</li>
                                            {{/each}}
                                        </ul>
                                    </section>
                                {{/if}}
                            {{/if}}
                            {{#if flashMsg}}
                                <section class="alert alert-danger">
                                    {{flashMsg}}
                                </section>
                            {{/if}}

                            <h3 class="signin"><hr><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In<hr></h3>
                            <form action="/user/signin" method="post">
                                <div class="form-group signin-group">
                                    <div class="input-group input-group-lg">
                                        <div class="input-group-addon addon-username">
                                            <i class="fa fa-envelope" aria-hidden="true"></i>
                                        </div>
                                        <input type="text" class="form-control input-username" placeholder="email" name="usrname" required>
                                    </div>
                                    <div class="input-group input-group-lg">
                                        <div class="input-group-addon addon-password">
                                            <i class="fa fa-key" aria-hidden="true"></i>
                                        </div>
                                        <input type="password" class="form-control input-lg input-password" placeholder="password" name="password" required>
                                    </div>
                                </div>
                                <input type="hidden" name="_csrf" value="{{ csrfToken }}">
                                <button class="signin-btn signin-insite btn-lg btn btn-primary btn-block"><span>Sign In</span></button>
                            </form>


                            <h4 class="signin signin-or">or</h4>
                            <a href="/auth/facebook" class="signin-fb signin-btn btn-lg btn btn-primary btn-block"><span>
                        <span class="fa fa-facebook"> </span>   Sign In with Facebook</span></a>

                        </div>
                    </div>
                </div>

            </section>

        </div>
    </div>
</article>