{% load static %}
{% load bulma_utils %}

<!DOCTYPE html>
<html>
  <head>
    <title>{{ site.name }}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {# CSS #}
    <link rel="stylesheet" href="{% static "bds/css/bds.css" %}">
    <link type="text/css" rel="stylesheet" href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}">

    {# Javascript #}
    <script src="{% static 'vendor/jquery/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static "vendor/jquery/jquery.autocomplete-light.min.js" %}"></script>
    <script src="{% static 'bds/js/bds.js' %}"></script>

    {% block extra_head %}{% endblock extra_head %}
  </head>
  <body>
    {% include "bds/nav.html" %}
    {% block layout %}
    <div class="columns">
      <div class="column is-two-thirds is-offset-2">
        <section class="section">

          {% if messages %}
            {% for message in messages %}
              <div class="notification is-{{ message.level_tag|bulma_message_tag }}">
                {% if 'safe' in message.tags %}
                    {{ message|safe }}
                {% else %}
                    {{ message }}
                {% endif %}
                <button class="delete"></button>
              </div>
            {% endfor %}
          {% endif %}

          {% block content %}
          {% endblock content %}
        </section>
      </div>
    </div>
    {% endblock layout %}
  </body>
</html>
