{% extends "basic/layout.html" %}

{% set script_files = script_files + [
'_static/jquery.min.js',
'_static/bootstrap.js',
'_static/doc.js',
'_static/jquery.noconflict.js',
] %}

{% set classes = [] %}
{% if pagename == master_doc %}
  {% set classes = classes + ['index'] %}
{% endif %}

{% if 'code-column' in meta %}
  {% set classes = classes + ['has_code_col'] %}
{% endif %}

{%- block doctype -%}
  <!doctype html>
{%- endblock -%}
{%- block htmltitle -%}
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {{ super() }}
{%- endblock -%}

{%- block sidebar1 -%}{%- endblock -%}
{%- block sidebar2 -%}{%- endblock -%}
{%- block relbar1 -%}{%- endblock -%}
{%- block relbar2 -%}{%- endblock -%}

{%- block footer -%}
  {%- if google_analytics_key -%}
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', '{{ google_analytics_key }}', 'auto');
    ga('send','pageview');
    </script>
  {%- endif -%}
{%- endblock -%}

{%- block header -%}
  <header class="{{ ' '.join(classes) }}">
    <figure class="card top">
      <span class="card-img" {% if meta['banner'] %}style="background-image: url('{{ pathto('_static/' + meta['banner'], True) }}');"{% endif %}></span>
    </figure>
  </header>
  <nav id="main_navbar" class="navbar {{ ' '.join(classes) }}">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-main">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <nav class="nav navbar-nav navbar-left">
          <li id="main-back"><a href="{{ pathto(master_doc) }}" class="mdi-navigation-arrow-back"></a></li>
          <li>
            <h1 id="main_title">{{ meta.get('main-title', title) }}</h1>
          </li>
        </nav>
      </div>

      <nav class="collapse navbar-collapse navbar-main navbar-right" role="navigation">
        {% if versions %}
          <ul class="navbar-nav navbar-right nav">
            <li class="versions">
              <a class="dropdown-toggle" data-toggle="dropdown">
                {{ version }} <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" role="menu">
                {% for name, url in versions %}
                  <li><a href="{{ url }}">{{ name }}</a></li>
                {% endfor %}
              </ul>
            </li>
          </ul>
        {% endif %}
        {{ toctree(titles_only=True, maxdepth=2, includehidden=True, collapse=False, navbar='main') }}
      </nav>
    </div>
  </nav>
{%- endblock -%}

{%- block content -%}
  {% if 'code-column' in meta %}
    {% set container = 'container-fluid' %}
  {% else %}
    {% set container = 'container' %}
  {% endif %}
  <main class="{{ container }} {{ ' '.join(classes) }}">
    {% if pagename != master_doc %}
    <div class="row">
      {% if 'has-toc' not in meta %}
      <aside>
        <div class="navbar-aside text-center">
          <div class="logo_box">
            <span class="logo"></span>
            Documentation
          </div>
          {{ toc }}
          {% if github_link %}
          <p class="gith-container"><a href="{{ github_link(mode='edit') }}" class="gith-link">
              Edit on GitHub
          </a></p>
          {% endif %}
        </div>
      </aside>
      {% endif %}
      <article class="doc-body {% if 'has-toc' in meta %}doc-toc{% endif %}">
        {% endif %}
        {% block body %} {% endblock %}
      {% if pagename != master_doc %}</article>
    </div>
    {% endif %}
    <div id="mask"></div>
  </main>

  <div class="floating_action_container">
    <a id="floating_action" class="ripple" href="#">
      <i class="mdi-action-explore"></i>
    </a>
    <div id="floating_action_menu">
      <span class="bubble"></span>
      <ul class="list-group content">
        <li class="list-group-item ripple"><a>Cras justo odio</a></li>
        <li class="list-group-item ripple"><a>Dapibus ac facilisis in</a></li>
        <li class="list-group-item ripple"><a>Morbi leo risus</a></li>
        <li class="list-group-item ripple"><a>Porta ac consectetur ac</a></li>
        <li class="list-group-item ripple"><a>Vestibulum at eros</a></li>
      </ul>
    </div>
  </div>
{%- endblock -%}
