<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="http://write-math.com/favicon.ico">

    <title>{{ heading }}</title>

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="icon" sizes="196x196" href="http://write-math.com/nice-highres.png">
    <link rel="icon" sizes="128x128" href="http://write-math.com/niceicon.png">
    <link rel="apple-touch-icon" sizes="128x128" href="http://write-math.com/niceicon.png">
    <link rel="apple-touch-icon-precomposed" sizes="128x128" href="http://write-math.com/niceicon.png">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <!-- Custom styles for this template -->
    <link href="http://write-math.com/css/style.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- 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.4.2/respond.min.js"></script>
    <![endif]-->
    {% block header %}{% endblock %}
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <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>
          <a class="navbar-brand" href="http://write-math.com">Write Math</a>
        </div>
        <div class="navbar-collapse collapse">
        {% if logged_in %}
          <ul class="nav navbar-nav navbar-left">
            <li {% if file == 'classify' %}class="active"{% endif %}><a href="http://write-math.com/classify">Classify</a></li>
            <li {% if file == 'train' %}class="active"{% endif %}  ><a href="http://write-math.com/train">Train</a></li>
            <li {% if file == 'gallery' %}class="active"{% endif %}><a href="http://write-math.com/gallery">Gallery</a></li>
            <li {% if file == 'ranking' %}class="active"{% endif %}><a href="http://write-math.com/ranking">Ranking</a></li>
            <li {% if file == 'about' %}class="active"{% endif %}  ><a href="http://write-math.com/about">About</a></li>
          </ul>
        {% else %}
          <ul class="nav navbar-nav navbar-left">
            <li {% if file == 'ranking' %}class="active"{% endif %}><a href="http://write-math.com/ranking">Ranking</a></li>
            <li {% if file == 'about' %}class="active"{% endif %}  ><a href="http://write-math.com/about">About</a></li>
          </ul>
        {% endif %}
        {% if logged_in and account_type != 'IP-User' %}
          <ul class="nav navbar-nav navbar-right">
            <li {% if file == 'profile' %}class="active"{% endif %}><a href="http://write-math.com/profile">{{ display_name }}</a></li>
          </ul>
        {% else %}
          <form class="navbar-form navbar-right" role="form" method="post" action="../login/index.php">
            <div class="form-group">
              <input type="email" required
                     placeholder="Email"
                     class="form-control"
                     name="email" />
            </div>
            <div class="form-group">
              <input type="password" required
                     placeholder="Password"
                     class="form-control"
                     name="password" />
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
            <a href="../register/" class="btn btn-primary">Register</a>
          </form>
        {% endif %}
        </div><!--/.navbar-collapse -->
      </div>
    </div>

    <div class="container">
      <div class="page-header">
        <h1>{{ heading }}</h1>
      </div>
      {% for m in msg %}
        <div class="alert {{ m.class }}">{{ m.text }}</div>
      {% endfor %}
      {% block content %}{% endblock %}
    </div>



    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    {% block footer %}{% endblock %}
  </body>
</html>