{% extends "_base.html" %}
{% block title %}{{ super() }} {% trans %}{ data['title'] }{% endtrans %} {% endblock %}
{% block crumbs %}{{ super() }}
{% if 'collection_path' in data %}
/ <a href="{{ data['collections_path'] }}">{% trans %}Collections{% endtrans %}</a>
/ <a href="{{ data['collection_path'] }}">{{ data['collection_title'] }}</a>
{% endif %}
/ <a href="{{ data['collection_tilesets_path'] }}">{% trans %}TileSets{% endtrans %}</a>
/ <a href="./{{ data['id'] }}">{{ data['id'] | truncate( 25 ) }}</a>
{% endblock %}

{% block extrahead %}
<script src="{{ config['server']['url'] }}/../demo/static/ol.js"></script>
<script src="{{ config['server']['url'] }}/../demo/static/proj4.min.js"></script>
<link rel="stylesheet" href="{{ config['server']['url'] }}/../demo/static/ol.css"/>

{% endblock %}

{% block body %}
    <section id="tileset">
      {% if 'collection_path' in data %}
      <h2>{{ data['id'] }} {% trans %}map tileset for{% endtrans %} {{ data['collection_title'] }}</h2>
      {% else %}
      <h2>{{ data['id'] }} {% trans %}map tileset for whole dataset{% endtrans %}</h2>
      {% endif %}

      <div class="row">
        <div class="col-sm-12">
           <div id='collection-tileset-map' style="height:500px"></div>
        </div>
      </div>

       <div class="row">
        <div class="col-sm-12">
          <ul>
            <li>Tile URL template for PNG tiles: <i>{{ data['png_tiles_href'] }}</i></li>
            <li>Tile URL template for JPEG tiles: <i>{{ data['jpeg_tiles_href'] }}</i></li>
            <li>CRS: <i>{{ data['crs'] }}</i></li>
            <li><a href="{{ data['tms_def_href'] }}">Tile matrix set definition</a></li>
          </ul>
         </div>
       </div>

    </section>
{% endblock %}

{% block extrafoot %}

<script type="text/javascript">

    async function init() {

        const srs = "{{ data['srs'] }}";
        const extent = {{ data['extent'] }};

        if (!ol.proj.get(srs)) {
            const allDefs = await import('./static/proj4defs.js');
            const srsNum = srs.indexOf(':') > -1 ? parseInt(srs.split(':')[1]) : parseInt(srs);
            if (!allDefs.defs[srsNum]) {
                alert("The preview map does not support this coordinate system");
                return;
            }
            proj4.defs(srs, allDefs.defs[srsNum]);
            ol.proj.proj4.register(proj4);
        }

        const background_source = new ol.source.XYZ({
            url: "{{ data['background_url'] }}",
            projection: "EPSG:3857"
        });

        const source = new ol.source.XYZ({
            url: "{{ data['tileset_xyz_url'] }}",
            projection: srs
        });

        const layers = [
            new ol.layer.Tile({
                source: background_source
            }),
            new ol.layer.Tile({
                source: source
            }),
        ];
        const map = new ol.Map({
            layers: layers,
            target: 'collection-tileset-map',
            view: new ol.View({
                projection: srs
            })
        });
        map.getView().fit(extent);

        setDimension = (dimension, value) => {
            const update = {};
            const key = dimension.toUpperCase();
            update[key] = value;
            source.updateParams(update);
        }

        zoomToFullExtent = () => {
            map.getView().fit(extent);
        }

        toogleBackgroundMap = () => {
            layers[0].setVisible(!layers[0].getVisible());
        }
    }

    window.addEventListener("load", init);

</script>
{% endblock %}