{% extends "base.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-12 col-sm-8 col-md-6">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">{{ place.name }}</h4>
            </div>
            <div class="card-body row">
                <div class="col-12" id="map" style='height: 500px;'></div>
                <div class="col-6">
                    <address>
                        {{ place.address }}<br />
                        {{ place.postal }} {{ place.city }}<br />
                        {{ place.country.nameus }}
                    </address>
                </div>
                <div class="col-6 text-right">
                    {% if place.nbkm %}{{ place.nbkm }}km<br />{% endif %}
                    {% if place.timing %}{{ place.timing }}min.<br />{% endif %}
                    {% if not place.active %}Inactive{% endif %}
                </div>
            </div>
            <div class="card-footer pt-0">
                <a href="{% url 'place_list' %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning ">
                        <i class="tim-icons icon-double-left"></i>
                    </button>
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block footerscript %}
<script type="text/javascript">
    L.mapbox.accessToken = 'pk.eyJ1IjoiZ3RydWxsZW0iLCJhIjoiY2p2Mm5wa3YzMDE1eTQ0cDJlOGdsZno4ZCJ9.zrOWNO0F4VTd9_h-LSSkzw';

    var geocoder = L.mapbox.geocoder('mapbox.places');
    geocoder.query('{{ place.address }} {{ place.postal }} {{ place.city }}', showMap);
    var map = L.mapbox.map('map').addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
    // var map = L.mapbox.map('map').addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/dark-v10'));

    // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    //     attribution: 'blablabla'
    // }).addTo(map);

    function showMap(err, data) {
        // The geocoder can return an area, like a city, or a point, like an
        // address. Here we handle both cases, by fitting the map bounds to an
        // area or zooming to a point.
        if (data.lbounds) {
            map.fitBounds(data.lbounds);
        } else if (data.latlng) {
            map.setView([data.latlng[0], data.latlng[1]], 10);
            L.marker([data.latlng[0], data.latlng[1]]).addTo(map);
        }
    }
</script>
{% endblock %}