<script src="{{ raphael_path }}"></script>
<script src="{{ mapael_path }}"></script>
<script src="{{ map_path }}"></script>


{% if title is not empty %}
    <div class="row">
        <div class="col-12">
            <h1 class="text-center mb-5">{{ title }}</h1>
        </div>
    </div>
{% endif %}
<div class="row d-flex jusitfy-content-stretch">
    {% if showplzsearch %}
    <div class="col-12 col-sm-6 col-md-5">
        <input type="hidden" id="nearest-locations-json" value="{{ locations_json }}">
        <input type="hidden" id="nearest-locations-limit" value="{{ limit }}">
        <input type="hidden" id="nearest-locations-subject" value="{{ subject }}">
        <input type="hidden" id="nearest-locations-showTooltips" value="{{ showtooltips }}">
        <input type="hidden" id="nearest-locations-myLocationTooltip" value="{{ myLocationTooltip }}">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">PLZ</span>
            </div>
            <input type="text" maxlength="5" placeholder="Ihr Standort" id="nearest-location-plz" class="form-control">
            <div class="input-group-append">
                <button type="button" id="nearest-location-submit" class="btn btn-outline-secondary"><i class="fas fa-angle-right"></i></button>
            </div>
        </div>
        <div id="nearest-locations-area" class="mt-3"></div>
    </div>
    {% endif %}
    <div id="nearest-locations-map" class="col-12 {% if showplzsearch %} col-sm-6 col-md-7 {% endif %}" style="min-height: 200px">
        <div class="map">
            <div class="alert alert-info mb-0">
                <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                <p>
                    Das Kartenmodul kann nicht geladen werden.
                </p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $("#nearest-locations-map").mapael({
            map: {
                // Set the name of the map to display
                name: "germany", 
                defaultPlot: {
                    attrs: {
                        fill: "#0F368F",
                        opacity: 0.6
                    },
                    attrsHover: {
                        opacity: 1
                    },
                    text: {
                        attrs: {
                            fill: "#505444"
                        },
                        attrsHover: {
                            fill: "#000"
                        }
                    }
                }, 
                defaultArea: {
                    attrs: {
                        fill: "#DDE6F8"
                        , stroke: "#fff"
                    },
                    attrsHover: {
                        fill: "#b3c7ef"
                    },
                    text: {
                        attrs: {
                            fill: "#505444"
                        },
                        attrsHover: {
                            fill: "#000"
                        }
                    }
                }
            },
            {% if showlocationsinitially %}
            plots: {
                {% for k, l in locations %}
                    '{{k}}': {
                        type: "circle",
                        size: 25,
                        latitude: {{l.lat}},
                        longitude: {{l.long}},
                        {% if not showtooltips %}
                        text: {
                            content: "{{ l.name|raw|replace({'<br>': ' '}) }}",
                            position: "top",
                            attrs: {
                                "font-size": 16,
                                "font-weight": "bold",
                                fill: "#000000"
                            },
                            attrsHover: {
                                "font-size": 16,
                                "font-weight": "bold",
                                fill: "#000000"
                            }
                        },
                        attrs: {
                            opacity: 1
                        },
                        attrsHover: {
                            transform: "s1.5"
                        }
                        {% else %}
                        tooltip: {content: "{{ l.name|raw|replace({'<br>': ' '}) }}",},
                        {% endif %}
                    },
                {% endfor %}
            }
            {% endif %}
        });
    });
</script>

{% if showtooltips %}
    <style>
    #nearest-locations-map .mapTooltip {
        position: absolute;
        background-color: #474c4b;
        -moz-opacity: 0.80;
        opacity: 0.80;
        filter: alpha(opacity=70);
        border-radius: 10px;
        padding: 5px 10px;
        z-index: 1000;
        display: none;
        color: #fff;
    }
    </style>
{% endif %}