{% import "_formhelpers.jinja2" as helper %}
<!doctype html>
<html lang='en'>

<head>

  {# Title #}
  <title>{% block title %}{% endblock %} - {{ config.APP_NAME }}</title>

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

  {% block css %}
    <style>
      .required:after {
        content:" *";
        color: red;
      }
      .error {
        color: red;
      }
    </style>

    {# CSS Styling #}
    {% assets "scss_all" %}
      <link rel=stylesheet type=text/css href="{{ ASSET_URL }}">
    {% endassets %}

    <link rel='stylesheet' href="{{ url_for('static', filename='font-awesome/css/all.min.css')}}">

  {% endblock %}

</head>
<body class="bg-dark text-white">


{% block header %}
  {# Header / Navigation #}
  {% include 'header.html.j2' %}
{% endblock %}


{# Content #}

<div class="container py-0">

  {# Text #}
  <div class="text-center">
    <span class="h3 mb-0"><br/>{% block content_before %}{% endblock %}<br/><br/></span>
  </div>
  {# Show any errors #}
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{category}}" role="alert">
          {{message}}
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}
</div>

{% block content_override %}
  <div class='container mt-4'>
    {% block content %}{% endblock %}
  </div>
{% endblock %}

<div class='container mt-4'>
    {% block content_after %}{% endblock %}
</div>

<footer>
  {# Footer #}
  {% block footer %}
    <hr class="my-5"/>

  {% endblock %}
</footer>


{% block js %}
  {# JavaScript #}
  <script type="text/javascript" src="{{ url_for('static', filename='bootstrap-4.2.1/js/jquery-3.3.1.min.js') }}"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='bootstrap-4.2.1/js/bootstrap.bundle.min.js') }}"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='datatables/datatables.min.js') }}"></script>
  <script type="sytylesheet" src="{{ url_for('static', filename='datatables/datatables.min.css') }}"></script>
  <script>
    // set the active nav-link item
    $(function () {
      let target_nav = '#{{request.endpoint}}'.replace('\.', '-');
      $(target_nav).addClass('active');
    });
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
    {% if config.ALLOW_ANALYTICS %}
      // Matomo JS analytics
      var _paq = window._paq = window._paq || [];
      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
      _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
      (function() {
        var u="https://matomo.aronwk.com/";
        _paq.push(['setTrackerUrl', u+'matomo.php']);
        _paq.push(['setSiteId', '3']);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
      })();
    {% endif %}
  </script>
  {% if config.ALLOW_ANALYTICS %}
    <!-- Matomo no js analytics -->
    <noscript><p><img src="https://matomo.aronwk.com/matomo.php?idsite=3&amp;rec=1" style="border:0;" alt="" /></p></noscript>
  {% endif %}

{% endblock %}

</body>
</html>
