{% extends "base.html" %}

{% import "macros.html" as macros %}

{% block styles %}
    <link rel="stylesheet"
          href="{{ get_url(path='leaflet/leaflet.css') | safe }}?v={{ now(timestamp=true) }}">
{% endblock %}

{% block content %}
    <div class="grid grid-cols-1 gap-y-4 gap-x-6 items-center mb-5 md:grid-cols-2">
        {% set image = resize_image(path=config.extra.portrait_path, height=500, op="fit_height") %}
        <img class="object-contain justify-self-center rounded drop-shadow"
             src="{{ image.url }}"
             alt="">

        {{ section.content | safe }}
    </div>

    <div class="flex justify-center">{{ macros::btn(link=get_url(path='@/angebot/index.md') , text="User Angebot") }}</div>
    <div class="flex justify-center">
        {{ macros::btn(link=get_url(path='@/termin/index.md') , text="Terminvereinbarung") }}
    </div>

    <div class="mt-4 shadow h-[40vh]" id="map"></div>

    <p class="mt-8 text-center">
        Empfohlen vom <a href="https://boemershotel.de">Ringhotel Bömers</a>, eine tolle Übernachtungsmöglichkeit in der Nähe.
    </p>
{% endblock %}

{% block scripts %}
    <script src="{{ get_url(path='leaflet/leaflet.js') | safe }}?v={{ now(timestamp=true) }}"></script>
    <script type="module">
        L.Icon.Default.imagePath = "{{ get_url(path='leaflet/images/', trailing_slash=true) | safe }}";

        var center = L.latLng(50.05427, 7.11814);
        var map = L.map('map', {
            center: center,
            zoom: 17,
            scrollWheelZoom: false,
        });

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            minZoom: 5,
            maxZoom: 19,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);

        L.marker(center).addTo(map).bindPopup("{{ config.description }}").openPopup();
    </script>
{% endblock %}