{% extends 'bootstrap.html' %}
{% load bootstrap3 %}
{% load static %}

{% block bootstrap3_extra_head %}
  {% block extra_meta %}{% endblock %}
  <link href="{% get_static_prefix %}css/core.css" rel="stylesheet" type='text/css' />
  <link href='//fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  {% block extra_media %}{% endblock %}
{% endblock %}

{% block bootstrap3_content %}
  <div id="header" class="navbar navbar-fixed-top navbar-inverse">
    <div class="container">
      <div class="navbar-header">
        {% block navbarbrand %}
          <a class="navbar-brand" href="{% url 'index' %}">{{ site.domain }}</a>
        {% endblock %}

        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
        {% block navbar_menu %}
          <ul class="nav navbar-nav">
            <li><a href="{% url 'facts_index' %}">Item Sets</a></li>
            <li><a href="{% url 'karma_index' %}">Karma</a></li>
            <li><a href="{% url 'markov_index' %}">Markov</a></li>
            <li><a href="{% url 'races_index' %}">Races</a></li>
          </ul>
        {% endblock %}
        <div class="navbar-right">
          <ul class="nav navbar-nav">
            {% if user.is_authenticated %}
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  {{ user }}
                  <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                  {% if user.is_authenticated and user.is_staff %}
                    <li>
                      <a href="{% url 'admin:index' %}">
                        <i class="fa fa-database"></i>
                        Admin
                      </a>
                    </li>
                  {% endif %}
                </ul>
              </li>
            {% endif %}
          </ul>
        </div>
      </div>
    </div>
  </div>

  {% autoescape off %}{% bootstrap_messages %}{% endautoescape %}

  <div id="content">
    {% block content %}(no content){% endblock %}
  </div>

  {% block footer %}<div id="footer" class="container">{% block extrafooter %}{% endblock %}</div>{% endblock %}
{% endblock %}