{% load i18n static %}
<!DOCTYPE html>
<html lang="en"{% block html-attributes %}{% endblock html-attributes %}>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    {% block favicon %}
    <link rel="shortcut icon" href="{% block favicon-image %}{% endblock favicon-image %}">
    {% endblock favicon %}

    <title>{% block page-title %}{% endblock page-title %} | {% block site-title %}{% endblock site-title %}</title>

    {% block stylesheets %}
    {#<!-- Additional core CSS files that somehow can't be put into the python theme -->#}
    {% endblock stylesheets %}

    {% block theme-stylesheets %}
    {#<!-- This is where stylesheets declared in the Python theme are listed -->#}

    {% for css_file in fobi_theme.get_media_css %}
    <link href="{% static css_file %}" rel="stylesheet" media="all" />
    {% endfor %}

    {% endblock theme-stylesheets %}

    {% block extra-stylesheets %}{% endblock extra-stylesheets %}

    {% block head-javascripts %}
    <!-- 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]-->
    {% endblock head-javascripts %}

    {% block extra-head-javascripts %}{% endblock extra-head-javascripts %}

    {% block extrahead %}{% endblock extrahead %}
  </head>

  <body{% block body-attrs %}{% if fobi_theme %} class="theme {{ fobi_theme.html_class }}"{% endif %}{% endblock body-attrs %}>
  {% block main-wrapper %}

    {% block navbar-wrapper %}
    <div class="{% block navbar-class %}{% endblock navbar-class %}" role="navigation">
      {% block navbar %}
      <div class="{% block navbar-container-class %}{% endblock navbar-container-class %}">
        {% block navbar-content %}
        {% block navbar-header %}
        <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>
          {% url 'fobi.dashboard' as fobi_dashboard_url %}
          <a class="navbar-brand" href="{{ fobi_dashboard_url }}">{{ fobi_theme.project_name }}</a>
        </div>
        {% endblock navbar-header %}

        {% block navbar-menu-wrapper %}
        <div class="collapse navbar-collapse">
          {% block navbar-menu %}
          <ul class="nav navbar-nav">
            {% block navbar-menu-content %}
            <!--
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                  Dropdown <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#sub1">Submenu 1</a></li>
                    <li><a href="#sub2">Submenu 2</a></li>
                </ul>
            </li>
            -->
            {% endblock navbar-menu-content %}
          </ul>
          {% endblock navbar-menu %}
        </div><!-- /.nav-collapse -->
        {% endblock navbar-menu-wrapper %}
        {% endblock navbar-content %}
      </div><!-- /.container -->
      {% endblock navbar %}
    </div><!-- /.navbar -->
    {% endblock navbar-wrapper %}

    {% block main-content-wrapper %}
    <div class="container">
      {% block messages-wrapper %}
          {% include fobi_theme.messages_snippet_template_name %}
      {% endblock messages-wrapper %}
      {% block main-content %}
      <div class="row row-offcanvas row-offcanvas-right">

        <div{#% block main-content-inner-attrs %#} class="col-xs-12 col-sm-9"{#% endblock main-content-inner-attrs %#}>
          {% block responsive-nav %}
          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>
          {% endblock responsive-nav %}

          {% block content-wrapper %}
          <div class="row">
            <div class="{% block content-class %}col-18 col-sm-18 col-lg-12{% endblock content-class %}">
            {% block content %}
              <!--
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
              -->
            {% endblock content %}
            </div><!--/span-->
          </div><!--/row-->
          {% endblock content-wrapper %}
        </div><!--/span-->

        {% block sidebar-wrapper %}
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
          {% block sidebar %}
          <div class="list-group">
            {% block sidebar-content %}
            <!--
            <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>
            -->
            {% endblock sidebar-content %}
          </div>
        {% endblock sidebar %}
        </div><!--/span-->
        {% endblock sidebar-wrapper %}
      </div><!--/row-->
      {% endblock main-content %}

      {% block content-footer-separator %}
      <hr>
      {% endblock content-footer-separator %}

      {% block footer-wrapper %}
      <footer>
        {% block footer %}
        <p>{% block footer-content %}{{ fobi_theme.footer_text|safe }}{% endblock footer-content %}</p>
        {% endblock footer %}
      </footer>
      {% endblock footer-wrapper %}

    </div><!--/.container-->
    {% endblock main-content-wrapper %}


  {% endblock main-wrapper %}

  {% block javascripts %}
    {#<!-- Theme core JavaScript that somehow can't be put into the Python theme -->#}
    {#<!-- Placed at the end of the document so the pages load faster, although might be changed, if plugins need it to be otherwise -->#}
  {% endblock javascripts %}

  {% block theme-javascripts %}
    {#<!-- This is where javascripts declared in the Python theme are listed -->#}
    {% for js_file in fobi_theme.get_media_js %}
    <script src="{% static js_file %}"></script>
    {% endfor %}

  {% endblock theme-javascripts %}
    
  </body>
</html>
