<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="OpenSlidesApp.site" class="no-js"> <!--<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
<title>OpenSlides</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/css/openslides-libs.css">
<link rel="stylesheet" href="static/css/app.css">
<script src="static/js/openslides-libs.js"></script>

<!-- Navbar -->
<nav id="header" class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a ui-sref="dashboard" class="navbar-brand">
        <img id="logo" src="/static/img/logo.png" alt="OpenSlides" />
      </a>
      <span class="navbar-text optional">{{ config('general_event_name') }}</span>
    </div>
    <div class="navbar-right" ng-controller="userMenu">
      <!-- login/logout button -->
      <div class="btn-group">
        <div ng-if="operator.isAuthenticated()">

          <div class="btn-group" dropdown is-open="status.isopen">
            <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
              <i class="fa fa-user"></i>
              <span class="optional-small">{{ operator.user.get_short_name() }}</span>
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu pull-right" role="menu">
              <li><a href="{% url 'user_settings' %}">
                    <i class="fa fa-cog"></i>
                    <translate>Edit profile</translate>
                  </a>
              <li><a href="{% url 'password_change' %}">
                    <i class="fa fa-key"></i>
                    <translate>Change password</translate>
                  </a>
              <li class="divider">
              <li><a ng-click="logout()" href="">
                    <i class="fa fa-sign-out"></i>
                    <translate>Logout</translate>
                  </a>
            </ul>
          </div>
        </div>

        <!-- Login dialog (modal) -->
        <div ng-controller="LoginFormCtrl" ng-if="!operator.isAuthenticated()">
          <script type="text/ng-template" id="LoginForm.html">
            <div class="modal-header">
              <h3 class="modal-title" translate>Please sign in!</h3>
            </div>
            <div class="modal-body">
              <p ng-if='loginFailed' class="text-danger">
                <strong translate>Username or password is not correct.</strong>
              <div class="input-group form-group">
                <div class="input-group-addon"><i class="fa fa-user"></i></div>
                <input type="text" ng-model="username" class="form-control input-lg"
                    placeholder="{{ 'Username' | translate }}">
              </div>
              <div class="input-group form-group">
                <div class="input-group-addon"><i class="fa fa-key"></i></div>
                <input type="password" ng-model="password" class="form-control input-lg"
                    placeholder="{{ 'Password' | translate }}">
              </div>
            </div>
            <div class="modal-footer">
              <div class="form-group">
                <button type="submit" ng-click="login(username, password)"
                    class="btn btn-primary btn-lg btn-block" translate>
                  Login
                </button>
              </div>
              <div class="form-group">
                <!-- TODO: show only if anonymous user is activate -->
                <button ng-click="guest()" class="btn btn-default" translate>
                  Continue as guest
                </button>
                <button ng-click="cancel()" class="btn btn-default" translate>
                  Cancel
                </button>
              </div>
            </div>
          </script>
          <button class="btn btn-default" ng-click="open()">
            <i class="fa fa-sign-in"></i>
            <translate>Login</translate>
          </button>
        </div>
      </div>

      <!-- language switcher -->
      <div class="btn-group" ng-controller="LanguageCtrl">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
          <i class="fa fa-flag"></i>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <li><a href="" ng-click="switchLanguage('en')">
                <i class="fa fa-flag"></i>
                <translate>English</translate> (EN)
              </a>
          <li><a href="" ng-click="switchLanguage('de')">
                <i class="fa fa-flag"></i>
                <translate>German</translate> (DE)
              </a>
          <li><a href="" ng-click="switchLanguage('fr')">
                <i class="fa fa-flag"></i>
                <translate>French</translate> (FR)
              </a>
        </ul>
      </div>
    </div>
  </div>
</nav>

<!-- Container -->
<div class="container-fluid" id="container">
  <div class="row">
    <!-- TODO: Build main menu automatically from installed apps, see issue #1469 -->
    <div class="col-md-2 leftmenu lefticon">
      <ul>
        <li>
          <a ui-sref="dashboard">
            <span class="ico"><i class="fa fa-home fa-lg"></i></span>
            <span class="text" translate>Home</span>
          </a>
        <li>
          <a ui-sref="core.customslide.list">
            <span class="ico"><i class="fa fa-video-camera fa-lg"></i></span>
            <span class="text" translate>Projector</span>
          </a>
        <li>
          <a ui-sref="agenda.item.list">
            <span class="ico"><i class="fa fa-calendar-o fa-lg"></i></span>
            <span class="text" translate>Agenda</span>
          </a>
        <li>
          <a ui-sref="motions.motion.list">
            <span class="ico"><i class="fa fa-file-text fa-lg"></i></span>
            <span class="text" translate>Motions</span>
          </a>
        <li>
          <a ui-sref="assignments.assignment.list">
            <span class="ico"><i class="fa fa-pie-chart fa-lg"></i></span>
            <span class="text" translate>Elections</span>
          </a>
        <li>
          <a ui-sref="users.user.list">
            <span class="ico"><i class="fa fa-user fa-lg"></i></span>
            <span class="text" translate>Participants</span>
          </a>
        <li>
          <a ui-sref="mediafiles.mediafile.list">
            <span class="ico"><i class="fa fa-paperclip fa-lg"></i></span>
            <span class="text" translate>Files</span>
          </a>
        <li>
          <a ui-sref="config">
            <span class="ico"><i class="fa fa-cog fa-lg"></i></span>
            <span class="text" translate>Settings</span>
          </a>
      </ul>
    </div>

    <!-- Content -->
    <div id="content" class="col-md-10">
      <div class="row">
        <div class="col-md-12">
          <div ui-view></div>
        </div>
      </div>
      <hr />
      <footer>
        <small>
          &copy; Copyright 2011-2015 |
          Powered by <a href="http://openslides.org" target="_blank">OpenSlides</a> |
          <a ui-sref="version">Version</a>
        </small>
      </footer>
    </div><!--/#content-->
  </div><!--/.row-->
</div><!--/#container-->

<script src="static/js/app.js"></script>
<script src="static/js/core.js"></script>
<script src="static/js/agenda/agenda.js"></script>
<script src="static/js/motions/motions.js"></script>
<script src="static/js/assignments/assignments.js"></script>
<script src="static/js/users/users.js"></script>
<script src="static/js/mediafiles/mediafiles.js"></script>
