<!DOCTYPE html>

<html lang="en">

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

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

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS reset, uncomment this line to supress the default browser CSS style -->
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css" />

    <link rel="stylesheet" type="text/css" href="/static/css/basics.css" />

    <!-- CSS that is applied but outside of pad (for interface, etc) -->
    <link rel="stylesheet" type="text/css" href="/static/css/interface.css" />

    {% block head %}{% endblock %}

  </head>

  <body class="{% block body_class %}{% endblock %}">

    <nav class="tabs">
      <ul>
          <li><a {% if request.url_rule.endpoint == "index" %}class="active"{% endif %} href="/"> index</a></li>
          <li><a {% if request.url_rule.endpoint == "draw" %}class="active"{% endif %} href="/draw.html">draw</a></li>
          <li><a {% if request.url_rule.endpoint == "catalogue" %}class="active"{% endif %} href="/catalogue.html">catalogue</a></li>
          <li><a {% if request.url_rule.endpoint == "font" %}class="active"{% endif %} href="/font.html">font</a></li>
          <li><a {% if request.url_rule.endpoint == "image" %}class="active"{% endif %} href="/image.html">image</a></li>
      </ul>
    </nav>

    {% block body %}{% endblock %}

  </body>

</html>