{% extends "layout/base.html" %}

{% block title %}{{ dataset | printable_dataset }}{% endblock %}

{% set extent_geojson = dataset_footprint.__geo_interface__ %}
{% set thumbnail_url = dataset | dataset_thumbnail_url %}
{% set image_bounds = dataset_bounds.__geo_interface__ if dataset_bounds is not none else 'NONE' %}

{% block head %}
    {{ super() }}
    <style type="text/css">
        .tree-node, details {
            margin-left: 30px;
        }
        summary {
            font-weight: bold;
            padding: 5px 0;
            color: #484848;
        }

        .dataset-location + .dataset-location {
            margin-top: 15px;
        }

        #dataset-map {
            height: 500px;
        }

        td, th {
            vertical-align: top;
        }

    </style>
{% endblock %}
{% block panel %}

{% endblock %}
{% block content %}
    {% from "layout/macros.html" import query_param_list, show_raw_document %}
    <div class="panel highlight">
        <h2 class="followed"><strong>{{ dataset | printable_dataset }}</strong></h2>
        <div class="header-follow">
                dataset of product {{ dataset.product.name | product_link }}
        </div>
        <div class="sub-header">
            <span>
                Indexed by <strong>{{ dataset.indexed_by }}</strong>
                {{ dataset.indexed_time | timesince }},
                created {{ dataset | dataset_created | timesince }}
                {% if dataset.archived_time %}
                    <div>
                        Archived
                        <span title="{{ dataset.archived_time }}">
                        {{ dataset.archived_time | timesince }}
                        </span>
                    </div>
                {% endif %}
            </span>
        </div>
        <div class="sub-header">
            {% if dataset_region_code %}
                Region
                <a href="{{ url_for('pages.region_page', region_code=dataset_region_code, product_name=dataset.product.name)}}">
                    {{- dataset_region_code -}}
                </a>
            {% endif %}
            for
            {{ dataset | dataset_day_link(grouping_timezone) }}
        </div>
    </div>

    {% if extent_geojson %}
        <div id="dataset-map"></div>
    {% endif %}

    <div class="panel odd">
        <h3>
            Fields
            {{ hanchor('fields') }}
        </h3>
        {{ query_param_list(
            dataset.metadata.fields,
            wide=true,
            show_dicts=false,
            descriptions=dataset.product.metadata_type.dataset_fields,
            dataset=dataset
            ) }}
    </div>

    {% if source_datasets or derived_datasets %}
        <div class="panel">
            <h3>
                Related Datasets
                {{ hanchor('related-datasets') }}
            </h3>
            {% for s_dataset in source_datasets %}
                <div>
                    <span title="Source dataset">
                        <i class="fa fa-level-up fa-flip-horizontal" aria-hidden="true"></i>
                        <a href="{{ url_for('dataset.dataset_page', id_=s_dataset.id) }}">
                            {{ s_dataset | printable_dataset }}
                        </a>
                    </span>
                </div>
            {% endfor %}
            {% if source_dataset_overflow %}
                <span title="Too many to display">... {{ source_dataset_overflow }} more</span>
            {% endif %}
            <div class="tree-node">
                <strong class="active-tree-node">
                    <i class="fa fa-caret-right" aria-hidden="true"></i>
                    {{ dataset | printable_dataset }}
                </strong>
                {% for d_dataset in derived_datasets %}
                    <div class="tree-node">
                        <span title="Derived {{ d_dataset.product.name }}">
                            <i class="fa fa-level-down" aria-hidden="true"></i>
                            <a href="{{ url_for('dataset.dataset_page', id_=d_dataset.id) }}">
                                {{ d_dataset | printable_dataset }}
                            </a>
                        </span>
                    </div>
                {% endfor %}
                {% if derived_dataset_overflow %}
                    <span title="Too many to display">... {{ derived_dataset_overflow}} more</span>
                {% endif %}
            </div>
        </div>
    {% endif %}

    <div class="panel odd overflowable">
        <h3>
            Location
            {{ hanchor('location') }}
        </h3>
        {% if dataset.uri %}
            <div class="dataset-location">
                <p class="uri-path"><a href="{{ dataset.uri | resolve_remote_url }}">{{ dataset.uri }}</a></p>
                {% set dataset_paths = dataset | dataset_file_paths %}
                {% if dataset_paths %}
                    <table>
                        {% for name, offset in dataset_paths | dictsort %}
                            <tr>
                                <th class="right nowrap">
                                    {{ name }}
                                    <i class="fa fa-caret-right" aria-hidden="true"></i>
                                </th>
                                <td>
                                    <a href="{{ offset | resolve_remote_url(dataset.uri) }}"
                                       class="uri-path">
                                        {{ offset }}
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
                {% endif %}
            </div>

        {% else %}
            No known active locations
        {% endif %}
    </div>



    <div class="panel overflowable">
        <h3 class="followed">
            Metadata Document
            {{ hanchor('metadata-doc') }}
        </h3>
        <div class="header-follow">
            <a href="{{ url_for('dataset.raw_doc', id_=dataset.id) }}" class="badge">RAW <i class="fa-solid fa-file-text" aria-hidden="true"></i></a>
            <a href="{{ url_for('stac.item', collection=dataset.product.name, dataset_id=dataset.id) }}"
               class="badge">As Stac <i class="fa-solid fa-file-text" aria-hidden="true"></i></a>
        </div>
        {{ show_raw_document(dataset_metadata) }}
    </div>
{% endblock %}

{% block body_footer %}
    {{ super() }}

    {% if extent_geojson %}
        <script type="application/javascript">

            const osm_carto_light = L.tileLayer(
                "//cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
                {
                    maxZoom: 10,
                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors,' +
                    ' &copy; <a href="https://cartodb.com/attributions">CartoDB</a>'
                }
            );
            var coords = [];
            const dataset_data = L.geoJson({{ extent_geojson | torapidjson }},
                {
                    style: function (feature) {
                        return {
                            color: "#1d81a7",
                            fill: true,
                            fillColor: "#1d81a7",
                            opacity: 0.8,
                            weight: 2,
                            clickable: false
                        };
                    }
                });
            const map = L.map("dataset-map", {
                zoom: 3,
                center: [-26.2756326, 134.9387844],
                layers: [osm_carto_light, dataset_data],
                zoomControl: false,
                attributionControl: false,
                scrollWheelZoom: false
            });
            L.control.zoom({position: "bottomright"}).addTo(map);
            map.fitBounds(dataset_data.getBounds(), {animate: false, maxZoom: 6});
            if ("{{ thumbnail_url }}") {
                if ("{{ image_bounds }}" != "NONE") {
                    bounds = L.geoJson({{ image_bounds | torapidjson }}).getBounds();
                } else {
                    // if no image bounds, go for the next best thing
                    bounds = dataset_data.getBounds();
                }
                L.imageOverlay("{{ thumbnail_url }}", bounds).addTo(map);
            }

            window.MAP = map;
        </script>
    {% endif %}

{% endblock %}
