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

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

{% set extent_geojson = dataset_footprint.__geo_interface__ %}

{% 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.type.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('region_page', region_code=dataset_region_code, product_name=dataset.type.name)}}">
                        {{- dataset_region_code -}}
                    </a>
                {% endif %}
            for
            {{ dataset | dataset_day_link(grouping_timezone) }}
        </div>
    </div>

    {% if source_datasets or derived_datasets %}
    <div class="panel">
        {% for classifier, s_dataset in source_datasets.items() %}
            <div>
                <span title="Source '{{ classifier }}'">
                    <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.type.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">
        <h3>Fields</h3>
        {{ query_param_list(
            dataset.metadata.fields,
            wide=true,
            show_dicts=false,
            descriptions=dataset.type.metadata_type.dataset_fields
            ) }}
    </div>
    <div class="panel overflowable">
        <h3>Locations</h3>
        {% for uri in dataset.uris %}
            <div class="dataset-location">
                <div><strong>Active:</strong></div>
                <div class="uri-path"><a href="{{ uri | resolve_remote_url }}">{{ uri }}</a></div>
                {% set dataset_paths = dataset | dataset_file_paths %}
                {% if dataset_paths %}
                    <details>
                        <summary>
                            {{- dataset_paths | length }}
                            link{{ 's' if dataset_paths | length > 1 else '' -}}
                        </summary>
                        <table class="data-table">
                            {% for name, offset in dataset_paths | dictsort %}
                                <tr>
                                    <th style="text-align: right">{{ name }} </th>
                                    <td>
                                        <a href="{{ offset | resolve_remote_url(uri) }}"
                                           class="uri-path">
                                            {{ offset }}
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </table>
                    </details>
                {% endif %}
            </div>

        {% else %}
            No known active locations
        {% endfor %}

        {% if archive_location_times %}
            {% for uri, archive_time in archive_location_times %}
                <div class="dataset-location">
                    <div><strong>Archived {{ archive_time | timesince }}:</strong></div>
                    <span class="uri-path archived">{{ uri }}</span>
                </div>
            {% endfor %}
        {% endif %}
    </div>

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


    <div class="panel odd">
        <h3 class="followed">Metadata Document</h3>
        <div class="header-follow">
            <a href="{{ url_for('dataset.raw_doc', id_=dataset.id) }}" class="badge">RAW <i class="fa fa-file-text-o" aria-hidden="true"></i></a>
            <a href="{{ url_for('stac.item', collection=dataset.type.name, dataset_id=dataset.id) }}"
               class="badge">As Stac <i class="fa fa-file-text-o" 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: 7,
                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors,' +
                    ' &copy; <a href="https://cartodb.com/attributions">CartoDB</a>'
                }
            );

            const dataset_data = L.geoJson({{ extent_geojson | torapidjson }},
                {
                    interactive: false,
                    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: 5});

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

{% endblock %}
