{% load static %}
<!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="title" content="{% if title %} {{ title }} {% else %} FreedomBox {% endif %}" />
	<meta name="description" content="Plinth administrative interface for the FreedomBox" />
	<title>{% if title %} {{ title }} {% else %} FreedomBox {% endif %}</title>

	<!-- 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 'theme/css/bootstrap.min.css' %}"/>
	<!-- Bootstrap responsive CSS -->
	<link rel="stylesheet" href="{% static 'theme/css/bootstrap-responsive.min.css' %}"/>
	<link rel="stylesheet" href="{% static 'theme/css/plinth.css' %}"/>
	<!-- CSS from previous Plinth template, not sure what to keep yet -->
	{{ css|safe }}
	<!-- End 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">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse"
             data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a href="{% url 'index' %}" class="logo-top">
            <img src="{% static 'theme/img/freedombox-logo-32px.png' %}"
                 alt="FreedomBox" />
          </a>
          <a class="brand" href="{% url 'index' %}">FreedomBox</a>
	  {% block add_nav_and_login %}
            <div class="nav-collapse">
              <ul class="nav">
                {% for item in cfg.main_menu.items %}
                  {% if item.url in active_menu_urls %}
                    <li class="active">
                      <a href="{{ item.url }}" class="active">
                  {% else %}
                    <li>
                      <a href="{{ item.url }}">
                  {% endif %}
                      <span class="{{ item.icon }} icon-white nav-icon"></span>
                      {{ item.label }}
                      </a>
                    </li>
                {% endfor %}
              </ul>

              {% if user.is_authenticated %}
                <p class="navbar-text pull-right">
                  <i class="icon-user icon-white nav-icon"></i>
                  Logged in as <a href="#">{{ user.username }}</a>.
                  <a href="{% url 'lib:logout' %}" title="Log out">
                    Log out</a>.
                </p>
              {% else %}
                <p class="navbar-text pull-right">
                  Not logged in.
                  <i class="icon-user icon-white nav-icon"></i>
                  <a href="{% url 'lib:login' %}" title="Log in">
                    Log in</a>.
                </p>
              {% endif %}
	  {% endblock %}
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        {% if submenu or sidebar_right or sidebar_left %}
        <div class="span3">
        {% if submenu %}
          <div class="well sidebar-nav">
            {% include "menu.html" with menu=submenu %}
          </div><!--/.well -->
        {% endif %}
        {% if sidebar_left %}
          <div class="well sidebar-nav">
		{{ sidebar_left|safe }}
          </div><!--/.well -->
	{% endif %}
        {% block sidebar_right_block %}
          {% if sidebar_right %}
            <div class="well sidebar-nav">
              {{ sidebar_right|safe }}
            </div><!--/.well -->
          {% endif %}
        {% endblock %}
        </div>
	{% endif %}
        <div class="span9">
          <div class="hero-unit" class="pull-left">
  		<h2>
		{% block title_block %}
		{{ title }}
		{% endblock %}
		</h2>

		{% include 'messages.html' %}

		{% block main_block %}
                {{ main|safe }}
		{% endblock %}
          </div>
        </div><!--/span-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>{% block footer_block %}
		<p>
		Plinth is &copy; Copyright 2012 <a href="http://hackervisions.org" target="_blank">James Vasile</a>.  It is
		free software offered to you under the terms of
		the <a href="http://www.gnu.org/licenses/agpl.html" target="_blank">GNU Affero General Public
		License</a>, Version 3 or later.  This Plinth theme was built by <a href="http://seandiggity.com" target="_blank">Sean &quot;Diggity&quot; O&apos;Brien</a>.
		</p>
		{% endblock %}</p>
      </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 'theme/js/libs/modernizr.min.js' %}"></script>
	<!-- Local link to system jQuery -->
	<script type="text/javascript" src="{% static 'theme/js/libs/jquery.min.js' %}"></script>
	<!-- Local link to system Bootstrap JS -->
	<script type="text/javascript" src="{% static 'theme/js/libs/bootstrap.min.js' %}"></script>

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