<!DOCTYPE html>
<html ng-app='app'>
  <head>
    <title>Resources</title>
    <base href='/' />
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='description' content=''>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>

    <link rel="icon" href="img/favicon.png"/>

    <link type='text/css' rel='stylesheet' href='css/bootstrap.min.css'>
    <link type='text/css' rel='stylesheet' href='css/angular-material.min.css'>
    <link type='text/css' rel='stylesheet' href='css/rainbow.css'>
    <link type='text/css' rel='stylesheet' href='css/app.css'>

    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js'></script>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js'></script>
    <script type='text/javascript' src='js/angular-ui-router.min.js'></script>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js'></script>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js'></script>
    <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
    <script type='text/javascript' src='js/angular-breadcrumb.min.js'></script>
    <script type='text/javascript' src='js/ngtimeago.js'></script>
    <script type='text/javascript' src='js/svg4everybody.min.js'></script>
    <script type='text/javascript' src='js/typeahead.js'></script>
    <script type='text/javascript' src='js/bootstrap.min.js'></script>
    <script type='text/javascript' src='js/highlight.pack.js'></script>
    <script type='text/javascript' src='js/app.js?v2'></script>
    <script>
        svg4everybody();
    </script>
    <!-- Google Analytics -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-47341307-2', 'auto');
      ga('send', 'pageview');
    </script>
    <!-- End Google Analytics -->
  </head>

    <body ng-controller='mainCtrl as main'>

    <div ng-controller='alertsCtrl' ng-cloak>
      <header>
        <div class='logo-wrap'>
          <a class="a-logo" href='/'><img src="/img/skyhook-logo.svg"></a>
        </div>
        <div class="header-right-padding"></div>

        <!--
                <div class="user-nav" ng-controller='alertsCtrl' ng-if='user'>
                  <li class='user-email ' ng-class="{'active': userPreference }" ng-click='toggleNavUser($event)'>{{user.user_email}}<i class='fa fa-angle-down'></i>
                  </li><li class='user-alert' ng-class="{'active': userAlerts }" ng-click='toggleNavAlerts($event)'>
                      <div ng-show='count > 0' class="number">{{ count }}</div>
                      <svg><use xlink:href="svg/svg.svg#bell"></use></svg>
                  </li>

                  <div class="user-box" ng-click='$event.stopPropagation()' ng-class="{'active': userPreference }">
                    <li ng-click="url('{{ mysky_host }}/profile/edit')" class='profile'><svg><use xlink:href="svg/svg.svg#profile"></use></svg>My Profile</li>
                    <li ng-click="url('{{ mysky_host }}/index/logout')" class='singOut'><svg class='signout'><use xlink:href="svg/svg.svg#signout"></use></svg>Sign Out</li>
                  </div>

                  <div class="user-alert-box"  ng-click='$event.stopPropagation()' ng-style="resizeWithOffset(100)" ng-class="{'active': userAlerts }" resize>
                    <ul>
                      <li ng-repeat='alert in alerts' class='animation'>
                        <svg class="icon"><use xlink:href="" ng-href="svg/svg.svg{{'#' + alert.icon}}" ></use></svg>
                        <div ng-if='alert.ctaLink'><a ng-href='{{ alert.ctaLink }}'>{{ alert.textBody }}</a></div>
                        <div ng-if='!alert.ctaLink'>{{ alert.textBody }}</div>
                        <div class="delete-container" ng-click='clearAlert(alert, $index)'>
                          <svg class='delete'><use xlink:href="svg/svg.svg#x"></use></svg>
                        </div>
                        <div class="when">{{ alert.startDate | timeago }}</div>
                      </li>
                    </ul>
                  </div>
                </div>
                <nav>
                  <a href='{{ mysky_host }}/projects'> Projects</a>
                  <a href='/'>Resources</a>
                  <a href='/wiki/downloads/'>Downloads</a>
                  <a ng-if='user' href='{{ mysky_host }}/support'>Support</a>
                </nav>

                <div ng-class="{'active': mobilMenu }" ng-click='mobilMenuToggle($event)' class="navbar-toggle">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </div>
        -->


        <div ng-class="{'active': mobilMenu }" ng-click='mobilMenuToggle($event)' class="navbar-toggle">
          <div class="burger-button"><img ng-src="{{mobilMenu && '/svg/burger-menu-close.svg' || '/svg/burger-menu.svg'}}" ></div>
        </div>

        <div class="user-nav" ng-if='user'>
          <div class='user-alert' ng-show='alerts' ng-class="{'active': alerts }" ng-click='toggleNavAlerts($event)'>
            <div ng-show='alerts.length > 0' class="number">{{ alerts.length }}</div>
            <svg><use xlink:href="/svg/svg.svg#bell"></use></svg>
          </div>
          <div class="user-alert-box"  ng-click='$event.stopPropagation()' ng-style="resizeWithOffset(100)" ng-class="{'active': userAlerts }" resize>
            <ul>
              <li ng-repeat='alert in alerts' class='animation' ng-switch on="alert.id">
                <div ng-switch-default>
                  <svg class="icon"><use xlink:href="" ng-href="/svg/svg.svg{{'#' + alert.icon}}" ></use></svg>
                  <div ng-if='alert.ctaLink'><a ng-href='{{ alert.ctaLink }}' target="_blank">{{ alert.textBody }}</a></div>
                  <div class="alert-msg" ng-if='!alert.ctaLink'>{{ alert.textBody }}</div>
                  <div class="delete-container" ng-click='clearAlert(alert, $index)'>
                    <svg class='delete'><use xlink:href="/svg/svg.svg#x"></use></svg>
                  </div>
                  <div class="when">{{alert.startDate | adjustTimezone:serverTimeZone | timeago }}</div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div class="desktop-menu">
          <ul>
            <li><a href="{{ mysky_host }}/projects"> Projects</a></li>
            <li><a href="/">Resources</a></li>
            <li><a href="/wiki/downloads/">Downloads</a></li>
            <li ng-if='user'><a href="{{ mysky_host }}/profile/edit">My Profile</a></li>
            <li ng-if='user'><a href="{{ mysky_host }}/support">Support</a></li>
            <li ng-if='user'><a href="{{ mysky_host }}/logout">Sign Out</a></li>
          </ul>
        </div>

      </header>

      <div class="mobile-menu" ng-class="{'active': mobilMenu }">
        <ul class="drop-frame">
          <li><a href='/projects'> Projects</a></li>
          <li><a href='/'> Resources</a></li>
          <li><a href='/wiki/downloads/'> Downloads</a></li>
          <li ng-if='userData.user'><a href='{{ mysky_host }}/support'>Support</a></li>
          <li ng-if='userData.user'><a href="{{ mysky_host }}/profile/edit">My Profile</a></li>
          <li ng-if='userData.user'><a href='{{ mysky_host }}/logout'>Sign Out</a></li>
        </ul>


      </div>
    </div>

      <modal-search show='modalShown' width='60%' height='80%'>
        <div class='search-wrap'>
          <input id='search-resource' class='typeahead' type='text' placeholder='Search Resources' focus-me="modalShown">
          <svg class="search-icon"><use xlink:href="svg/svg.svg#search"></use></svg>
        </div>
      </modal-search>

      <div ui-view class='reveal-animation'></div>

    </body>
</html>
