{% extends "base.html" %}

{% block title %}{{ db_name }} - Tile explorer{% endblock %}

{% block extra_head %}
<script src="{{ datasette_leaflet_url }}"></script>
<link rel="stylesheet" href="{{ datasette_leaflet_css_url }}">
<style type="text/css">
.tiles-metadata th {
    font-weight: bold;
}
.tiles-metadata td {
    border-top: none;
    border-left: none;
}
</style>
{% endblock %}

{% block content %}
<h1>{{ metadata.name or db_name }}</h1>

<p><a href="{{ db_path }}">{{ db_name }}</a>: <a href="{{ db_path }}/tiles">tiles</a>, <a href="{{ db_path }}/metadata">metadata</a></p>

<div id="explorer"></div>

<h2>Metadata</h2>

<table class="tiles-metadata">
    {% for key, value in metadata.items() %}
    <tr><th>{{ key }}</th><td>{{ value }}</td></tr>
    {% endfor %}
</table>

<script type="module">
window.DATASETTE_CLUSTER_MAP_TILE_LAYER = "/-/tiles/{{ db_name }}/{z}/{x}/{y}.png";
window.DATASETTE_CLUSTER_MAP_TILE_LAYER_OPTIONS = {
    "minZoom": {{ min_zoom }},
    "maxZoom": {{ max_zoom }},
    "tms": true{% if attribution %},
    "attribution": {{ attribution|safe }}{% endif %}
};
import('{{ datasette_leaflet_url }}')
    .then((leaflet) => {
    let div = document.querySelector("#explorer");
    div.style.height = '80vh';
    let tiles = leaflet.tileLayer(
        window.DATASETTE_CLUSTER_MAP_TILE_LAYER,
        window.DATASETTE_CLUSTER_MAP_TILE_LAYER_OPTIONS
    );
    let map = leaflet.map(div, {
        center: leaflet.latLng({{ default_latitude }}, {{ default_longitude }}),
        zoom: {{ default_zoom }},
        layers: [tiles]
    });
});
</script>

{% endblock %}