{{ partial "header.html" . }}
<main role="main">
    <div class="white z-depth-1">
        <main role="main" class="container">
            <article itemscope itemtype="http://schema.org/BlogPosting" class="section">
                {{ if .Params.image }}
                <picture>
                    <source srcset="/images/min/{{ .Params.image }}.webp" type="image/webp">
                    <source srcset="/images/min/{{ .Params.image }}.jpg" type="image/jpeg">
                    <img width="100%" src="/images/min/{{ .Params.image }}.jpg">
                </picture>
                {{ end }}
                <h1 itemprop="headline" class="header">{{ .Title }}</h1>
                <span><time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02" }}"></time></span>
                {{ if .Params.rating }}
                <div class="center right">
                    <i>
                    {{ range seq .Params.rating }}
                        <img src="/fonts/icons/ic_star_black_24px.svg">
                    {{ end }}
                    {{ range seq (sub 5 (int .Params.rating)) }}
                        <img src="/fonts/icons/ic_star_border_black_24px.svg">
                    {{ end }}
                    </i>
                </div>
                {{ end }}
                <section itemprop="articleBody" class="flow-text">
                    {{ .Content }}
                </section>
                {{ if .Params.mapzoom }}
                <div class="section">
                    <div id="loadingmap" class="preloader-wrapper small active" style="left: 45%;">
                        <div class="spinner-layer spinner-blue-only">
                            <div class="circle-clipper left">
                                <div class="circle"></div>
                            </div><div class="gap-patch">
                                <div class="circle"></div>
                            </div><div class="circle-clipper right">
                                <div class="circle"></div>
                            </div>
                        </div>
                    </div>
                    <div id="mapview" style="width: 100%; height: 40em;"></div>
                    <script type="text/javascript">
                        var map,
                            mapboxReadyAttached;

                        if (typeof $ === 'undefined') {
                            document.addEventListener('DOMContentLoaded', loadMapbox);
                        }
                        if (typeof mapboxReadyAttached === 'undefined') {
                            mapboxReadyAttached = true;
                            document.addEventListener('pageReady', loadMapbox);
                        }

                        function loadMapbox() {
                            if (typeof L === 'undefined') {
                                console.log('loading mapbox files');
                                $('<link>').appendTo('head')
                                    .attr({type: 'text/css', rel: 'stylesheet'})
                                    .attr('href', 'https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css');
                                $.getScript('https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js', initMapbox);
                            } else {
                                console.log('mapbox files already present');
                                initMapbox();
                            }
                        }

                        function initMapbox() {
                            console.log('creating new map instance');
                            var lon = parseFloat({{ .Params.longitude }}),
                                lat = parseFloat({{ .Params.latitude }}),
                                zoom= parseFloat({{ .Params.mapzoom }});
                            if (typeof map !== 'undefined') {
                                console.log('old map present');
                            }
                            L.mapbox.accessToken = 'pk.eyJ1IjoiY29kZS13dnMiLCJhIjoiY2lzNHM4bWUwMDAwdTJ0cDBjYms5em9hYSJ9.VLxxJ6aTbWUbQchg58tgkA';
                            map = L.mapbox.map('mapview')
                                .setView([lat, lon], zoom);
                            var layer = L.mapbox.tileLayer('mapbox.streets').addTo(map);
                            layer.on('ready', showMapbox);
                        }

                        /* ! mapboxgl: [lon, lat] - mapboxjs: [lat, lon]… */
                        function showMapbox() {
                            var lon = parseFloat({{ .Params.longitude }}),
                                lat = parseFloat({{ .Params.latitude }}),
                                zoom= parseFloat({{ .Params.mapzoom }});

                            console.log('updating map data', [lon, lat, zoom]);
                            map.setView([lat, lon], zoom);
                            L.marker([lat, lon]).addTo(map);
                            $('#loadingmap').hide();
                            $('#mapview').show();
                        }
                    </script>
                </div> <!-- /map section -->
                {{ end }}
            </article>
        </main>
    </div>
</main>
{{ partial "footer.html" . }}