{% comment %}
 coding: utf-8

 maposmatic, the web front-end of the MapOSMatic city map generation system
 Copyright (C) 2009  David Decotigny
 Copyright (C) 2009  Frédéric Lehobey
 Copyright (C) 2009  David Mentré
 Copyright (C) 2009  Maxime Petazzoni
 Copyright (C) 2009  Thomas Petazzoni
 Copyright (C) 2009  Gaël Utard
 Copyright (C) 2018  Hartmut Holzgraefe

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
{% endcomment %}

{% load i18n %}
{% load l10n %}
{% load extratags %}

<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}"{% if LANGUAGE_BIDI %} dir="rtl"{% endif %}>
  <head>
    <title>{{BRAND_NAME}}{% if DEBUG %} [DEV]{% endif %}: {% block title %}Welcome!{% endblock %}</title>
    <meta charset="utf-8" />
    <meta name="referrer" content="no-referrer"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="/media/img/favicon.png" />

    <link rel="feed" title="{% trans "Maps feed" %}" href="/feed/maps/" />

    <link rel="stylesheet" href="/media/node_modules/font-awesome/css/font-awesome.min.css">

    <script src="/media/node_modules/jquery/dist/jquery.js"></script>

    <script src="/media/node_modules/popper.js/dist/umd/popper.js"></script>
    <script src="/media/node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/media/node_modules/bootstrap/dist/css/bootstrap.css" />

    <script src="/media/node_modules/leaflet/dist/leaflet.js"></script>
    <link rel="stylesheet" href="/media/node_modules/leaflet/dist/leaflet.css" />

    <script src="/media/node_modules/leaflet-providers/leaflet-providers.js"></script>

    <link rel="stylesheet" href="/media/node_modules/leaflet-search/dist/leaflet-search.src.css"/>
    <script src="/media/node_modules/leaflet-search/dist/leaflet-search.src.js"></script>

    <link rel="stylesheet" href="/media/node_modules/leaflet-easybutton/src/easy-button.css"/>
    <script src="/media/node_modules/leaflet-easybutton/src/easy-button.js"></script>

    <link rel="stylesheet" href="/media/node_modules/leaflet.locationfilter/src/locationfilter.css"/>
    <script src="/media/node_modules/leaflet.locationfilter/src/locationfilter.js"></script>

    <script src="/media/node_modules/@mapbox/leaflet-omnivore/leaflet-omnivore.js"></script>

    <link rel="stylesheet" href="/media/node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
    <script src="/media/node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.js"></script>

    <script src="/media/node_modules/leaflet.restoreview/leaflet.restoreview.js"></script>

    <script src="/media/node_modules/leaflet-gpx/gpx.js"></script>

    <script src="/media/node_modules/fastsearch/dist/fastsearch.js"></script>

    <link rel="stylesheet" href="/media/node_modules/fastselect/dist/fastselect.css" />
    <script src="/media/node_modules/fastselect/dist/fastselect.js"></script>

    <link rel="stylesheet" href="/media/node_modules/flag-icon-css/css/flag-icon.min.css" />

    <link rel="stylesheet" href="/media/css/maposmatic.css" />

    <style>
      {% block extracss %}{% endblock %}
    </style>
  </head>

  <body class="{% block body-class %}{% endblock %}">

    {% include "./base-parts/navbar.html" %}
    
    <div class="container" style="margin-top: 5em;">
      {% if MAINTENANCE_NOTICE %}
      <div class="alert alert-danger">
        <h1><b><i class="fa fa-wrench"></i> Notice:</b> {{MAINTENANCE_NOTICE|safe }}</h1>
      </div>
      {% endif %}

      {% block page %}{% endblock %}
    </div>

    <footer class="footer">
      <p>
      {% blocktrans %}MapOSMatic is a free software webservice to generate maps of cities using OpenStreetMap data.{% endblocktrans %}
      </p>
      <p>
	{% if CONTACT_EMAIL %}
        <address><a href="mailto:{{CONTACT_EMAIL}}"><i class="fa fa-envelope"></i> {{CONTACT_EMAIL}}</a></address>
	{% endif %}
        &nbsp;
        &nbsp;
        &nbsp;
        {% if CONTACT_CHAT %}
	<a href="{{CONTACT_CHAT}}"><i class="fa fa-comment"></i> <tt>{{CONTACT_CHAT}}</tt></a>
	{% endif %}
      </p>
      {{ EXTRA_FOOTER|safe }}
<!--
      <p class="hosted-by">
      {% blocktrans %}MapOSMatic website and rendering pipeline hosted by <a href="http://www.enix.org">eNiX</a>.<br />GIS database hosted by the <a href="http://www.fsffrance.org">Free Software Foundation France</a>.{% endblocktrans %}
      </p>
-->
    </footer>

    <script type="text/javascript">
      var locationFilter = null;

      // Set focus to the search field
      $('#id_query').focus();

      $('.tooltipped').tooltip();
      $('.popovered').popover({ trigger: 'hover' });

      function set_map_bounds(map, array, closest) {
        try {
          map.fitBounds([[array[0][0],array[0][1]],[array[1][0],array[1][1]]]);
        } catch (err) {
        }
      }

      function create_map(elt) {
        var osmLayer    = L.tileLayer.provider('OpenStreetMap.Mapnik');
        var germanLayer = L.tileLayer.provider('OpenStreetMap.DE');

        var map = L.map(elt.attr('id')).addLayer(osmLayer);

        /*
        var baseLayers = {
                           'OSM':    osmLayer, 
                           'German': germanLayer
                         };
        L.control.layers(baseLayers).addTo(map);
        */

        {% if OUTER_BOUNDS_JSON %}
        var boundsStyle = {
          "color": "#ff7800",
          "weight": 5,
          "opacity": 0.5,
          "fillColor": "#ffffff",
          "fillOpacity": 0.8
        };

        L.geoJSON({{ OUTER_BOUNDS_JSON|safe }}, { style: boundsStyle }).addTo(map);
	{% endif %}

        if (elt.attr('data-geo-osm-id') && elt.attr('data-geo-osm-id') != 'None') {
          $.getJSON('/apis/polygon/' + elt.attr('data-geo-osm-id') + '/',
            function(data) {
              set_map_bounds(map, data.bbox);
              omnivore.wkt.parse(data.wkt).addTo(map);
            })
            .fail(function() {
              map.fitWorld();
            });
        } else if (elt.attr('data-geo-from-lat')) {
          set_map_bounds(map, [
            [elt.attr('data-geo-from-lat'), elt.attr('data-geo-from-lon')],
            [elt.attr('data-geo-to-lat'), elt.attr('data-geo-to-lon')]
          ]);
          L.rectangle([
              [elt.attr('data-geo-from-lat'), elt.attr('data-geo-from-lon')],
              [elt.attr('data-geo-to-lat'), elt.attr('data-geo-to-lon')]
            ], {stroke: true, fill: false, color: '#0000ff', weight: 1, opacity: 0.5}
          ).addTo(map);
        } else if (!map.restoreView()) {
          set_map_bounds(map, [
            [$('#id_lat_upper_left').val(), $('#id_lon_upper_left').val()],
            [$('#id_lat_bottom_right').val(), $('#id_lon_bottom_right').val()]
          ]);

          map.locate({setView: true, maxZoom: 13});
        }

        {% if MAX_BOUNDING_BOX %}
	  map.setMaxBounds([ [ {{ MAX_BOUNDING_BOX.0 }}, {{ MAX_BOUNDING_BOX.1 }} ],
	                     [ {{ MAX_BOUNDING_BOX.2 }}, {{ MAX_BOUNDING_BOX.3 }} ] ]);
        {% endif %}

        return map;
      }

      {% if gis_lastupdate %}
      $('.mapthumbnail').each(function(i, elt) {
        elt = $(elt);
        $('p', elt).hide();
        create_map(elt);
      });
      {% endif %}

      {% block extrajs %}{% endblock %}
    </script>

    {% if PIWIK__BASE_URL %}
    <!-- Piwik statistics -->
    <script type="text/javascript">
      var pkBaseURL = document.location.protocol + '{{ PIWIK_BASE_URL }}';
      document.write(unescape("%3Cscript src='" + pkBaseURL
            + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
    </script><script type="text/javascript">
      try {
        var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", {% if DEBUG %}3{% else %}2{% endif %});
        piwikTracker.trackPageView();
        piwikTracker.enableLinkTracking();
      } catch (err) {}
    </script>
    <noscript>
      <img src="{{ PIWIK_BASE_URL }}?idsite={% if DEBUG %}3{% else %}2{% endif %}" />
    </noscript>
    <!-- End Piwik Tag -->
    {% endif %}
  </body>
</html>
