<!DOCTYPE html>
{% raw %}
<html lang="en" ng-app="papaye" ng-controller="MainController">
    <head>
        <title ng-model="main.title">Papaye Index - {{ main.title }}</title>
{% endraw %}
        {# Styles  #}
        {% assets "external_css" %}
        <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
        {% endassets %}
        {% assets "papaye_css" %}
        <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
        {% endassets %}
        {% assets "papaye_fonts" %}
        <link type="application/x-font-woff" href="{{ ASSET_URL }}" />
        {% endassets %}
{% raw %}
    </head>
    <body>

        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Papaye</a>
                </div>

                 <ul class="nav navbar-nav" role='tablist'>
                     <li ng-repeat="page in pages" ng-class="{ active: activePage == page[0] }"><a href="{{ page[1] }}">{{ page[0] }}</a></li>

                </ul>

                <ul class="nav navbar-nav pull-right" ng-show="login.username">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-user"></i> {{ login.username }}<span class="caret"></span></a>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a ng-click="logout()">Logout</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="container" ng-view>
        </div>
    </body>
{% endraw %}
    {# Scripts #}
    {% assets "papaye_js" %}
     <script type="text/javascript" src="{{ ASSET_URL }}"></script>
    {% endassets %}
</html>
