<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">

    <title>{% block title %}Knowledge Repo{% endblock %}</title>

    <!-- js includes at the top as post embedded js colliding -->
    <script src="{{ url_for('static', filename='modules/jquery/jquery.min.js')}}"></script>
    <script src="{{ url_for('static', filename='modules/tether/js/tether.min.js')}}"></script>
    <script src="{{ url_for('static', filename='modules/bootstrap/js/bootstrap.min.js')}}"></script>
    <script src="{{ url_for('static', filename='modules/bootstrap-slider/js/bootstrap-slider.min.js')}}"></script>
    <script src="{{ url_for('static', filename='modules/typeahead.js/typeahead.bundle.min.js')}}"></script>
    <script src="{{ url_for('static', filename='modules/handlebars/js/handlebars.js')}}"></script>
    <script src="{{ url_for('static', filename='js/helpers.js')}}"></script>
    <script src="{{ url_for('static', filename='modules/select2/js/select2.min.js')}}"></script>
    <script src="{{ url_for('static', filename='modules/hightlight.pack.js/highlight.pack.js')}}"></script>
    <script src="{{ url_for('static', filename='modules/marked.js/marked.js')}}"></script>

    <!-- require js is used for plotly, but has a bunch of collisions with other js packages
             make sure to have it be last js package imported -->
    <script src="{{ url_for('static', filename='modules/require.js/require.min.js')}}"></script>
    <script src="{{ url_for('static', filename='js/pages/base.js')}}"></script>

    <!-- Set explicit mobile collapse behaviour -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- fix for IE compatability mode -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--[if lt IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.1.0/es5-shim.min.js"></script>
        <![endif]-->
    <link rel="stylesheet" href="{{ url_for('static', filename='modules/bootstrap/css/bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ url_for('static', filename='modules/bootstrap-slider/css/bootstrap-slider.min.css')}}">
    <link rel="stylesheet" type='text/css' href="{{ url_for('static', filename='css/pages/base.css') }}">
    <link rel="stylesheet" type='text/css' href="{{ url_for('static', filename='modules/select2/css/select2.min.css') }}">
    <link href='https://fonts.googleapis.com/css?family=Lato:400,900|Playfair+Display|Source+Serif+Pro:400,700' rel='stylesheet' type='text/css'>
    <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.png') }}"> {% block style_links %}{% endblock %}

    <!-- Favicon and app settings -->
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='images/favicon-16x16.png') }}">
    <link rel="manifest" href="{{ url_for('static', filename='images/site.manifest') }}">
    <link rel="mask-icon" href="{{ url_for('static', filename='images/safari-pinned-tab.svg') }}" color="#5bbad5">
    <meta name="theme-color" content="#ffffff">

    {% block extra_headers %}
    {% endblock %}
    <style>
      {% block style %}
      {% endblock %}
    </style>
  </head>

  <body>
    {% block navbar %}
    <!-- Top-level navbar -->
    <nav class="navbar navbar-fixed-top navbar-inverse">
      <div class="container-fluid">
        <div class='col-lg-2'></div>
        <div class='col-lg-8'>

          <div class="navbar-header">
            <!-- Hamburger button to display collapsed menu -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>

            <!-- Brand name / logo -->
            <a class="navbar-brand" href="/" class="logo-image">
              <img src='{{ url_for("static", filename = "images/logo-white.svg")}}' />
              <text>Knowledge Repo</text>
            </a>
          </div>

          <!-- Navigation items -->
          <div id="navbar" class="navbar-collapse collapse">

            <!-- Search bar -->
            <form class="navbar-form navbar-left searchbar" role="search" action="{{url_for('index.render_feed')}}">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search" name="filters" id="searchbar" value="{% if feed_params and feed_params['filters'] %}{{ feed_params['filters'] }}{% endif %}">
                <div class="input-group-btn">
                  <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </div>
              </div>
            </form>

            <!-- "Write a Post" button -->
            <a href="/create" class="btn btn-primary navbar-button">
              Write a Post!
            </a>

            <!-- Drop down menu to surface less used links on large screens -->
            <ul class="nav navbar-nav navbar-right visible-sm-block visible-md-block visible-lg-block">
              <li class="dropdown">
                <a href="#" class="avatar-dropdown dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true" style='padding: 5px;'>
                    <img class="avatar" src="{% if current_user.is_anonymous %}{{ url_for('static', filename='images/profile_photo_logged_out.png') }}{%else%}{{ current_user.avatar_uri or url_for('static', filename='images/profile_photo_default.png') }}{%endif%}" />
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                  {% if current_user.is_authenticated %}
                  <li class="dropdown-header">Logged in as <em>{{ current_user.format_name }}</em></li>
                  <li><a href="/feed?authors={{ current_user.identifier }}">My Posts</a></li>
                  <li><a href="/favorites">My Favorites</a></li>
                  {% if current_user.can_logout %}
                  <li><a href="{{ url_for('auth.logout') }}">Sign out</a></li>
                  {% endif %}
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Site Features</li>
                  {% else %}
                  <li><a href="{{ url_for('auth.login') }}">Sign in</a></li>
                  {% endif %}
                  <li><a href="/stats">Stats</a></li>
                  <li><a href="http://knowledge-repo.readthedocs.io/" target="_blank" rel="nofollow noreferrer">Documentation</a></li>
                </ul>
              </li>
            </ul>

            <!-- Expose the same links as above in the collapsed navbar header -->
            <ul class="nav navbar-nav navbar-right visible-xs-block">
              {% if current_user.is_authenticated %}
              <li class="dropdown-header">Logged in as <em>{{name}}</em></li>
              <li><a href="/feed?authors={{username}}">My Posts</a></li>
              <li><a href="/favorites">My Favorites</a></li><li role="separator" class="divider"></li>
              {% if current_user.can_logout %}
              <li><a href="{{ url_for('auth.logout') }}">Sign out</a></li>
              {% endif %}
              <li class="dropdown-header">Site Features</li>
              {% else %}
              <li><a href="{{ url_for('auth.login') }}">Sign in</a></li>
              {% endif %}
              <li><a href="/stats">Stats</a></li>
              <li><a href="http://knowledge-repo.readthedocs.io/" target="_blank" rel="nofollow noreferrer">Documentation</a></li>
            </ul>

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

    <!-- Main content place holder, with a sidebar on both the left and right,
         which collapse to form a single column on smaller screens. -->
    <div class="container-fluid page-container">
      <div class='row'>
        <!-- Left sidebar -->
        <div class='col-lg-2'>
          <div class='side-panel' id='panel-left'>
            {% block panel_left %}{% endblock %}
          </div>
        </div>
        <!-- Main content placeholder -->
        <div class='col-lg-8' id='panel-main'>
            {% with messages = get_flashed_messages() %}
              {% if messages %}
                <ul class=flashes>
                {% for message in messages %}
                  <li>{{ message }}</li>
                {% endfor %}
                </ul>
              {% endif %}
            {% endwith %}
          {% block content %} {% endblock %}
        </div>
        <!-- Right sidebar -->
        <div class='col-lg-2'>
          <div class='side-panel' id='panel-right'>
            {% block panel_right %}{% endblock %}
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      Served with <span class="glyphicon glyphicon-heart"></span> by <a href="https://github.com/airbnb/knowledge-repo">Knowledge Repo</a> <a {% if version_revision %}title='{{version_revision}}' {% endif %} href="https://github.com/airbnb/knowledge-repo/releases/tag/v{{ version }}">{{ version }}</a>
      <br />
      <i title="Last checked for updates: {{last_index_check}}">Last indexed: {{last_index}}</i>
    </div>

    <!-- Placeholder for additional ad-hoc scripts. -->
    {% block scripts %}
    {% endblock %}

  </body>

</html>
