{% load players_utils %}
{% load static %}
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {# The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags #}

        <title>Kurono</title>
        <meta name="description" content="An online multiplayer game, where players create Artificially Intelligent programs to play on their behalf.">

        <link rel="shortcut icon" href="{% static 'favicon.ico' %}" type="image/x-icon">

        {# bootstrap #}
        {# Latest compiled and minified CSS #}
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

        {# Optional theme #}
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

        {% block styles %}
        <style>
          @import url('https://fonts.googleapis.com/css?family=Baloo|Source+Sans+Pro');
          html { font-family: 'Source Sans Pro', sans-serif; }
          h1, h2, h3 { font-family: 'Baloo', cursive; }
          body { font-size: 1.5em; }
          p { line-height: 1.3em; }

          @media screen and (min-width: 24.15em) { /* 21em "gate" * 1.15 font-size */
            p { line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em) / (35 - 21))); }
          }

          @media (min-width: 40.25em) { /* 35em "gate" * 1.15 font-size */
            p { line-height: 1.5em; }
          }
        </style>
        {% endblock %}
    </head>

    <body>
        <nav class="navbar navbar-default" style="background-color: white; background-image: none">
            <div class="container-fluid">
              <a class="navbar-brand navbar-right" style="padding: 15px;" href="/">
                <img style="height: 20px" src="/static/images/cfl_horizontal_logo.svg" alt="Code for Life">
              </a>
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <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" style="padding: 10px;" href="/kurono">
                      <img style="height: 30px" src="/static/images/kurono_logo.svg" alt="Kurono">
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="dropdown {% block nav-watch-class %}{% endblock %}"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Play<span class="caret"></span></a>
                            {% game_dropdown_list 'kurono/play' %}
                        </li>
                        <li class="{% block nav-statistics-class %}{% endblock %}"><a href="{% url 'kurono/statistics' %}">Statistics</a></li>
                        <li><a href="{% url 'kurono/logout' %}">Logout</a></li>
                    </ul>
                </div>
            </div>
            {% block extra_nav %}{% endblock %}
        </nav>
        <div class="container">
            {% block content %}
            {% endblock %}
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

        {# Latest compiled and minified JavaScript #}
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

        <script src="{% url 'kurono/js_reverse' %}" type="text/javascript"></script>

        {# HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries #}
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        {% block scripts %}
        {% endblock %}
    </body>
</html>
