extends ../template_70s

block title
    if title
        title #{title} | Eating the World
    else
        title Eating the World

block content
    .container#top
        .inner.full
            .centered-content
                h2(style='font-size: 26pt; padding-top: 20px') Eating the World
                ul.inline-nav
                    li
                        a.button(href=route('/food')) Home
                    li
                        a.button(href=route('/food/about')) About ETW
                    li
                        a.button(href=route('/food/archive')) Archive
                    li
                        a.button(href=route('/food/feeds')) RSS
                    li.sep
                    li
                        a.button(href=route('/')) Main Site

            if mapPosition
                div(style="margin-top: 30px; background: var(--c-background-offset-2); width: 100%; display: flex; flex-direction: row; justify-content: center;")
                    .centered-content
                            div#miniMap

            block food-content

            block contact-text
                .centered-content(style="margin-top: 100px")
                    p Questions, comments, or feedback? <a href="/#contact">Get in touch.</a>

    block map
        section#map(style='width: 100%; margin: 0; padding: 0; background: var(--c-background-offset-2);')
            div#svgMap(style='')

block append style
    link(rel='stylesheet' href=asset('map/svgMap.min.css'))
    style.
        .svgMap-tooltip {
            z-index: 200;
        }

        .svgMap-map-wrapper {
            background: rgba(0, 0, 0, 0);
        }

        .svgMap-map-wrapper .svgMap-country {
            stroke: var(--c-hero);
        }

block append script
    script(src=asset('map/svg-pan-zoom.min.js'))
    script(src=asset('map/svgMap.min.js'))
    script.
        new svgMap({
            targetElementID: 'svgMap',
            mouseWheelZoomWithKey: true,
            noDataText: 'Not yet explored',
            flagType: 'emoji',
            colorNoData: 'var(--c-background)',
            data: {
                data: {
                    posts: {
                        name: 'Explorations logged',
                        format: '{0} posts',
                    },
                    visited: {
                        name: 'Last explored',
                        format: '{0}',
                    },
                },
                applyData: 'posts',
                values: !{JSON.stringify(mapValues)},
            },
        })

    if mapPosition
        script.
            new svgMap({
                targetElementID: 'miniMap',
                mouseWheelZoomEnabled: false,
                noDataText: '',
                flagType: 'emoji',
                colorNoData: 'var(--c-background)',
                initialZoom: #{mapPosition.zoom},
                initialPan: {
                    x: #{mapPosition.x},
                    y: #{mapPosition.y}
                },
                data: {
                    data: {
                        current: {
                            name: '',
                            format: 'Cuisine being explored',
                        },
                    },
                    applyData: 'current',
                    values: {
                        #{mapPosition.country}: {current: 1}
                    },
                },
            })