{% load static %}
{% load plinth_extras %}

{% comment %}
#
# This file is part of Plinth.
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as
# published by the Free Software Foundation, either version 3 of the
# License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program.  If not, see <http://www.gnu.org/licenses/>.
#
{% endcomment %}
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<!-- the "no-js" class is for Modernizr -->
<head>
  <meta charset="utf-8" />

  <!-- Always force latest IE rendering engine and Chrome Frame -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <!--  Mobile Viewport Fix http://j.mp/mobileviewport & http://davidbcalhoun.com/2010/viewport-metatag
  device-width : Occupy full width of the screen in its current orientation
  initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
  maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
  -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- R2D2, you know better than to trust a strange computer! -->
  <meta name="robots" content="noindex, nofollow, noarchive" />
  <meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noodp, noimageindex, notranslate" />
  <meta name="msnbot" content="noindex, nofollow, noarchive, noodp" />
  <meta name="slurp" content="noindex, nofollow, noarchive, noodp, noydir" />
  <meta name="description" content="Plinth administrative interface for the FreedomBox" />
  {% block title %}
    <title>
      {% if title %} {{ title }} {% else %} FreedomBox {% endif %}
    </title>
  {% endblock %}

  <!-- This is the traditional favicon. Size: 16x16 or 32x32, transparency is OK -->
  <link rel="shortcut icon" href="{% static 'theme/img/favicon.ico' %}"/>

  <!-- The is the icon for iOS's Web Clip. Size: 57x57 for older iPhones, 72x72 for iPads, 114x114 for iPhone4
  - To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png
  - Transparency is not recommended (iOS will put a black BG behind the icon) -->
  <link rel="apple-touch-icon" sizes="57x57" href="{% static 'theme/img/apple-touch-icon-57px-precomposed.png' %}"/>
  <link rel="apple-touch-icon" sizes="72x72" href="{% static 'theme/img/apple-touch-icon-72px-precomposed.png' %}"/>
  <link rel="apple-touch-icon" sizes="114x114" href="{% static 'theme/img/apple-touch-icon-114px-precomposed.png' %}"/>

  <!-- Bootstrap base CSS -->
  <link rel="stylesheet" href="{% static '/javascript/bootstrap/css/bootstrap.min.css' %}"/>
  <link rel="stylesheet" href="{% static 'theme/css/plinth.css' %}"/>

  {% block app_head %}<!-- placeholder for app/module-specific head files -->{% endblock %}
  {% block page_head %}<!-- placeholder for page-specific head files -->{% endblock %}
</head>

<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://mozilla.org/firefox">Upgrade to a modern version of Firefox</a> to experience this site.</p><![endif]-->
  <div class="navbar navbar-fixed-top navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="{% url 'index' %}" class="navbar-brand">
          <img src="{% static 'theme/img/freedombox-logo-32px.png' %}"
               alt="FreedomBox" />
          FreedomBox
        </a>
      </div>
      <div class="collapse navbar-collapse">
      {% block add_nav_and_login %}
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="{% url 'help:index' %}">
              <span class="glyphicon-question-sign glyphicon nav-icon"></span>
            </a>
          </li>
          <li>
            <a href="{% url 'system:index' %}">
              <span class="glyphicon-cog glyphicon nav-icon"></span>
            </a>
          </li>
          <li class="dropdown">
            {% if user.is_authenticated %}
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                 role="button" aria-expanded="false">
                <i class="glyphicon glyphicon-user nav-icon"></i>
                {{ user.username }}
                <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="{% url 'users:edit' user.username %}"
                       title="Edit">Edit</a></li>
                <li><a href="{% url 'users:change_password' user.username %}"
                       title="Change password">Change password</a></li>
                <li class="divider"></li>
                <li><a href="{% url 'users:logout' %}" title="Log out">
                    Log out</a></li>
              </ul>
            {% else %}
              <a href="{% url 'users:login' %}" title="Log in">
                <i class="glyphicon glyphicon-user nav-icon"></i>
                Log in</a>
            {% endif %}
          </li>
        </ul>

      {% endblock %}
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3">
        {% block submenu %}
          {% if submenu %}
            <div class="sidebar">
              {% include "submenu.html" with menu=submenu %}
            </div><!--/.sidebar -->
          {% endif %}
        {% endblock %}

        {% block sidebar %}
          {# this sidebar should contain help texts but no menus #}
        {% endblock %}
      </div>

      <div class="col-md-9">
        {% block subsubmenu %}
          {% if subsubmenu %}
            {% show_subsubmenu subsubmenu %}
          {% endif %}
        {% endblock %}

        {% include 'messages.html' %}

        {% block content %}
          {# main content goes here #}
        {% endblock %}
      </div><!--/col-->
    </div><!--/row-->

    <hr>

    <footer>
      {% block footer_block %}
      {% endblock %}
    </footer>

  </div><!--/.fluid-container-->

  <!-- JavaScript <script> tags are placed at the end of the document to speed up initial page loads-->
  <!-- Local link to system Modernizr (includes HTML5 Shiv) -->
  <script type="text/javascript" src="{% static '/javascript/modernizr/modernizr.min.js' %}"></script>
  <!-- Local link to system jQuery -->
  <script type="text/javascript" src="{% static '/javascript/jquery/jquery.min.js' %}"></script>
  <!-- Local link to system Bootstrap JS -->
  <script type="text/javascript" src="{% static '/javascript/bootstrap/js/bootstrap.min.js' %}"></script>

  {% block app_js %}<!-- placeholder for app-specific js files -->{% endblock %}
  {% block page_js %}<!-- placeholder for page-specific js files -->{% endblock %}
</body>
</html>
