{% load static i18n vault_tags %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {% block metatags %}{% endblock %}

    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{% static 'vendor/css/bootstrap.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'vendor/css/font-awesome-all.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'vault/css/base.css' %}">
    {% block css %}{% endblock %}

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

    <script src="{% static 'vendor/js/jquery-3.4.1.min.js' %}"></script>
    <script src="{% static 'vault/js/base.js' %}"></script>
  </head>

  <body class="bare {% block bodyclass %}{% endblock %}">
    {% block main_content %}
    <div class="container-fluid main-content">
      <div class="row">

        <main role="main" class="col-md-12">

          <div class="content-top">
            {% block content_top %}

              <div class="row justify-content-center">
                <div class="col-md-8">

                  <div class="row justify-content-between">
                    <div class="bare-head-left col-md-4">
                      <a href="{% url 'main' %}">
                        <img class="logo" src="{% static 'vault/img/logo-white.svg' %}" alt="Vault">
                      </a>
                    </div>
                    <div class="bare-head-right col-md-4">

                      {% include 'vault/user_info.html' %}

                    </div>
                  </div>

                </div>
              </div>

              <div class="row justify-content-center">
                <div class="col-md-8">

                  <div class="row justify-content-between">
                    <div class="bare-title-left col-md-6">

                      <h2>{% block title_left %}{% endblock %}</h2>

                    </div>
                    <div class="bare-title-right col-md-6">

                      {% block title_right %}{% endblock %}

                    </div>
                  </div>

                </div>
              </div>
            {% endblock %}
          </div>

          <div class="content-body">
            <div class="row justify-content-center">
              <div class="col-md-8">

                {% block content %}{% endblock %}

              </div>
            </div>
          </div>

        </main>

      </div>
    </div>
    {% endblock %}

    <!-- messages -->
    <ul class="messages"></ul>

    <script src="{% static 'vendor/js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'vendor/js/tools.bundle.js' %}"></script>
    <script src="{% static 'vendor/js/bootbox.all.min.js' %}"></script>

    <script>
      Base.init();
    </script>

    <script>
      bootbox.setDefaults({
        backdrop: true,
        locale: 'en',
        centerVertical: true
      });
    </script>

    {% if messages %}
    <script>
      let messages = {};
    {% for message in messages %}
      if (!messages['{{message|safe|capfirst}}']) {
        messages['{{message|safe|capfirst}}'] = {
          'type': '{% if message.tags %}{{ message.tags }}{% endif %}',
          'count': 1
        };
      } else {
        messages['{{message|safe|capfirst}}'].count += 1;
      }
    {% endfor %}
      Object.keys(messages).forEach(m => {
        Base.Messages.setMessage({
          description: messages[m].count == 1 ? m : m + " (" + messages[m].count + ")",
          type: messages[m].type
        });
      });
    </script>
    {% endif %}

    {% block js_bottom %}{% endblock %}
  </body>
</html>
