<!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"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/@staticcms/app@3.4.6/dist/main.css"
    />

    <title>Static CMS</title>
  </head>
  <body>
    <script src="https://unpkg.com/@staticcms/app@3.4.6/dist/static-cms-app.js"></script>
    <script type="module">
         import Icons from "https://cantorgymnasium.de/admin/icons.js";
         import config from "./config.js";

         CMS.init({ config });

         Icons.forEach((i) => CMS.registerIcon(i.name, i.icon));

         CMS.registerFieldPreview("post", "draft", ({ value }) =>
           h(
             "div",
             {
               style: {
                 backgroundColor:
                   value === true ? "rgb(37 99 235)" : "rgb(22 163 74)",
                 color: "white",
                 border: "none",
                 padding: "2px 6px",
                 textAlign: "center",
                 textDecoration: "none",
                 display: "inline-block",
                 cursor: "pointer",
                 borderRadius: "4px",
                 fontSize: "14px",
               },
             },
             value ? "Entwurf" : "Veröffentlicht"
           )
         );

         CMS.registerFieldPreview("page", "draft", ({ value }) =>
           h(
             "div",
             {
               style: {
                 backgroundColor:
                   value === true ? "rgb(37 99 235)" : "rgb(22 163 74)",
                 color: "white",
                 border: "none",
                 padding: "2px 6px",
                 textAlign: "center",
                 textDecoration: "none",
                 display: "inline-block",
                 cursor: "pointer",
                 borderRadius: "4px",
                 fontSize: "14px",
               },
             },
             value ? "Entwurf" : "Veröffentlicht"
           )
         );

         CMS.registerPreviewTemplate(
           "post",
           ({ widgetFor, entry, fields, collection }) => {
             const imageField = useMemo(() => {
               return fields.find((field) => field.name === "image");
             }, [fields]);

             const imageUrl = useMediaAsset(
               entry.data.image,
               collection,
               imageField,
               entry
             );

             return h(
              "main",
        		  { className: "article-page full-width" },
      				h("article", { className: "main-article " + (imageField ? "has-image" : ""), style: {margin: "16px"} },
      					h("header", { className: "article-header" },
      						imageUrl ? h("div", { className: "article-image" },
       							h("img", { src: imageUrl, style: {width: "100%"} })
      						) : null,
      						h("div", { className: "article-details" },
       							h("header", { className: "article-category" },
      								entry.data.categories ? entry.data.categories.map(
                  		  (category, index) => h("a", {}, category)
                			) : ""
      							),
      		          h("div", { className: "article-title-wrapper" },
      				        h("h2", { className: "article-title" },
                        h("a", {}, entry.data.title)
      			          ),
                      h("h3", { className: "article-subtitle" },
                        entry.data.description
                      )
      		          ),
                    h("footer", { className: "article-time" },
                      h("div", {},
                        h("time", { className: "article-time--published" }, ((entry.data.date != null && entry.data.date != "") ? new Intl.DateTimeFormat("de-DE", {dateStyle: "long"}).format(new Date(entry.data.date)) : ""))
                      )
                    )
      						)
      					),
                h("section", { className: "article-content" },
                  widgetFor("body")
                ),
                h("footer", { className: "article-footer" },
                  h("section", { className: "article-tags" },
                    entry.data.tags ? entry.data.tags.map(
                  	  (tag, index) => h("a", {}, tag)
                		) : ""
                  )
                )
      				),
             );
           }
         );

         CMS.registerPreviewTemplate(
           "page",
           ({ widgetFor, entry, fields, collection }) => {
             return h(
              "main",
        		  { className: "article-page full-width" },
      				h("article", { className: "main-article", style: {margin: "16px"} },
      					h("header", { className: "article-header" },
      						h("div", { className: "article-details" },
      		          h("div", { className: "article-title-wrapper" },
      				        h("h2", { className: "article-title" },
                        h("a", {}, entry.data.title)
      			          ),
                      h("h3", { className: "article-subtitle" },
                        entry.data.description
                      )
      		          ),
                    h("footer", { className: "article-time" },
                      h("div", {},
                        h("time", { className: "article-time--published" }, (entry.data.date != "" ? new Intl.DateTimeFormat("de-DE", {dateStyle: "long"}).format(new Date(entry.data.date)) : ""))
                      )
                    )
      						)
      					),
                h("section", { className: "article-content" },
                  widgetFor("body")
                ),
                h("footer", { className: "article-footer" },
                  h("section", { className: "article-tags" },
                    entry.data.tags ? entry.data.tags.map(
                  	  (tag, index) => h("a", {}, tag)
                		) : ""
                  )
                )
      				),
             );
           }
         );

      {{ $sass := resources.Get "scss/style.scss" }}
      {{ $style := $sass | resources.ToCSS | minify | resources.Fingerprint "sha256" }}
      CMS.registerPreviewStyle("{{ $style.RelPermalink }}")
    </script>
  </body>
</html>