<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    {% set project_title = config.custom_title | default('Datawrapper'|trans) %}
    <title>{% if title and title != project_title %}{{ title }} | {% endif %}{{ project_title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ page_description }}">
    <meta name="author" content="{% trans "Mirko Lorenz, David Kokkelink, Gregor Aisch" %}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- favicon -->
    <link rel="apple-touch-icon" sizes="57x57" href="/static/img/icon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/static/img/icon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/static/img/icon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/static/img/icon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/static/img/icon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/static/img/icon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/static/img/icon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/static/img/icon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/img/icon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/static/img/icon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/img/icon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/static/img/icon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/img/icon/favicon-16x16.png">
    <link rel="manifest" href="/static/img/icon/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/static/img/iconms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700&amp;subset=latin-ext" rel="stylesheet">

    <!-- Le stylesi -->
    <link href="{{ config.static_path }}/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="{{ config.static_path }}/vendor/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="{{ config.static_path }}/css/datawrapper.css?v={{ COMMIT_SHA }}" rel="stylesheet">
    <link href="{{ config.static_path }}/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <script src="{{ config.static_path }}/vendor/json-js/json2.js"></script>
      <link href="{{ config.static_path }}/css/datawrapper-ie.css" rel="stylesheet">
    <![endif]-->

    {% if config.custom_css %}<link href="{{ config.static_path }}/custom/{{ config.custom_css }}?v={{ COMMIT_SHA }}" rel="stylesheet">{% endif %}
    {% if config.custom_favicon %}<link href="{{ config.custom_favicon }}" rel="shortcut icon">{% endif %}

    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/vendor/requirejs/require.js"></script>
    <script type="text/javascript" charset="utf-8">
        require.config({
            baseUrl: '/static',
            paths: {
                dw: 'js/dw',
                handsontable: 'vendor/handsontable/handsontable.full',
                jquery:       'vendor/jquery/jquery.min',
                queue:        'vendor/queue-async/queue',
                masonry:      'vendor/masonry/masonry.pkgd.min',
                imagesloaded: 'vendor/imagesloaded/imagesloaded.pkgd.min',
                chroma:       'vendor/chroma-js/chroma.min',
                cm:           'vendor/codemirror',
                d3:           'vendor/d3/d3v4+jetpack.min'
            },
            waitSeconds: 0,
            urlArgs: 'v={{ COMMIT_SHA }}'
        });
    </script>
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/vendor/jquery/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/vendor/underscore/underscore-min.js"></script>
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/vendor/cryptojs/hmac-sha256.js"></script>
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/vendor/globalize/globalize.js"></script>
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/vendor/globalize/cultures/globalize.culture.{{ locale | replace({'_':'-'}) }}.js"></script>
    {# javascript core 2.0 #}
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/js/dw-2.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/js/dw-backend.js"></script>

    {% if page_css %}
    <link href="{{ config.static_path }}/css/{{ page_css }}?v={{ COMMIT_SHA }}" rel="stylesheet">
    {% endif %}

    {% for js in plugin_js %}
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/plugins/{{ js }}"></script>
    {% endfor %}{% for css in plugin_css %}
    <link href="{{ config.static_path }}/plugins/{{ css }}" rel="stylesheet">
    {% endfor %}

  </head>


  <body class="dw {{ pageClass }} {{ language }}" data-locale="{{ locale }}">

    {% if maintenance == true %}
        <div style="height:100%; width:100%; z-index:10000; position: absolute; top:0;left:0; background:#fff; text-align:center;">
          <div style="width:620px; display:inline-block; margin-top:100px;">
              {#
              <h1>Datawrapper is undergoing some maintanance</h1>
              <h2>We'll be right back. (Your charts are unaffected by this, they always stay online.)</h2>
              #}
              <h1>We apologize for the inconvenience!</h1>
              <h2>We're moving our database to a faster server.<br>Datawrapper will be back around 2.30 am (CEST).<br>Your charts are unaffected by this, they always stay online.</h2>
              <p>You can check our <a href="https://twitter.com/datawrapper">Twitter account</a> for status updates</p>
          </div>
        </div>
    {% else %}

    {% if alertMessage %}
        <div class="dw-alert-message">
            {{ alertMessage | raw }}
        </div>
    {% endif %}

    {% if not noHeader %}

    <header class="header">
      {% use "login.twig" %}
      {{ block('login') }}

      {% use "header.twig" %}
      {{ block('header') }}
    </header>

    {% endif %}

    <div class="container">



    <!--[if lt IE 9]>
    <div style="position:relative">
        <div id="disclaimer" class="alert alert-warning span8 offset2" style="font-size:14px;line-height:22px" style="color:#821">
            <h3>{% trans "Your browser is not supported" %}</h3>
            <p>{% trans "You are using a browser that is not supported at the moment. Please use one of the following browsers instead. Note that this only applies to the chart editor. The charts itself can be viewed with any major browser." %}</p>

            <div style="text-align:center">
                <a href="http://mozilla.org/firefox/" title="Firefox" class="browser firefox"></a>
                <a href="http://google.com/chrome" title="Chrome" class="browser chrome"></a>
                <a href="http://www.opera.com/" title="Opera" class="browser opera"></a>
                <a href="http://www.apple.com/safari/" title="Safari" class="browser safari"></a>
                <a href="http://windows.microsoft.com/en-US/internet-explorer/help/ie-9/9-reasons-to-get-internet-explorer-9" title="Internet Explorer 9.0" class="browser msie"></a>
            </div>
        </div>
    </div>
    <![endif]-->


      {{ block('content') }}


    {% if not noFooter %}
      <footer class="footer">

        <p class="pull-right" style="text-align:right">
          <a href="#top">{% trans "Back to top" %}</a>
          <span class="version">version <a href="https://github.com/datawrapper/datawrapper/blob/master/CHANGELOG.md#{{ DW_VERSION | replace({ '.': '' }) }}">{{ DW_VERSION }}</a> {{ BRANCH | raw }}</span>
        </p>


        {{ hook('get_footer') }}
      </footer>
    {% endif %}

    </div>

    <div id="alertModal" class="modal hide">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div class="bg">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="light-bulb-18-icon" d="M292.2,381.263h-72.511c-5.082,0-9.201,4.12-9.201,9.203c0,5.082,4.119,9.201,9.201,9.201H292.2
c5.083,0,9.202-4.119,9.202-9.201C301.402,385.383,297.283,381.263,292.2,381.263z M290.546,411.9h-69.201
c-5.082,0-9.201,4.121-9.201,9.202c0,5.083,4.119,9.202,9.201,9.202h69.201c5.082,0,9.201-4.119,9.201-9.202
C299.747,416.021,295.628,411.9,290.546,411.9z M221.82,442.111C239.735,458.673,241.58,462,248.731,462h13.774
c6.99,0,8.714-3.084,27.564-19.889H221.82z M360.699,221.629c0,62.305-53.581,97.22-53.581,146.388h-24.4
c0.021-60.599,53.142-92.516,53.142-146.388c0-100.84-159.828-100.998-159.828,0c0,53.823,52.2,84.366,53.409,146.388h-24.668
c0-49.168-53.581-84.083-53.581-146.388C151.191,87.725,360.699,87.589,360.699,221.629z M269.203,95.112H244.14V50h25.063V95.112z
M355.264,73.97L333.18,62.12l-22.056,41.103l22.085,11.85L355.264,73.97z M419.355,136.042l-14.599-20.372l-40.099,28.739
l14.598,20.371L419.355,136.042z M423.781,294.141l-45.115-18.278l-9.409,23.229l45.116,18.277L423.781,294.141z M438.789,205.555
h-51.125v25.062h51.125V205.555z M200.876,103.223L178.82,62.12l-22.084,11.85l22.055,41.103L200.876,103.223z M147.344,144.409
l-40.101-28.739l-14.599,20.372l40.1,28.738L147.344,144.409z M143.178,296.9L132.9,274.043l-45.116,20.283l10.276,22.857
L143.178,296.9z M124.338,205.555H73.211v25.062h51.127V205.555z"></path> </svg>
        </div>
        <div class="message"></div>
        <div class="buttons">
        </div>
      </div>
    </div>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script type="text/javascript" src="{{ config.static_path }}/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">

      dw.backend.__chartCacheDomain = '{{ DW_CHART_CACHE_DOMAIN }}';
      dw.backend.__userData = {{ userData | json | raw }};
      dw.backend.__domain = '{{ DW_DOMAIN }}';
      dw.backend.__asset_domain = '{{ ASSET_DOMAIN }}';
      dw.backend.__api_domain = '{{ API_DOMAIN }}';
      dw.backend.__locale = '{{ locale | replace({'_':'-'}) }}';
      dw.backend.__commit_sha = '{{ COMMIT_SHA }}';
      dw.backend.__auth_salt = '{{ DW_AUTH_SALT }}';

      if (dw.backend.__userData.length === 0) {
        dw.backend.__userData = {};
      }
      $(function() {
        Globalize.culture('{{ locale | replace({'_':'-'}) }}');
      });
    </script>
    {% use "messages.twig" %}
    {{ block('messages') }}

    {{ hook('core_after_body') }}
    {# For backwards compatibility, we call the following hook as well. In 2.x, this will be gone and only the above one is used. #}
    {{ hook('after_core_body') }}

    {% endif %}
  </body>
</html>
