<!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">
    <title>{{ conf['title'] | title }}</title>
    <!-- jQuery -->
    <script src="/static/js/jquery.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script src="/static/js/bootstrap.min.js"></script>
    <!-- Smeagol -->
     <link rel="stylesheet" href="/static/css/smeagol.css">
     <script src="/static/js/smeagol.js"></script>
  </head>
  <body>
    {% include 'includes/nav.html' %}
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <div class="alert-wrapper">
        {% for message in messages %}
          <div class="alert alert-danger" role="alert"><button 
             type="button" class="close" data-dismiss="alert" 
             aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>Error!</strong> {{ message }}
          </div>
        {% endfor %}
        </div>
      {% endif %}
    {% endwith %}
    <div class="container">
        {% block content %}{% endblock %}
    </div>
  </body>
</html>