{% 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 %}

    <title>Vault &rsaquo; {% block title %}{% endblock %}</title>

    <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' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'vault/css/custom-bootstrap.css' %}">
    {% block css %}{% endblock %}

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

  <body class="{% block bodyclass %}{% endblock %}">
    {% block main_content %}

    <main role="main">
      {% block sidebar %}
        <div class="sidebar-container">
          {% include 'vault/sidebar.html' %}
        </div>
      {% endblock %}

      <section class="main-content">
        <div class="container-fluid">

          <div class="row">
            <div class="col-md-12">

              <div class="content-title">
                <span class="some-top-info">
                  {% block some_top_info %}
                    project&nbsp;<strong>{{ project_name }}</strong>
                  {% endblock %}
                </span>

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

                {% include 'vault/user_info.html' %}
              </div>

            </div>
          </div>

          <div class="row">
            <div class="col-md-12">

              <div class="content-top">
                <div class="top-left">
                  {% block breadcrumb %}
                      <span class="content-breadcrumb">
                        {% spaceless %}
                          {% block content_breadcrumb %}{% endblock %}
                        {% endspaceless %}
                      </span>
                  {% endblock %}
                </div>

                <div class="top-right">
                  {% block content_top %}{% endblock %}
                </div>
              </div> <!-- .content-top -->

            </div>
          </div>

          <div class="row">
            <div class="col-md-12">

              <div class="content-body">
                {% block content %}{% endblock %}
              </div>

            </div>
          </div>

        </div>
      </section>

    </main>
    {% endblock %}

    <!-- debug -->
    {% if DEBUG %}
      {% include "vault/debug.html" %}
    {% endif %}

    <!-- 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.min.js' %}"></script>
    <script src="{% static 'vendor/js/vue.js' if DEBUG else 'vendor/js/vue.min.js' %}"></script>

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

    <script src="{% static 'vault/js/vault-menu.js' %}"></script>
    <script>VaultMenu('{% url "apps_info" %}');</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>
