{% import theme('_menu.html') as menu with context -%}
<!DOCTYPE html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
  <head>
    <base href="{{request.url_root}}">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% block seo_meta %}
    <meta name="description" content="{{Config.get('site', 'site_description')}}">
    <meta name="keywords" content="{{Config.get('site', 'site_keywords')}}">
    {% endblock %}
    <meta name="author" content="{{Config.get('site', 'site_author')}}">
    {% block meta %}{% endblock %}
    {%if content %}
      <link rel="canonical" href="{{content.get_canonical_url()}}"/>
    {% elif channel %}
      <link rel="canonical" href="{{channel.get_canonical_url()}}"/>
      <link rel="alternate" type="application/atom+xml" title="Posts (Atom 0.3)" href="{{url_for('atom_list', long_slug=channel.long_slug)}}">
    {% endif %}
    <link rel="shortcut icon" href="{{theme_static('favicon.ico')}}">

    <title>{%block title%}{{Config.get('site', 'site_name', 'Quokka site')}}{% endblock %}</title>

    <!-- Bootstrap core CSS -->
    <link href="{{theme_static('css/bootstrap.min.css')}}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{{theme_static('css/offcanvas.css')}}" rel="stylesheet">
    <link href="{{theme_static('css/main.css')}}" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    {% block head%}{% endblock %}
  </head>

  <body>
    {% block top_body %}
    <a target="_blank" href="https://github.com/pythonhub/quokka"><img style="position: absolute; top: 52px; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
    {% endblock %}

    {% block navbar %}
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
	<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 class="navbar-brand" href="/"><img src="{{ Config.get('site', 'site_logo', theme_static('img/logo.png')) }}" alt="{{Config.get('site', 'site_name')}}" height="20" style="height: 20px;"/></a>
	</div>
	<div class="collapse navbar-collapse">
	  <!-- ul class="nav navbar-nav">
	    <li class="active"><a href="#">Home</a></li>
	    <li><a href="#about">About</a></li>
	    <li><a href="#contact">Contact</a></li>
	  </ul -->


    <ul class="nav navbar-nav navbar-right">
      {% block search_form %}
      <!-- li>
        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
            <input type="search" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </li -->
      {% endblock %}

      {% block access_control %}

      <li class="dropdown">

        {% if current_user.is_authenticated() %}
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <img src="{{current_user.email | gravatar(size=20) }}" />
            {{current_user.name}}
            <b class="caret"></b>
        </a>

        <ul class="dropdown-menu">
            <li><a href="{{url_for('admin.index')}}">Admin</a></li>
            <li class="divider"></li>
            <li><a href="{{url_for_security('change_password')}}">Change password</a></li>
            <li><a href="{{url_for_security('logout')}}">Logout</a></li>
        </ul>
        {% else %}
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Access
            <b class="caret"></b>
        </a>

        <ul class="dropdown-menu">
            <li><a href="{{url_for_security('register')}}">Register</a></li>
            <li><a href="{{url_for_security('login')}}">Login</a></li>
            <li><a href="{{url_for_security('forgot_password')}}">Forgot password</a></li>
        </ul>
        {% endif %}

      </li>
       {% endblock %}
    </ul>


	</div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div><!-- /.navbar -->
    {% endblock %}

    <div class="container">

    <div class="row row-offcanvas row-offcanvas-right">

	<div class="col-xs-12 col-sm-9">

      <p class="pull-right visible-xs">
        {%block toggle_off_canvas %}
	    <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
        {%endblock%}
      </p>

      {% block breadcrumb %}
      {% if channel %}
         <ol class="breadcrumb">

            {% if channel != homepage %}
            <li><a href="/"> {{homepage.title}}</a></li>
            {% endif %}

            {%for crumb in channel.get_ancestors()|reverse %}
                {% if loop.last and not content %}
                <li class="active">{{crumb.title}}</li>
                {% else %}
                <li><a href="{{crumb.get_absolute_url()}}">{{crumb.title}}</a></li>
                {% endif %}
            {% endfor %}

         </ol>
      {% endif %}
      {% endblock %}

      {% block front %}
	  <!-- div class="jumbotron">
	    <h1>Hello, world!</h1>
	    <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
	  </div -->
      {% endblock %}

	  <div class="row">
        {% block content %}{% endblock %}
	  </div><!--/row-->
	</div><!--/span-->


	<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">

      {% block sidebar %}
      {{ menu.build_nodes(nodes=channels) }}


	  <!--div class="list-group">
	    <a href="#" class="list-group-item active">Link</a>
	    <a href="#" class="list-group-item">Link</a>
	    <a href="#" class="list-group-item">Link</a>
	    <a href="#" class="list-group-item">Link</a>
	    <a href="#" class="list-group-item">Link</a>
	    <a href="#" class="list-group-item">Link</a>
	    <a href="#" class="list-group-item">Link</a>
	    <a href="#" class="list-group-item">Link</a>
	    <a href="#" class="list-group-item">Link</a>
	    <a href="#" class="list-group-item">Link</a>
	  </div -->

      {% endblock %}

	</div><!--/span-->

  </div><!--/row-->

      <hr>

      <footer>
	      <p>&copy; {{Config.get('site', 'site_name')}}</p>
      </footer>

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



    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="{{theme_static('js/jquery-1.10.2.min.js')}}"></script>
    <script src="{{theme_static('js/bootstrap.min.js')}}"></script>
    <script src="{{theme_static('js/offcanvas.js')}}"></script>
    <script src="{{theme_static('js/main.js')}}"></script>
    {% block js_footer %}{% endblock %}
  </body>
</html>
