{{ define "main" }}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
crossorigin=""/>
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
     integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="
     crossorigin=""></script>
    <style type="text/css">
        #map { height: 300px; }
    </style>
    <div class="container" style="margin-top:200px;">
        <div class="row" style="min-height: 400px;">
            <div class="col-md-12" style="text-align: center;">
                <h1 style="font-size: 50px;">{{ .Title }}</h1>
                <p>{{ .Params.nr }} / {{ .Params.dnr }} - {{ .Params.height }} m - {{ .Params.typ }}</p>
            </div>
        </div>
    </div>
    <img src="{{ .Params.mainImage }}" style="max-height: 80pc; max-width: 100%;">
<div class="container" style="margin-top:30px;">
    <div class="row">
        <div class="col-md-8">   
            {{ .Content }}
        </div>
        <div class="col-md-4">
            <div id="map"></div>
        </div>
    </div>
</div>
<div class="container" style="margin-top:30px;">
  <div class="row">
    <div class="col-md-3"></div>
      <div class="col-md-6">   
        <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://www.kekskurse.de//img/2022/02/leuchtturm-ueckermuende/DSC09212.jpg" class="d-block" style="width:100%;" alt="...">
            </div>
            <div class="carousel-item">
              <img src="https://www.kekskurse.de//img/2022/02/leuchtturm-ueckermuende/DSC09225.jpg" class="d-block " style="width:100%;" alt="...">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
  </div>
</div>

<br><br>
<script>
    var leuchtTurmBund = L.icon({
    iconUrl: '/leuchturm-bunt.png',
    //shadowUrl: 'leaf-shadow.png',

    iconSize:     [50, 50], // size of the icon
    //shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [20, 40], // point of the icon which will correspond to marker's location
    //shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-0, -45] // point from which the popup should open relative to the iconAnchor
});


    var map = L.map('map').setView([53.73, 11.7], 6);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
L.marker([{{ .Params.lat }}, {{ .Params.lon }}], {icon: leuchtTurmBund}).addTo(map)


</script>

{{ end }}