<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="robots" content="noindex" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.css">
  <!-- Unminfied -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.min.css">
  <!-- Untested, but Minified -->
  <title>CMS for my privat page</title>
</head>

<body>
  <!-- Include the script that builds the page and powers Decap CMS -->
  <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
  
  <script>
    // Register the OSM shortcode as an editor component
    window.CMS.registerEditorComponent({
      id: "osm",
      label: "OpenStreetMap",
      fields: [
        { name: "lat", label: "Latitude", widget: "string" },
        { name: "lon", label: "Longitude", widget: "string" },
        { name: "zoom", label: "Zoom", widget: "number", default: 15, required: false },
        { name: "height", label: "Height (e.g. 400px)", widget: "string", default: "400px", required: false }
      ],
      pattern: /{{<\s*osm\s+lat="([^"]+)"\s+lon="([^"]+)"(?:\s+zoom="([^"]+)")?(?:\s+height="([^"]+)")?\s*>}}/,
      fromBlock: function (match) {
        return {
          lat: match[1],
          lon: match[2],
          zoom: match[3] || "15",
          height: match[4] || "400px"
        };
      },
      toBlock: function (obj) {
        let params = `lat="${obj.lat}" lon="${obj.lon}"`;
        if (obj.zoom) params += ` zoom="${obj.zoom}"`;
        if (obj.height) params += ` height="${obj.height}"`;
        return `{{< osm ${params} >}}`;
      },
      toPreview: function (obj) {
        // Simple preview (not interactive)
        return `<div style="border:1px solid #ccc;padding:1em;">
            <strong>OpenStreetMap Widget</strong><br>
            Lat: ${obj.lat}, Lon: ${obj.lon}, Zoom: ${obj.zoom || 15}, Height: ${obj.height || "400px"}
          </div>`;
      }
    });

    // Register the carousel shortcode as an editor component
    window.CMS.registerEditorComponent({
      id: "carousel",
      label: "Image Carousel",
      fields: [
        { name: "images", label: "Images (comma-separated filenames or URLs)", widget: "string" },
        { name: "aspectRatio", label: "Aspect Ratio (e.g. 16-9)", widget: "string", required: false },
        { name: "interval", label: "Interval (ms)", widget: "number", required: false }
      ],
      pattern: /{{<\s*carousel\s+images="([^"]+)"(?:\s+aspectRatio="([^"]+)")?(?:\s+interval="([^"]+)")?\s*>}}/,
      fromBlock: function (match) {
        return {
          images: match[1],
          aspectRatio: match[2] || "",
          interval: match[3] || ""
        };
      },
      toBlock: function (obj) {
        let params = `images="${obj.images}"`;
        if (obj.aspectRatio) params += ` aspectRatio="${obj.aspectRatio}"`;
        if (obj.interval) params += ` interval="${obj.interval}"`;
        return `{{< carousel ${params} >}}`;
      },
      toPreview: function (obj) {
        // Simple preview (not interactive)
        return `<div style="border:1px solid #ccc;padding:1em;">
            <strong>Image Carousel</strong><br>
            Images: ${obj.images}<br>
            Aspect Ratio: ${obj.aspectRatio || "16-9"}<br>
            Interval: ${obj.interval || "2000"} ms
          </div>`;
      }
    });

    // Register the GPX Map shortcode as an editor component
    window.CMS.registerEditorComponent({
      id: "gpx-map",
      label: "GPX Track Map",
      fields: [
        { name: "lat", label: "Latitude", widget: "string" },
        { name: "lon", label: "Longitude", widget: "string" },
        { name: "gpx", label: "GPX File Path", widget: "string", hint: "Example: /uploads/gpx/my-track.gpx" },
        { name: "zoom", label: "Zoom Level", widget: "number", default: 13, required: false },
        { name: "height", label: "Height (e.g. 500px)", widget: "string", default: "500px", required: false }
      ],
      pattern: /{{<\s*gpx-map\s+lat="([^"]+)"\s+lon="([^"]+)"\s+gpx="([^"]+)"(?:\s+zoom="([^"]+)")?(?:\s+height="([^"]+)")?\s*>}}/,
      fromBlock: function (match) {
        return {
          lat: match[1],
          lon: match[2],
          gpx: match[3],
          zoom: match[4] || "13",
          height: match[5] || "500px"
        };
      },
      toBlock: function (obj) {
        let params = `lat="${obj.lat}" lon="${obj.lon}" gpx="${obj.gpx}"`;
        if (obj.zoom) params += ` zoom="${obj.zoom}"`;
        if (obj.height) params += ` height="${obj.height}"`;
        return `{{< gpx-map ${params} >}}`;
      },
      toPreview: function (obj) {
        // Simple preview (not interactive)
        return `<div style="border:1px solid #ccc;padding:1em;">
          <strong>GPX Track Map</strong><br>
          Lat: ${obj.lat}, Lon: ${obj.lon}<br>
          GPX: ${obj.gpx}<br>
          Zoom: ${obj.zoom || 13}, Height: ${obj.height || "500px"}
        </div>`;
      }
    });
  </script>
</body>

</html>