<%
    import json
%>
<!DOCTYPE html>
<!-- OEREB Client, version ${config['version']} -->
<html lang="de">
  <head>
    <title>${title}</title>
    <link rel="shortcut icon" type="image/png" href="${config['application']['icon']}"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=9,IE=10,IE=edge,chrome=1" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    % if debug:
    <link rel="stylesheet" href="${request.static_url('oereb_client:../node_modules/openlayers/dist/ol-debug.css')}" type="text/css">
    % endif
    <link rel="stylesheet" href="${request.static_url('oereb_client:static/build/app.css')}" type="text/css">
    % if custom_css_url:
    <link rel="stylesheet" href="${custom_css_url}" type="text/css">
    % endif
    <base href="${config['application_url']}">
  </head>
  <body>

    <div id="config">
      ${json.dumps(config) | n}
    </div>
    <div id="app"></div>

    <div class="modal fade" id="permalinkModal" tabIndex="-1" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Permalink</h5>
            <button type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <input class="form-control" />
          </div>
        </div>
      </div>
    </div>

    % if config.get('test_instance_notice', None) is not None:
    <div id="testNotice">
      <div>
        <div>
          ${config.get('test_instance_notice')}
        </div>
      </div>
    </div>
    <script>
      (function() {
        let notice = document.getElementById('testNotice');
        let bottom = Math.round(
          Math.sqrt(Math.pow(notice.offsetWidth, 2)/2.0)/2.0 + notice.offsetHeight/2.0 - 100
        );
        notice.style.right = '-100px';
        notice.style.bottom = bottom.toString() + 'px';
        notice.style.visibility = 'visible';
      })();
    </script>
    % endif

    <script>
      window.applicationUrl = "${config['application_url']}";
    </script>

    <script src="${request.static_url('oereb_client:static/build/app.js')}"></script>

    % if google_analytics:
    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', '${google_analytics}']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' === document.location.protocol ? 'https://ssl' : 'http://www') +
                  '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
    % endif

  </body>
</html>
