<!DOCTYPE html>
<html>
  <head>
    <!-- meta information -->
    <title>{{providers.data.title}} - {{data.name}}</title>
    {{#if data.description}}
      <meta name="description" content="{{providers.data.description}} - {{data.description}}" />
    {{/if}}
    <link
      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700|Roboto+Slab:300,400,700|Roboto:300,400,700"
      rel="stylesheet"
    >
    <!-- style -->
    <style>
      {{{css}}}
    </style>

    {{#if providers.data.gtmId}}
      <!-- GTM -->
      <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','{{providers.data.gtmId}}');</script>
    {{/if}}
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    {{#if providers.data.gtmId}}
      <!-- GTM (noscript) -->
      <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{providers.data.gtmId}}"
      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    {{/if}}
    <div class='menuBox'>
      <div class='menuItems'>
      {{#each menuItems}}
        <a href='./{{link}}'>{{name}}</a>
      {{/each}}
      </div>
    </div>
    <div class='content'>
      {{{html}}}
    </div>
    <div class='footer'>
      <div class='footerGridContainer'>
        {{#each footerItems}}
          <div class='footerColumn'>
            {{{html}}}
          </div>
        {{/each}}
      </div>
    </div>
    {{#if providers.data.adSense}}
      <div class="adSection">
        <!-- Footer AdSense Usage -->
        <ins class="adsbygoogle"
          style="display:block"
          data-ad-client="{{providers.data.adSense.client}}"
          data-ad-slot="{{providers.data.adSense.slot}}"
          data-ad-format="auto"></ins>
        
        <!-- inTextAdSense Usage -->
        <script>
        var el = document.querySelector("#usage");
        if(el) {
          console.log('found #usage')
          el.insertAdjacentHTML('beforebegin',`
            <div class="adSectionInText">
              <ins class="adsbygoogle"
                style="display:block"
                data-ad-client="{{providers.data.adSense.client}}"
                data-ad-slot="{{providers.data.adSense.slot2}}"
                data-ad-format="auto"></ins>
            </div>
          `)
        }
        [].forEach.call(document.querySelectorAll('.adsbygoogle'), function(){
            (adsbygoogle = window.adsbygoogle || []).push({});
        });
        </script>
      </div>
    {{/if}}
  </body>
</html>
