<!DOCTYPE html>

<html lang="en">

  <head>
    <title>{% if page and page.title %}{{ page.title }} |{% endif %} {% block title%}{{ config.title }}{% endblock %}</title>
    <meta name="description" content="{% block description%}{{ config.description }}{% endblock %}">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta property="og:type" content="website">
    {% block ogtitle %}
    <meta property="og:title" content="{% block og_title%}{{ config.title }}{% endblock %}">
    {% endblock %}
    {% block ogdescription %}
    <meta property="og:description" content="{% block og_description%}{{ config.description }}{% endblock %}">
    {% endblock %}
    <meta property="og:site_name" content="{{ config.extra.author }}">
    <meta property="og:url" content="{{ config.base_url }}">
    <meta property="og:image" content={{ get_url(path='images/logo@2x.png', cachebust=true) }}>
    {% block meta %}{% endblock meta %}

    <meta name="theme-color" content="#715ec7">
    <link rel="manifest" href="/manifest.json" />

    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-114x114.png') }}" sizes="114x114">
    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-120x120.png') }}" sizes="120x120">
    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-144x144.png') }}" sizes="144x144">
    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-152x152.png') }}" sizes="152x152">
    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-180x180.png') }}" sizes="180x180">
    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-57x57.png') }}" sizes="57x57">
    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-60x60.png') }}" sizes="60x60">
    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-72x72.png') }}" sizes="72x72">
    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-76x76.png') }}" sizes="76x76">
    <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon.png') }}">

    <link rel="icon" href="{{ get_url(path='/favicon-16x16.png') }}" sizes="16x16">
    <link rel="icon" href="{{ get_url(path='/favicon-32x32.png') }}" sizes="32x32">
    <link rel="icon" href="{{ get_url(path='/favicon-96x96.png') }}" sizes="96x96">

    <link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="shortcut icon" type="image/x-icon">
    <link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="icon" type="image/x-icon">

    {% block styles %}{% endblock %}
  </head>

  <body>

    <!-- HEADER -->

    <div class="container-fluid container-header shadow th sticky-top">

      <header class="container">

        <nav class="navbar navbar-expand-lg navbar-light bg-th-1 justify-content-center justify-content-between pt-md-3 pb-md-3" role="navigation">

          <a class="navbar-brand logo mr-0" href="/">
            <img src="{{ get_url(path='images/logo@2x.png') }}" height="25" alt="logo">
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>


          <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav ml-0 ml-md-auto text-left text-lg-left pt-2 pb-2 pt-md-0 pb-md-0">

              {% set section = get_section(path='_index.md') %}
              {% for section in section.subsections %}

                {% set subsection = get_section(path=section) %}
                {% set root_current_path = current_path | split(pat='/') | first %}
                {% set root_section_path = subsection.path | split(pat='/') | first %}

                {% if subsection.pages|length > 0 and subsection.title != 'Other' %}

                  <li class="nav-item ml-0 ml-md-4 dropdown {% if root_current_path == root_section_path %}active{% endif %}">
                    <a class="nav-link dropdown-toggle {% if current_path == subsection.path %}active{% endif %}" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      {{ subsection.title }}
                    </a>
                    <div class="dropdown-menu shadow-none shadow-lg text-left text-lg-left" aria-labelledby="navbarDropdown">
                      {% for tmp_page in subsection.pages %}
                        {% if tmp_page.extra.menu_item and tmp_page.extra.menu_item == "th1" %}
                        <a class="dropdown-item pt-2 pb-2 mx-4 mt-2 mb-2 mt-sm-3 mb-sm-3 w-auto btn btn-primary btn-inversed {% if current_path == tmp_page.path %}active{% endif %}" href="{{ tmp_page.permalink }}">{{ tmp_page.title }}</a>
                        {% else %}
                        <a class="dropdown-item pt-2 pb-2 {% if current_path == tmp_page.path %}active{% endif %}" href="{{ tmp_page.permalink }}">{{ tmp_page.title }}</a>
                        {% endif %}
                      {% endfor %}
                    </div>
                  </li>

                {% elif subsection.title != 'Other' %}

                  <li class="nav-item ml-0 ml-md-4 {% if current_path == subsection.path %}active{% endif %}">
                    <a class="nav-link" href="{{ subsection.permalink }}">{{ subsection.title }}</a>
                  </li>

                {% endif %}

              {% endfor %}

            </ul>

          </div>

        </nav>

      </header>

    </div>

    <!-- ./HEADER -->

    <!-- HERO -->
    {% block hero %}
    {% endblock %}
    <!-- ./HERO -->

    <!-- MAIN CONTENT -->
    {% block main %}
    {% endblock %}
    <!-- ./MAIN CONTENT -->

    <noscript id="deferred-main-styles">
      <link rel="stylesheet" href="{{ get_url(path='css/bootstrap-4.3.1.min.css', cachebust=true) }}">
      <link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}">
      {% block deferred_styles %}{% endblock %}
    </noscript>
    <script>
      var loadDeferredMainStyles = function() {
        var addStylesNode = document.getElementById("deferred-main-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredMainStyles, 0); });
      else window.addEventListener('load', loadDeferredMainStyles);
    </script>

    <!-- FOOTER -->

    {% block footer %}
    <footer class="container text-center text-md-left">

      {% block footer_contact %}

        {% include "includes/footer_contact_direction.html" %}

      {% endblock %}

      <p class="pt-4 pb-2 text-center">
        <small>Copyright &copy; <span id="copyright_year"></span>, M-Labs. All Rights Reserved.</small>
      </p>

      {% block fcopyright %}
      {% endblock %}

    </footer>
    {% endblock footer %}

    <!-- ./FOOTER -->

    <!-- MODAL for enlarged picture -->
    <div class="modal" id="modalEnlarged" tabindex="-1" role="dialog">
      <div class="modal-dialog mx-auto modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-body mx-auto">
            <img src="" id="enlarged" class="img-fluid">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>


    <!-- <script src="{{ get_url(path='js/as.js', cachebust=true) }}"></script> -->

    <script src="{{ get_url(path='js/jquery-3.3.1.min.js', cachebust=true) }}"></script>
    <script src="{{ get_url(path='js/popper-1.14.7.min.js', cachebust=true) }}"></script>
    <script src="{{ get_url(path='js/bootstrap-4.3.1.min.js', cachebust=true) }}"></script>

    <script>

      (function () {
        var cy = document.getElementById('copyright_year');
        if (cy) {
          cy.textContent = (new Date()).getFullYear();
        }
      })();

    </script>

    <script>
      $(function () {
        $('#modalEnlarged').on('hidden.bs.modal', function (e) {
          $('#enlarged').attr('src', '');
        });

        $('[data-popup]').click(function (evt) {
          var _self = $(this);
          var _img_enlarged = _self.data('nsrc');
          $('#enlarged').attr('src', _img_enlarged);
          $('#modalEnlarged').modal('show');
        });
      });
    </script>

    {% block js %}
    {% endblock %}

  </body>

</html>
