<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css">
    <title>Static CMS</title>
  </head>
  <body>
    <style>
      body {
        font-family: sans-serif;
      }
      .icon-md {
        font-size: 25px;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/@staticcms/app@^1.2.7/dist/static-cms-app.js"></script>
    <!--script src="https://cantorgymnasium.de/plugins/wordcloud/wordcloud2.min.js"></script-->
    <script id="cms-init">
      CMS.init();
    </script>
    <script id="icons">
      var icons = [['settings', 'mdi mdi-cog-outline'], ['user', 'mdi mdi-fountain-pen-tip'], ['page', 'mdi mdi-file-document-outline'], ['page-add', 'mdi mdi-file-document-plus-outline'], ['document', 'mdi mdi-file-document-multiple-outline'], ['news', 'mdi mdi-newspaper'], ['award', 'mdi mdi-seal-variant'], ['group', 'mdi mdi-crowd'], ['trophy', 'mdi mdi-trophy-outline'], ['pi', 'mdi mdi-pi-box'], ['pillar', 'mdi mdi-pillar'], ['graduation-cap', 'mdi mdi-school-outline'], ['help', 'mdi mdi-lifebuoy'], ['dash', 'mdi mdi-monitor-dashboard'], ['presentation', 'mdi mdi-presentation'], ['projektwoche', 'mdi mdi-calendar-range-outline']];
      icons.forEach(icon => {
        CMS.registerIcon(icon[0], ({}) => { return(h('i', {className: icon[1] + " icon-md"})); });
      });
    </script>
    <script id="status-seite">
      const StatusPage = () => {
        return h("iframe", {src: "https://grafana.cantorgymnasium.de/d/ni-7T-J4z/status?orgId=2&refresh=5s&kiosk", width: "100%", height: "100%"});
      };
    </script>
    <script id="links">
      CMS.registerAdditionalLink({
        id: 'status',
        title: 'Status',
        data: StatusPage,
        options: {
          icon: 'dash',
        },
      }); 
      CMS.registerAdditionalLink({
        id: 'wiki',
        title: 'GCG.Wiki',
        data: 'https://wiki.cantorgymnasium.de',
        options: {
          icon: 'help',
        },
      });
    </script>
    <script>   
      CMS.registerShortcode('gallery', {
        label: 'Bildergallerie',
        openTag: '{{< ',
        closeTag: ' >}}',
        separator: ' ',
        toProps: args => {
          if (args.length > 0) {
            var dir = args.find(arg => arg.startsWith('dir='))?.split('=')[1].replaceAll("\"","") ?? '';
            return { dir: dir };
          }
          return { dir: '' };
        },
        toArgs: ({ dir }) => {
          return [`dir=\"${dir}\"`];
        },
        control: ({ dir, onChange }) => {
          return h('div', {className: "row", style: { border: "1px solid #868686", borderRadius: "8px", padding: "10px" }},
          h('b', {style: {width: "30%", fontFamily: "sans-serif", margin: "10px"}}, "Gallerie-Ordner: "),
          h('input', {
            key: 'control-input',
            value: dir,
            style: {
              border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "80%"
            },
            onChange: event => {
              onChange({ dir: event.target.value });
            },
          }));
        },
        preview: ({ dir }) => {
          return h('div', {className: "row", style: { border: "1px solid #868686", borderRadius: "8px", padding: "10px", marginBottom: "5px" }},
          h('b', {style: { marginRight: "5px" }}, "Gallerie-Ordner:"),
          h('code', {}, dir));
        },
      });
      CMS.registerShortcode('figure', {
        label: 'Bild',
        openTag: '{{< ',
        closeTag: ' >}}',
        separator: ' ',
        toProps: args => {
          if (args.length > 0) {
            var src = args.find(arg => arg.startsWith('src='))?.split('=')[1].replaceAll("\"","") ?? '';
            return { src };
          }
      
          return { dir: '' };
        },
        toArgs: ({ src }) => {
          return [`src=\"${src}\"`];
        },
        control: ({ src, onChange }) => {
          return h('div', {className: "row", style: { border: "1px solid #868686", borderRadius: "16px", padding: "10px" }},
          h('b', {style: {width: "30%", fontFamily: "sans-serif", margin: "10px"}}, "Bild-Pfad:"),
          h('input', {
            key: 'control-input',
            value: src,
            style: {
              border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "80%"
            },
            onChange: event => {
              onChange({ src: event.target.value });
            },
          }));
        },
        preview: ({ src }) => {
          return h('div', {className: "row", style: { border: "1px solid #ccc", borderRadius: "16px", padding: "10px" }},
          h('b', {style: { marginRight: "5px" }}, "Gallerie-Ordner:"),
          h('code', {}, src));
        },
      });
      CMS.registerShortcode('download', {
        label: 'Download-Karte',
        openTag: '{{< ',
        closeTag: ' >}}',
        separator: ' ',
        toProps: args => {
          if (args.length > 0) {
            var title = "";
            var link = "";
            var linkIndex = args.findIndex(arg => arg.startsWith('link="'));
            var titleIndex = args.findIndex(arg => arg.startsWith('title="'));
            if (titleIndex + 1 < linkIndex) {
              title += args.find(arg => arg.startsWith('title='))?.split('=')[1].replaceAll("\"","") ?? '';
              for (let i = titleIndex + 1; i < linkIndex; i++) {
                title += " " + args[i].replaceAll("\"","") ;
              } 
            } else {
              title = args.find(arg => arg.startsWith('title='))?.split('=')[1].replaceAll("\"","") ?? ''
            }
            if (linkIndex + 1 < args.length) {
              link += args.find(arg => arg.startsWith('link='))?.split('=')[1].replaceAll("\"","") ?? '';
              for (let i = linkIndex + 1; i < args.length; i++) {
                link += " " + args[i].replaceAll("\"","");
              }                 
            } else {
              link = args.find(arg => arg.startsWith('link='))?.split('=')[1].replaceAll("\"","") ?? ''
            }
            title.trim();
            link.trim();
            return { title: title, link: link };
          }

          return { title: '', link: '' };
        },
        toArgs: ({ title, link }) => {
          return [`title=\"${title}\"`, `link=\"${link}\"`];
        },
        control: ({ title, link, onChange }) => {
          return h('div', {className: "row", style: { border: "1px solid #868686", borderRadius: "8px", padding: "10px" }},
          h('b', {style: {width: "30%", fontFamily: "sans-serif", margin: "10px"}}, "Download-Karte:"),
          h('input', {
            key: 'control-input',
            value: title,
            style: {
              border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "35%", marginLeft: "5px", marginRight: "5px"
            },
            onChange: event => {
              onChange({ title: event.target.value, link: link });
            },
          }),
          h('input', {
            key: 'control-input',
            value: link,
            style: {
              border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "35%", marginLeft: "5px", marginRight: "5px"
            },
            onChange: event => {
              onChange({ title: title, link: event.target.value });
            },
          })
          );
        },
        preview: ({ title, link }) => {
          return h('div', {className: "container mb-0"},
          h('div', {className: "card border-primary rounded-0 hover-shadow mb-5"}, 
            h('div', {className: "card-body mb-0"},
              h('h4', {className: "card-title"},
                h('a', {className: "text-decoration-none", href: link}, title),
              ),
              h('a', {className: "mb-0 btn btn-primary btn-sm text-decoration-none", href: link}, "Download")
            )))},
      });
      CMS.registerShortcode('card', {
        label: 'Link-Karte',
        openTag: '{{< ',
        closeTag: ' >}}',
        separator: ' ',
        toProps: args => {
          if (args.length > 0) {
            var title = "";
            var link = "";
            var linkIndex = args.findIndex(arg => arg.startsWith('link="'));
            var titleIndex = args.findIndex(arg => arg.startsWith('title="'));
            if (titleIndex + 1 < linkIndex) {
              title += args.find(arg => arg.startsWith('title='))?.split('=')[1].replaceAll("\"","") ?? '';
              for (let i = titleIndex + 1; i < linkIndex; i++) {
                title += " " + args[i].replaceAll("\"","") ;
              } 
            } else {
              title = args.find(arg => arg.startsWith('title='))?.split('=')[1].replaceAll("\"","") ?? ''
            }
            if (linkIndex + 1 < args.length) {
              link += args.find(arg => arg.startsWith('link='))?.split('=')[1].replaceAll("\"","") ?? '';
              for (let i = linkIndex + 1; i < args.length; i++) {
                link += " " + args[i].replaceAll("\"","");
              }                 
            } else {
              link = args.find(arg => arg.startsWith('link='))?.split('=')[1].replaceAll("\"","") ?? ''
            }
            title.trim();
            link.trim();
            return { title: title, link: link };
          }

          return { title: '', link: '' };
        },
        toArgs: ({ title, link }) => {
          return [`title=\"${title}\"`, `link=\"${link}\"`];
        },
        control: ({ title, link, onChange }) => {
          return h('div', {className: "row", style: { border: "1px solid #868686", borderRadius: "8px", padding: "10px" }},
          h('b', {style: {width: "30%", fontFamily: "sans-serif", margin: "10px"}}, "Link-Karte:"),
          h('input', {
            key: 'control-input',
            value: title,
            style: {
              border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "40%", marginLeft: "5px", marginRight: "5px"
            },
            onChange: event => {
              onChange({ title: event.target.value, link: link });
            },
          }),
          h('input', {
            key: 'control-input',
            value: link,
            style: {
              border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "40%", marginLeft: "5px", marginRight: "5px"
            },
            onChange: event => {
              onChange({ title: title, link: event.target.value });
            },
          })
          );
        },
        preview: ({ title, link }) => {
          return h('div', {className: "container mb-0"},
          h('div', {className: "card border-primary rounded-0 hover-shadow mb-5"}, 
            h('div', {className: "card-body mb-0"},
              h('h4', {className: "card-title"},
                h('a', {className: "text-decoration-none", href: link}, title),
              ),
              h('a', {className: "mb-0 btn btn-primary btn-sm text-decoration-none", href: link}, "Mehr anzeigen")
            )))},
      });
      CMS.registerShortcode('youtube', {
        label: 'YouTube-Video',
        openTag: '{{< ',
        closeTag: ' >}}',
        separator: ' ',
        toProps: args => {
          if (args.length > 0) {
            return { src: args[0] };
          }
      
          return { src: '' };
        },
        toArgs: ({ src }) => { return [src] },
        control: ({ src, onChange }) => {
          return h('div', {className: "row", style: { border: "1px solid #868686", borderRadius: "8px", padding: "10px" }},
          h('b', {style: {fontFamily: "sans-serif", margin: "10px"}}, "YoutTube-Video:"),
          h('input', {
            key: 'control-input',
            value: src,
            style: {
              border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "80%"
            },
            onChange: event => {
              onChange({ src: event.target.value });
            },
          }),
          h('div', {className: "row", style: {"marginTop": "10px"}}, 
            h(
                'iframe',
                {
                  key: 'control-preview',
                  width: '100%',
                  height: '360',
                  src: `https://piped.kavin.rocks/embed/${src}`,
                  style: { borderRadius: "8px" }
                },
                '',
            )
          ));
        },
        preview: ({ src }) => {
          return h(
            'span',
            {},
            h(
              'iframe',
              {
                width: '420',
                height: '315',
                src: `https://piped.kavin.rocks/embed/${src}`,
              },
              '',
            ),
          );
        },
      });
    </script>
    <script id="preview-styles">
      CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/bootstrap/v5/css/bootstrap.min.css");
      CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/fonts/fira/fira.css");
      CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css");
      CMS.registerPreviewStyle("https://cantorgymnasium.de/scss/style.css");
    </script>
    <!--script>
      var ChronikPreview = ({widgetFor, widgetsFor, entry, document, window }) => {
          const divStyle = {
            backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")',
          };
          return h('div', {"id": "sc-root"},
                    h('section', {className: "page-title-section overlay", style: divStyle},
                      h('div', {className: "container"},
                        h('div', {className: "col-md-8"},
                          h('ul', {className: "list-inline"},
                            h('li', {className: "list-inline-item h2"},
                              h('a', {className: "text-primary font-secondary", href: ""}, "Schulchronik")),
                            h('li', {className: "list-inline-item h2"},
                              h("i", {className: "mdi mdi-chevron-double-right text-white"})),
                            h('li', {className: "list-inline-item text-white h2 font-secondary"}, entry.data.title)
                          )
                        )
                      )
                    ),
                    h('section', {className: "section-sm"},
                      h('div', {className: "container"},
                        h('div', {className: "row"},
                          h('div', {className: "col-12 mb-4 content"},
                          widgetsFor('topics').map(function(i, index) {
                              return h('div', {"id": i.data.id, className: "modal"},
                                h('div', {className: "modal-dialog modal-lg", "role": "document"},
                                  h('div', {className: "modal-content"},
                                    h('div', {className: "modal-header"},
                                      h('h5', {className: "modal-title"}, i.data.title),
                                      h('button', {className: "close", type: "button", "dataDismiss": "modal", "ariaLabel": "Close"},
                                        h('span', {"ariaHidden": "true"}, '\u{00d7}')
                                      )
                                    ),
                                    h('div', {className: "modal-body"},
                                      h('div', {className: "content"}, i.content)
                                    )
                                  )
                                )
                              );
                          }),
                          entry.data.pretext != "" && entry.data.pretext != null ? h('div', {"id": "pretext", className: "modal"},
                          h('div', {className: "modal-dialog modal-lg", "role": "document"},
                            h('div', {className: "modal-content"},
                              h('div', {className: "modal-header"},
                                h('h5', {className: "modal-title"}, entry.data.title),
                                h('button', {className: "close", type: "button", "dataDismiss": "modal", "ariaLabel": "Close"},
                                  h('span', {"ariaHidden": "true"}, '\u{00d7}')
                                )
                              ),
                              h('div', {className: "modal-body"},
                                h('div', {className: "content"}, widgetFor('pretext'))
                              )
                            )
                          )
                          ) : null,
                          h('div', {"id": "wc-canvas"}),
                          () => {
                            var topics = [[entry.data.title, 100, "pretext"]];
                            widgetsFor('topics').map(function(i, index) {
                              topics.push([i.data.title, 40, i.data.id]);
                            });
                            var script = document.createElement('script');
                            var div = document.getElementById('sc-root');
                            div.appendChild(script);
                            WordCloud(
                              document.getElementById('wc-canvas'),
                              {
                                click: function (item) {
                                  if (item[1] != 100 || (item[1] == 100 && item[2] == "pretext")) {
                                    $('#' + item[2]).modal('show');
                                  }
                                },
                                color: function (word, weight) {
                                  return (weight === 100) ? '#ffbc3b' : '#1a1a37';
                                },
                                fontFamily: 'Fira Sans, serif',
                                fontWeight: 800,
                                list: topics,
                                shrinkToFit: true,
                                gridSize: 25,
                                rotateRatio: 0,
                              } 
                            );
                          },
                          widgetFor('body')
                          )
                        )
                      )
                    )
          );
        };

      CMS.registerPreviewTemplate("schulchronik", ChronikPreview);

    </script-->
    <script>
      var PostPreviewContent = ({widgetFor, entry}) => {
        const divStyle = {
          backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")',
        };
        return h('div', {},
                  h('section', {className: "page-title-section overlay", style: divStyle},
                    h('div', {className: "container"},
                      h('div', {className: "col-md-8"},
                        h('ul', {className: "list-inline"},
                          h('li', {className: "list-inline-item h2"},
                            h('a', {className: "text-primary font-secondary", href: ""}, "Startseite")),
                          h('li', {className: "list-inline-item h2"},
                            h("i", {className: "mdi mdi-chevron-double-right text-white"})),
                          h('li', {className: "list-inline-item text-white h2 font-secondary"}, entry.data.title)
                        ),
                        h('p', {className: "text-lighten"}, entry.data.description)))),
                  h('section', {className: "section-sm"},
                    h('div', {className: "container"},
                      h('div', {className: "row"},
                        h('div', {className: "col-12 mb-4"},
                          h('div', {className: "content"}, widgetFor('body')))))));
      };
      ["abiturienten", "cantorfora", "contact-index", "pages"].forEach(page => {
        CMS.registerPreviewTemplate(page, PostPreviewContent);
      });
    </script>
    <script>
      var AnmeldungPreviewContent = ({widgetsFor, widgetFor, entry}) => {
        const divStyle = {
          backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")',
        };
        return h('div', {},
                  h('section', {className: "page-title-section overlay", style: divStyle},
                    h('div', {className: "container"},
                      h('div', {className: "col-md-8"},
                        h('ul', {className: "list-inline"},
                          h('li', {className: "list-inline-item h2"},
                            h('a', {className: "text-primary font-secondary", href: ""}, "Startseite")),
                          h('li', {className: "list-inline-item h2"},
                            h("i", {className: "mdi mdi-chevron-double-right text-white"})),
                          h('li', {className: "list-inline-item text-white h2 font-secondary"}, entry.data.title)),
                        h('p', {className: "text-lighten"}, entry.data.description)))),
                  h('section', {className: "section-sm"},
                    h('div', {className: "container"},
                      h('div', {className: "row mb-5"},
                        h('div', {className: "col-md-6 content"},
                          widgetFor('body'))),
                      h('div', {className: "row"},
                        widgetsFor('elements').map(function(element, index) {
                          return h('div', {className: "col-lg-4 col-sm-6 mb-4"},
                            h('div', {className: "card rounded-0 hover-shadow border-top-0 border-start-0 border-end-0"},
                              h('div', {className: "card-body"},
                                h('h4', {className: "card-title mb-3"}, element.data.title),
                                h('div', {className: "content"}, element.widgets.content))));
                        })))));
      };
    CMS.registerPreviewTemplate("anmeldung-index", AnmeldungPreviewContent);
    </script>
    <script>
    var EventPreview = ({widgetsFor, entry}) => {
        const divStyle = {
          backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")',
        };
        return h('div', {},
                  h('section', {className: "page-title-section overlay", style: divStyle},
                    h('div', {className: "row"},
                      h('div', {className: "container"},
                        h('div', {className: "col-md-8"},
                          h('ul', {className: "list-inline"},
                            h('li', {className: "list-inline-item h2"},
                              h('a', {className: "text-primary font-secondary", href: ""}, "Startseite")),
                            h('li', {className: "list-inline-item h2"},
                              h("i", {className: "mdi mdi-chevron-double-right text-white"})),
                            h('li', {className: "list-inline-item text-white h2 font-secondary"}, entry.data.title)),
                          h('p', {className: "text-lighten"}, entry.data.description))))),
                  h('section', {className: "section"},
                    h('div', {className: "container"},
                      h('div', {className: "row"},
                        h('div', {className: "col-12 "},
                          h('ul', {className: "list-unstyled"},
                            widgetsFor('events').map(function(event, index) {
                              return h('li', {className: "d-md-table mb-4 w-100 border-bottom hover-shadow"},
                                h('div', {className: "d-md-table-cell text-center p-4 bg-primary text-white mb-4 mb-md-0 termin-tc"}, event.data.date != null && event.data.date != "" ?
                                    h('span', {className: "h2 d-block"}, Intl.DateTimeFormat('de-De', { day: 'numeric'}).format(new Date(event.data.date))) : "",
                                    h('span', {className: "d-block"}, event.data.date != null && event.data.date != "" ? Intl.DateTimeFormat('de-De', { month: 'short', year: 'numeric' }).format(new Date(event.data.date)) : ""),
                                    event.data.enddate != null && event.data.enddate != "" ? [h('br'), Intl.DateTimeFormat('de-De', { day: 'numeric', month: 'short', year: 'numeric'}).format(new Date(event.data.date))] : null),
                                h('div', {className: "d-md-table-cell px-4 vertical-align-middle mb-4 mb-md-0 p-2"},
                                  h('p', {className: "h4 mb-0 d-block"}, event.data.title)),
                                event.data.location != null && event.data.location != "" ?
                                h('div', {className: "d-md-table-cell text-end pe-0 pe-md-4 p-2 vertical-align-middle"},
                                  h('p', {},
                                    h('i', {className: "mdi mdi-map-marker-radius-outline icon-s text-primary me-2"}), event.data.location)) : null);
                            })))))));
      };
    CMS.registerPreviewTemplate("event-index", EventPreview);
    </script>
    <script>
      var PagePreview = ({widgetFor, entry}) => {
        const divStyle = {
          backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")',
        };
        return h('div', {},
                  h('section', {className: "page-title-section overlay", style: divStyle},
                    h('div', {className: "row"},
                      h('div', {className: "container"},
                        h('div', {className: "col-md-8"},
                          h('ul', {className: "list-inline"},
                            h('li', {className: "list-inline-item h2"},
                              h('a', {className: "text-primary font-secondary", href: ""}, "Startseite")),
                            h('li', {className: "list-inline-item h2"},
                              h("i", {className: "mdi mdi-chevron-double-right text-white"})),
                            h('li', {className: "list-inline-item text-white h2 font-secondary"}, entry.data.title)),
                          h('p', {className: "text-lighten"}, entry.data.description))))));
      };

      ["blog-index", "cantorpreis-index", "forms-index", "ganztagsangebote-index", "wettbewerbe-index", "begabte-index"].forEach(page => {
        CMS.registerPreviewTemplate(page, PagePreview);
      });
    </script>
    <script>
    var PagePreviewImage = ({ widgetFor, widgetsFor, getAsset, entry }) => {
        const [imageUrl, setImageUrl] = useState('');
        const image = useMemo(() => entry.data.image, [entry.data.image]);

        useEffect(() => {
          let alive = true;

          const loadImage = async () => {
            const imageAsset = await getAsset(image);
            if (alive) {
              setImageUrl(imageAsset.toString());
            }
          };

          loadImage();

          return () => {
            alive = false;
          };
        }, [image]);

        const divStyle = {
          backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")',
        };
        return h('div', {},
                  h('section', {className: "page-title-section overlay", style: divStyle},
                    h('div', {className: "row"},
                      h('div', {className: "container"},
                        h('div', {className: "col-md-8"},
                          h('ul', {className: "list-inline"},
                            h('li', {className: "list-inline-item h2"},
                              h('a', {className: "text-primary font-secondary", href: ""}, "Startseite")
                            ),
                            h('li', {className: "list-inline-item h2"},
                              h("i", {className: "mdi mdi-chevron-double-right text-white"})
                            ),
                            h('li', {className: "list-inline-item text-white h2 font-secondary"}, entry.data.title
                            )
                          ),
                          h('p', {className: "text-lighten"}, entry.data.description
                        ))
                      )
                    )
                  ),
                  h('section', {className: "section-sm"},
                    h('div', {className: "container"},
                      h('div', {className: "row"},
                        h('div', {className: "col-12 mb-4"},
                          h('img', {className: "img-fluid w-100 mb-4", src: imageUrl}),
                        ),
                        h('div', {className: "col-12"},
                          h('ul', {className: "list-inline"},
                            h('li', {className: "list-inline-item me-4 mb-3 mb-md-0 text-light"},
                              h('span', {className: "fw-bold me-2"}, "Geschrieben von:"),
                              entry.data.author
                            ),
                            h('li', { className: "list-inline-item me-4 mb-3 mb-md-0 text-light" },
                              h('span', { className: "fw-bold me-2"}, "Datum:"), entry.data.date ?
                              Intl.DateTimeFormat('de-De', { day: 'numeric', month: 'short', year: 'numeric'}).format(new Date(entry.data.date)) : ""
                            ),
                            h('li', { className: "list-inline-item me-4 mb-3 mb-md-0 text-light" },
                              h('span', { className: "fw-bold me-2"}, "Kategorie:"),
                              entry.data.categories != null ? entry.data.categories.map((category, index) => {
                                var text = (index != 0 ? ", " : "") + category;
                                return text;
                              }) : ""
                            ),
                          )
                        ),
                        h('div', { className: "col-12 my-4"},
                          h('div', {className: "border-bottom"})
                        ),
                        h('div', {className: "col-12 mb-5 content"},
                          widgetFor('body')
                        )
                      )
                    )
                  )
                );
      };
    CMS.registerPreviewTemplate("blog", PagePreviewImage);
    </script>
    <script>
    var GTAPreview = ({ widgetFor, widgetsFor, getAsset, entry }) => {
      const [imageUrl, setImageUrl] = useState('');
      const image = useMemo(() => entry.data.image, [entry.data.image]);

      useEffect(() => {
        let alive = true;

        const loadImage = async () => {
          const imageAsset = await getAsset(image);
          if (alive) {
            setImageUrl(imageAsset.toString());
          }
        };

        loadImage();

        return () => {
          alive = false;
        };
      }, [image]);

      const divStyle = {
        backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")',
      };
      return h('div', {},
                h('section', {className: "page-title-section overlay", style: divStyle},
                  h('div', {className: "row"},
                    h('div', {className: "container"},
                      h('div', {className: "col-md-8"},
                        h('ul', {className: "list-inline"},
                          h('li', {className: "list-inline-item h2"},
                            h('a', {className: "text-primary font-secondary", href: ""}, "Startseite")
                          ),
                          h('li', {className: "list-inline-item h2"},
                            h("i", {className: "mdi mdi-chevron-double-right text-white"})
                          ),
                          h('li', {className: "list-inline-item text-white h2 font-secondary"}, entry.data.title
                          )
                        ),
                        h('p', {className: "text-lighten"}, entry.data.description
                      ))
                    )
                  )
                ),
                h('section', {className: "section-sm"},
                  h('div', {className: "container"},
                    h('div', {className: "row"},
                      h('div', {className: "col-12 mb-4"},
                        h('img', {className: "img-fluid w-100 mb-4", src: imageUrl}),
                      ),
                    ),
                    h('div', {}, h('h2', {}, entry.data.title)
                    ),
                    h('div', {className: "row align-items-center mb-5"},
                      h('div', {className: "col-xl-8 order-sm-3 order-xl-2 col-12 order-2"},
                        h('ul', {className: "list-inline"},
                          h('li', {className: "list-inline-item me-4 mb-3 mb-sm-0"},
                            h('div', {className: "d-flex align-items-center"},
                              h('i', {className: "mdi mdi-calendar-today-outline text-primary icon-md me-2"}),
                              h('div', {className: "text-start"},
                                h('h6', {className: "mb-0"}, "Zeit"),
                                h('p', {className: "mb-0"}, entry.data.schedule)
                              )
                            )
                          ),
                          h('li', { className: "list-inline-item me-4 mb-3 mb-sm-0" },
                            h('div', {className: "d-flex align-items-center"},
                              h('i', {className: "mdi mdi-timer-sand text-primary icon-md me-2"}),
                              h('div', {className: "text-start"},
                                h('h6', {className: "mb-0"}, "Dauer"),
                                h('p', {className: "mb-0"}, entry.data.duration)
                              )
                            )
                          ),
                          h('li', { className: "list-inline-item me-4 mb-3 mb-sm-0" },
                            h('div', {className: "d-flex align-items-center"},
                              h('i', {className: "mdi mdi-crowd text-primary icon-md me-2"}),
                              h('div', {className: "text-start"},
                                h('h6', {className: "mb-0"}, "Klassen(n)"),
                                h('p', {className: "mb-0"}, entry.data.class)
                              )
                            )
                          ),
                          h('li', { className: "list-inline-item me-4 mb-3 mb-sm-0" },
                            h('div', {className: "d-flex align-items-center"},
                              h('i', {className: "mdi mdi-map-marker-radius-outline text-primary icon-md me-2"}),
                              h('div', {className: "text-start"},
                                h('h6', {className: "mb-0"}, "Raum"),
                                h('p', {className: "mb-0"}, entry.data.room)
                              )
                            )
                          ),
                        )
                      ),
                      h('div', { className: "col-12 mt-4 order-4"},
                        h('div', {className: "border-bottom border-primary"})
                      ),
                    ),
                    h('div', {className: "row"},
                    h('div', {className: "col-12 mb-5 content"},
                      widgetFor('body')
                    ))
                  ),
                  ));
    };
  CMS.registerPreviewTemplate("ganztagsangebote", GTAPreview);
  </script>
  <script>
    var ContestPreview = ({ widgetFor, widgetsFor, getAsset, entry }) => {
      const [imageUrl, setImageUrl] = useState('');
      const image = useMemo(() => entry.data.image, [entry.data.image]);

      useEffect(() => {
        let alive = true;

        const loadImage = async () => {
          const imageAsset = await getAsset(image);
          if (alive) {
            setImageUrl(imageAsset.toString());
          }
        };

        loadImage();

        return () => {
          alive = false;
        };
      }, [image]);

      const divStyle = {
        backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")',
      };
      return h('div', {},
                h('section', {className: "page-title-section overlay", style: divStyle},
                  h('div', {className: "row"},
                    h('div', {className: "container"},
                      h('div', {className: "col-md-8"},
                        h('ul', {className: "list-inline"},
                          h('li', {className: "list-inline-item h2"},
                            h('a', {className: "text-primary font-secondary", href: ""}, "Startseite")
                          ),
                          h('li', {className: "list-inline-item h2"},
                            h("i", {className: "mdi mdi-chevron-double-right text-white"})
                          ),
                          h('li', {className: "list-inline-item text-white h2 font-secondary"}, entry.data.title
                          )
                        ),
                        h('p', {className: "text-lighten"}, entry.data.description
                      ))
                    )
                  )
                ),
                h('section', {className: "section-sm"},
                  h('div', {className: "container"},
                    h('div', {className: "row"},
                      h('div', {className: "col-12 mb-4"},
                        h('img', {className: "img-fluid w-100 mb-4", src: imageUrl}),
                      ),
                    ),
                    h('div', {}, h('h2', {}, entry.data.title)
                    ),
                    h('div', {className: "row align-items-center mb-5"},
                      h('div', {className: "col-xl-8 order-sm-2 order-xl-2 col-12 order-2 col-sm-6"},
                        h('ul', {className: "list-inline"},
                          h('li', {className: "list-inline-item me-4 mb-3 mb-sm-0"},
                            h('div', {className: "d-flex align-items-center"},
                              h('i', {className: "mdi mdi-calendar-today-outline text-primary icon-md me-2"}),
                              h('div', {className: "text-start"},
                                h('h6', {className: "mb-0"}, "Klasse(n)"),
                                h('p', {className: "mb-0"}, entry.data.class)
                              )
                            )
                          ),
                        )
                      ),
                      h('div', {className: "col-xl-2 text-start text-xl-end order-sm-3 order-3 order-xl-3 col-sm-6 col-12 mb-4 mb-xl-0"},
                        h('a', {href: entry.data.web_url, className: "btn btn-primary"}, "Website")
                      ),
                      h('div', { className: "col-12 mt-4 order-4"},
                        h('div', {className: "border-bottom border-primary"})
                      ),
                    ),
                    h('div', {className: "row"},
                    h('div', {className: "col-12 mb-5 content"},
                      widgetFor('body')
                    ))
                  ),
                  ));
    };
  CMS.registerPreviewTemplate("wettbewerbe", ContestPreview);
  </script>
    <script>
      var AboutPreview = ({ widgetFor, widgetsFor, getAsset, entry}) => {
        const [imageUrl, setImageUrl] = useState('');
        const image = useMemo(() => entry.data.image, [entry.data.image]);

        useEffect(() => {
          let alive = true;

          const loadImage = async () => {
            const imageAsset = await getAsset(image);
            if (alive) {
              setImageUrl(imageAsset.toString());
            }
          };

          loadImage();

          return () => {
            alive = false;
          };
        }, [image]);

        const divStyle = {
          backgroundImage: 'url("/media/backgrounds/page-title.webp"),url("/media/backgrounds/page-title.webp")',
        };
        return h('div', {},
                  h('section', {className: "page-title-section overlay", style: divStyle},
                    h('div', {className: "row"},
                      h('div', {className: "container"},
                        h('div', {className: "col-md-8"},
                          h('ul', {className: "list-inline"},
                            h('li', {className: "list-inline-item h2"},
                              h('a', {className: "text-primary font-secondary", href: ""}, "Startseite")
                            ),
                            h('li', {className: "list-inline-item h2"},
                              h("i", {className: "mdi mdi-chevron-double-right text-white"})
                            ),
                            h('li', {className: "list-inline-item text-white h2 font-secondary"}, entry.data.title
                            )
                          ),
                          h('p', {className: "text-lighten"}, entry.data.description
                        ))
                      )
                    )
                  ),
                  h('section', {className: "section-sm"},
                    h('div', {className: "container"},
                      h('div', {className: "row"},
                        h('div', {className: "col-12 mb-4"},
                        h('img', {className: "img-fluid w-100 mb-4", src: imageUrl}),
                        widgetFor('body'))
                      )
                    )
                  ),
                  entry.data.stats.enable ? h(
                    'section',
                    {className: "section-sm bg-primary"},
                    h('div', {className: "container"},
                      h('div', {className: "row"},
                        widgetsFor('stats').data.zahlen.map(element => {
                          return h('div', {className: "col-md-3 col-sm-6 mb-4 mb-md-0"}, 
                            h('div', {className: "text-center"}, 
                              h('h2', {className: "count text-white"}, element.count),
                              h('h5', {className: "text-white"}, element.name)
                            )
                          );
                        })
                      )
                    )
                  ) : null
                );
      };
      CMS.registerPreviewTemplate("about-index", AboutPreview);
    </script>
    <script>   
      const PostPreviewCard = ({ entry, widgetFor, viewStyle }) => {
        return h('div', { style: { width: '100%', height: '100%' } },
          viewStyle === 'grid' ? widgetFor('image') : null,
          viewStyle === 'grid' ? 
          h('div', { style: { padding: '16px', paddingBottom: '8px', width: '100%' } },
            h('div', {
                style: {
                  display: 'flex',
                  width: '100%',
                  justifyContent: 'space-between',
                  alignItems: 'start',
                }},
              h('div', {
                  style: {
                    backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green',
                    color: 'white',
                    border: 'none',
                    padding: '4px 8px',
                    textAlign: 'center',
                    textDecoration: 'none',
                    display: 'inline-block',
                    cursor: 'pointer',
                    borderRadius: '4px',
                  }},
                entry.data.draft === true ? 'Entwurf' : 'Öffentlich',
              ),
              h('span', { style: { fontSize: '16px' } }, Intl.DateTimeFormat('de-De', { day: 'numeric', month: 'numeric', year: 'numeric'}).format(new Date(entry.data.date)))
            )) : null,
          h('div', { style: { padding: '16px', paddingTop: '8px', width: '100%' } },
            h('div', {
                style: {
                  display: 'flex',
                  width: '100%',
                  justifyContent: 'space-between',
                  alignItems: 'start',
                }},
              h('div', {
                  style: {
                    display: 'flex',
                    flexDirection: viewStyle === 'grid' ? 'column' : 'row',
                    alignItems: 'baseline',
                    gap: '8px',
                  }},
                h('strong', { style: { fontSize: '20px' } }, entry.data.title)))),
          viewStyle != 'grid' ? h('div', { style: { padding: '16px', paddingBottom: '8px', paddingTop: '0px', width: '100%' } },
            h('div', {
                style: {
                  display: 'flex',
                  width: '100%',
                  justifyContent: 'space-between',
                  alignItems: 'start',
                }},
              h('div', {
                  style: {
                    backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green',
                    color: 'white',
                    border: 'none',
                    padding: '4px 8px',
                    textAlign: 'center',
                    textDecoration: 'none',
                    display: 'inline-block',
                    cursor: 'pointer',
                    borderRadius: '4px'
                  }},
                entry.data.draft === true ? 'Entwurf' : 'Öffentlich'),
              h('span', { style: { fontSize: '16px' } }, Intl.DateTimeFormat('de-De', { day: 'numeric', month: 'numeric', year: 'numeric'}).format(new Date(entry.data.date))))
          ) : null,
        );
      };
      const GenericCard = ({ entry, widgetFor, viewStyle }) => {
        return h('div', { style: { width: '100%', height: '100%' } },
          viewStyle === 'grid' ? widgetFor('image') : null,
          viewStyle === 'grid' ? 
          h('div', { style: { padding: '16px', paddingBottom: '8px', width: '100%' } },
            h('div', {
                style: {
                  display: 'flex',
                  width: '100%',
                  justifyContent: 'space-between',
                  alignItems: 'start',
                }},
              h('div', {
                  style: {
                    backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green',
                    color: 'white',
                    border: 'none',
                    padding: '4px 8px',
                    textAlign: 'center',
                    textDecoration: 'none',
                    display: 'inline-block',
                    cursor: 'pointer',
                    borderRadius: '4px',
                  }},
                entry.data.draft === true ? 'Entwurf' : 'Öffentlich',
              ),
              h('span', { style: { fontSize: '16px' } }, entry.data.category))) : null,
          h('div', { style: { padding: '16px', paddingTop: viewStyle === 'grid' ? '8px' : '16px', width: '100%' } },
            h('div', {
                style: {
                  display: 'flex',
                  width: '100%',
                  justifyContent: 'space-between',
                  alignItems: 'start',
                }},
              h('div', {
                  style: {
                    display: 'flex',
                    flexDirection: viewStyle === 'grid' ? 'column' : 'row',
                    alignItems: 'baseline',
                    gap: '8px',
                  }},
                h('strong', { style: { fontSize: '20px' } }, entry.data.title)),
              viewStyle != 'grid' ? h('div', {
                  style: {
                    backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green',
                    color: 'white',
                    border: 'none',
                    padding: '4px 8px',
                    textAlign: 'center',
                    textDecoration: 'none',
                    display: 'inline-block',
                    cursor: 'pointer',
                    borderRadius: '4px',
                  }},
                entry.data.draft === true ? 'Entwurf' : 'Öffentlich') : null)));
      };
      const NoDateCard = ({ entry, widgetFor, viewStyle }) => {
        return h(
          'div',
          { style: { width: '100%', height: '100%' } },
          viewStyle === 'grid' ? widgetFor('image') : null,
          h(
            'div',
            { style: { padding: '16px', width: '100%' } },
            h(
              'div',
              {
                style: {
                  display: 'flex',
                  width: '100%',
                  justifyContent: 'space-between',
                  alignItems: 'start',
                },
              },
              h(
                'div',
                {
                  style: {
                    display: 'flex',
                    flexDirection: viewStyle === 'grid' ? 'column' : 'row',
                    alignItems: 'baseline',
                    gap: '8px',
                  },
                },
                h('strong', { style: { fontSize: '20px' } }, entry.data.title),
              ),
              h(
                'div',
                {
                  style: {
                    backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green',
                    color: 'white',
                    border: 'none',
                    padding: '4px 8px',
                    textAlign: 'center',
                    textDecoration: 'none',
                    display: 'inline-block',
                    cursor: 'pointer',
                    borderRadius: '4px',
                  },
                },
                entry.data.draft === true ? 'Entwurf' : 'Öffentlich',
              ),
            ),
          ),
        );
      };
      const SmallCard = ({ entry, widgetFor, viewStyle }) => {
        return h(
          'div',
          { style: { width: '100%', height: '100%' } },
          h(
            'div',
            { style: { padding: '16px', width: '100%' } },
            h(
              'div',
              {
                style: {
                  display: 'flex',
                  width: '100%',
                  justifyContent: 'space-between',
                  alignItems: 'start',
                },
              },
              h(
                'div',
                {
                  style: {
                    display: 'flex',
                    flexDirection: viewStyle === 'grid' ? 'column' : 'row',
                    alignItems: 'baseline',
                    gap: '8px',
                  },
                },
                h('strong', { style: { fontSize: '20px' } }, entry.data.title),
              ),
              h(
                'div',
                {
                  style: {
                    backgroundColor: entry.data.draft === true ? 'RoyalBlue' : 'green',
                    color: 'white',
                    border: 'none',
                    padding: '4px 8px',
                    textAlign: 'center',
                    textDecoration: 'none',
                    display: 'inline-block',
                    cursor: 'pointer',
                    borderRadius: '4px',
                  },
                },
                entry.data.draft === true ? 'Entwurf' : 'Öffentlich',
              ),
            ),
          ),
        );
      };
      
      ['schulchronik', 'forms', 'pages', 'begabte-index', 'wettbewerbe-index', 'ganztagsangebote-index', 'forms-index', 'event-index', 'contact-index', 'cantorpreis-index', 'anmeldung-index', 'about-index', 'blog-index'].forEach(page => {
        CMS.registerPreviewCard(page, SmallCard);
      });

      ['ganztagsangebote', 'wettbewerbe', 'begabte'].forEach(page => {
        CMS.registerPreviewCard(page, GenericCard);
      });
      
      CMS.registerPreviewCard('blog', PostPreviewCard);
      CMS.registerPreviewCard('abiturienten', NoDateCard);
      CMS.registerPreviewCard('cantorfora', NoDateCard);
    </script>
  </body>
</html>