From 62daa10c6ff5759dc98c98905277227f91612148 Mon Sep 17 00:00:00 2001
From: Code by Ben <code.by.ben@gmail.com>
Date: Thu, 1 Aug 2024 16:16:11 +1000
Subject: [PATCH] download content work in progress

---
 assets/js/artifact-editor.js     | 26 +++++++++++-
 docs/todo.md                     |  1 +
 handler/app/internal/mf/mf.go    | 15 +++++--
 handler/app/internal/str/str.go  | 16 +++-----
 handler/htmx/artifact.go         | 69 ++++++++++++++++++++++++++++++++
 handler/routerlock.go            | 17 ++++++++
 internal/command/command.go      | 20 ++++-----
 public/js/artifact-editor.min.js |  2 +-
 view/app/artifacteditjsdos.tmpl  |  2 +-
 view/app/artifactfile.tmpl       | 25 +++++++++---
 view/app/artifacts.tmpl          |  2 +-
 view/app/artifactsedit.tmpl      | 23 +++++++----
 12 files changed, 173 insertions(+), 45 deletions(-)

diff --git a/assets/js/artifact-editor.js b/assets/js/artifact-editor.js
index 873e74a7..58b6db8b 100644
--- a/assets/js/artifact-editor.js
+++ b/assets/js/artifact-editor.js
@@ -48,16 +48,38 @@ import { clipValue, getElmById } from "./helper.mjs";
 
   const copyUUIDVal = getElmById(`artifact-editor-unique-id-value`);
   if (copyUUIDVal === null) {
-    throw new Error("The key value is missing.");
+    throw new Error("The unique id value is missing.");
   }
   const copyUUIDBtn = getElmById(`artifact-editor-unique-id-label`);
   if (copyUUIDBtn === null) {
-    throw new Error("The key label is missing.");
+    throw new Error("The unique id label is missing.");
   }
   copyUUIDBtn.addEventListener(`click`, () =>
     clipValue(`artifact-editor-unique-id-value`)
   );
 
+  const copyLocation = getElmById(`artifact-editor-location-value`);
+  if (copyLocation === null) {
+    throw new Error("The location value is missing.");
+  }
+  const copyLocationBtn = getElmById(`artifact-editor-location-label`);
+  if (copyLocationBtn === null) {
+    throw new Error("The location label is missing.");
+  }
+  copyLocationBtn.addEventListener(`click`, () =>
+    clipValue(`artifact-editor-location-value`)
+  );
+
+  const copyTempLocation = getElmById(`artifact-editor-templocation`);
+  if (copyTempLocation !== null) {
+    const copyTempLocationBtn = getElmById(
+      `artifact-editor-templocation-label`
+    );
+    copyTempLocationBtn.addEventListener(`click`, () =>
+      clipValue(`artifact-editor-templocation`)
+    );
+  }
+
   const osLabel = document.getElementById("artifact-editor-os-label");
   if (osLabel === null) {
     throw new Error("The operating system label is missing.");
diff --git a/docs/todo.md b/docs/todo.md
index a096b89a..53bffd4b 100644
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -16,6 +16,7 @@
 - [ ] Handle magazines title on artifact page, http://localhost:1323/f/a55ed, this is hard to read, "Issue 4\nThe Pirate Syndicate +\nThe Pirate World"
 - [ ] If artifact is a text file displayed in readme, then delete image preview, these are often super long, large and not needed.
 - [ ] If a #hash is appended to a /f/<id> URL while signed out, then return a 404 or a redirect to the sign in page. Post signing should return to the #hash URL?
+- [ ] Delete all previews that are unused, such as textfiles that are displayed as a readme.
 
 - [ ] - http://www.platohistory.org/
 - [ ] - https://portcommodore.com/dokuwiki/doku.php?id=larry:comp:bbs:about_cbbs
diff --git a/handler/app/internal/mf/mf.go b/handler/app/internal/mf/mf.go
index bc1c3c90..a7d5d584 100644
--- a/handler/app/internal/mf/mf.go
+++ b/handler/app/internal/mf/mf.go
@@ -277,17 +277,24 @@ func isText(sign magicnumber.Signature) bool {
 }
 
 func entryHTML(images, programs, texts bool, rel, sign, size, unid string, bytes int64) string {
+	name := url.QueryEscape(rel)
 	htm := fmt.Sprintf(`<div class="col d-inline-block text-truncate" data-bs-toggle="tooltip" `+
 		`data-bs-title="%s">%s</div>`, rel, rel)
-	if images || texts {
-		htm += `<div class="col col-1 text-end"><svg width="16" height="16" fill="currentColor" aria-hidden="true">` +
-			`<use xlink:href="/svg/bootstrap-icons.svg#images"></use></svg></div>`
+	if images {
+		htm += `<div class="col col-1 text-end">` +
+			fmt.Sprintf(`<a class="icon-link align-text-bottom" hx-patch="/editor/preview/copy/%s/%s">`, unid, name) +
+			`<svg width="16" height="16" fill="currentColor" aria-hidden="true">` +
+			`<use xlink:href="/svg/bootstrap-icons.svg#images"></use></svg></a></div>`
+	} else if texts {
+		htm += `<div class="col col-1 text-end">` +
+			fmt.Sprintf(`<a class="icon-link align-text-bottom" hx-patch="/editor/readme/preview/%s/%s">`, unid, name) +
+			`<svg width="16" height="16" fill="currentColor" aria-hidden="true">` +
+			`<use xlink:href="/svg/bootstrap-icons.svg#images"></use></svg></a></div>`
 	} else {
 		htm += `<div class="col col-1"></div>`
 	}
 	switch {
 	case texts:
-		name := url.QueryEscape(rel)
 		htm += `<div class="col col-1 text-end">` +
 			fmt.Sprintf(`<a class="icon-link align-text-bottom" hx-patch="/editor/readme/copy/%s/%s">`, unid, name) +
 			`<svg class="bi" width="16" height="16" fill="currentColor" aria-hidden="true">` +
diff --git a/handler/app/internal/str/str.go b/handler/app/internal/str/str.go
index e83a1be0..69b9cac9 100644
--- a/handler/app/internal/str/str.go
+++ b/handler/app/internal/str/str.go
@@ -95,7 +95,7 @@ func DemozooGetLink(filename, filesize, demozoo, unid any) template.HTML {
 		zooID = val.Int64
 	}
 	if zooID == 0 {
-		return "no demozoo ID provided"
+		return ""
 	}
 	var uID string
 	if val, valExists := unid.(null.String); valExists {
@@ -105,15 +105,11 @@ func DemozooGetLink(filename, filesize, demozoo, unid any) template.HTML {
 		uID = val.String
 	}
 	if uID == "" {
-		return "no unid provided"
-	}
-	s := fmt.Sprintf("<button type=\"button\" "+
-		"class=\"btn btn-outline-success me-2\" name=\"editorGetDemozoo\" "+
-		"data-id=\"%d\" data-uid=\"%s\" id=btn\"%s\">"+
-		`<svg width="16" height="16" fill="currentColor" aria-hidden="true">`+
-		`<use xlink:href="/svg/bootstrap-icons.svg#cloud-download"></use></svg>`+
-		" &nbsp; Use Demozoo</button>", zooID, uID, uID)
-	return template.HTML(s)
+		return ""
+	}
+	// s := fmt.Sprintf(`, <a href="" name="editorGetDemozoo"`+
+	// 	` data-id="%d" data-uid="%s" id=btn"%s">Use demozoo assets</a>`, zooID, uID, uID)
+	return template.HTML(`clone the demozoo assets`)
 }
 
 // DownloadB returns a human readable string of the file size.
diff --git a/handler/htmx/artifact.go b/handler/htmx/artifact.go
index 67c5a1c0..45032163 100644
--- a/handler/htmx/artifact.go
+++ b/handler/htmx/artifact.go
@@ -15,6 +15,7 @@ import (
 
 	"github.com/Defacto2/releaser"
 	"github.com/Defacto2/server/handler/app"
+	"github.com/Defacto2/server/internal/command"
 	"github.com/Defacto2/server/internal/demozoo"
 	"github.com/Defacto2/server/internal/form"
 	"github.com/Defacto2/server/internal/helper"
@@ -30,6 +31,74 @@ var (
 	ErrYT    = errors.New("youtube watch video id needs to be empty or 11 characters")
 )
 
+func RecordImageCopier(c echo.Context, extraDir string) error {
+	path := c.Param("path")
+	name, err := url.QueryUnescape(path)
+	if err != nil {
+		return badRequest(c, err)
+	}
+	unid := c.Param("unid")
+	tmp, err := helper.MkContent(unid)
+	if err != nil {
+		return badRequest(c, err)
+	}
+	src := filepath.Join(tmp, name)
+	st, err := os.Stat(src)
+	if err != nil {
+		return badRequest(c, err)
+	}
+	if st.Size() == 0 {
+		return c.String(http.StatusOK, "The file is empty and was not copied.")
+	}
+	// TODO make images, png or avi?
+	// make thumbnails for images
+	// compress images
+
+	// dst := filepath.Join(extraDir, unid+".png")
+	// i, err := helper.DuplicateOW(src, dst)
+	// if err != nil {
+	// 	return badRequest(c, err)
+	// }
+	// c.Response().Header().Set("HX-Refresh", "true")
+	// return c.String(http.StatusOK, fmt.Sprintf("Copied %d bytes, refresh the browser.", i))
+	return c.String(http.StatusOK, "Not implemented.")
+}
+
+func RecordReadmeImager(c echo.Context, logger *zap.SugaredLogger, dirs command.Dirs) error {
+	path := c.Param("path")
+	name, err := url.QueryUnescape(path)
+	if err != nil {
+		return badRequest(c, err)
+	}
+	unid := c.Param("unid")
+	tmp, err := helper.MkContent(unid)
+	if err != nil {
+		return badRequest(c, err)
+	}
+	src := filepath.Join(tmp, name)
+	st, err := os.Stat(src)
+	if err != nil {
+		return badRequest(c, err)
+	}
+	if st.Size() == 0 {
+		return c.String(http.StatusOK, "The file is empty and was not used.")
+	}
+
+	if err := dirs.AnsiLove(logger, src, unid); err != nil {
+		return badRequest(c, err)
+	}
+	// TODO: REMOVE PNG created by ANSILOVE in working directory
+
+	return c.String(http.StatusOK, src)
+	// dst := filepath.Join(extraDir, unid+".txt")
+	// i, err := helper.DuplicateOW(src, dst)
+	// if err != nil {
+	// 	return badRequest(c, err)
+	// }
+	// c.Response().Header().Set("HX-Refresh", "true")
+	// return c.String(http.StatusOK, fmt.Sprintf("Copied %d bytes, refresh the browser.", i))
+}
+
 func RecordReadmeCopier(c echo.Context, extraDir string) error {
 	path := c.Param("path")
 	name, err := url.QueryUnescape(path)
diff --git a/handler/routerlock.go b/handler/routerlock.go
index 80c709c4..b2ff11e5 100644
--- a/handler/routerlock.go
+++ b/handler/routerlock.go
@@ -5,6 +5,7 @@ import (
 
 	"github.com/Defacto2/server/handler/app"
 	"github.com/Defacto2/server/handler/htmx"
+	"github.com/Defacto2/server/internal/command"
 	"github.com/labstack/echo/v4"
 	"go.uber.org/zap"
 )
@@ -140,13 +141,29 @@ func editor(g *echo.Group, logger *zap.SugaredLogger, dir app.Dirs) {
 		return htmx.UploadReplacement(c, dir.Download)
 	})
 
+	dirs := command.Dirs{
+		Download:  dir.Download,
+		Preview:   dir.Preview,
+		Thumbnail: dir.Thumbnail,
+	}
 	me := g.Group("/readme")
 	me.PATCH("/copy/:unid/:path", func(c echo.Context) error {
 		return htmx.RecordReadmeCopier(c, dir.Extra)
 	})
+	me.PATCH("/preview/:unid/:path", func(c echo.Context) error {
+		return htmx.RecordReadmeImager(c, logger, dirs)
+	})
 	me.DELETE("/:unid", func(c echo.Context) error {
 		return htmx.RecordReadmeDeleter(c, dir.Extra)
 	})
+
+	pre := g.Group("/preview")
+	pre.PATCH("/copy/:unid/:path", func(c echo.Context) error {
+		return htmx.RecordImageCopier(c, dir.Extra)
+	})
+	pre.DELETE("/:unid", func(c echo.Context) error {
+		return htmx.RecordReadmeDeleter(c, dir.Extra)
+	})
 }
 
 func get(g *echo.Group, dir app.Dirs) {
diff --git a/internal/command/command.go b/internal/command/command.go
index 8ca22da0..d340a445 100644
--- a/internal/command/command.go
+++ b/internal/command/command.go
@@ -248,11 +248,8 @@ func LookVersion(name, flag, match string) error {
 
 // Run looks for the command in the system path and executes it with the arguments.
 // Any output to stderr is logged as a debug message.
-func Run(logger *zap.SugaredLogger, name string, arg ...string) error {
-	if logger == nil {
-		return ErrZap
-	}
-	return run(logger, name, "", arg...)
+func Run(debug *zap.SugaredLogger, name string, arg ...string) error {
+	return run(debug, name, "", arg...)
 }
 
 // RunOut looks for the command in the system path and executes it with the arguments.
@@ -288,14 +285,11 @@ func RunQuiet(name string, arg ...string) error {
 // RunWD looks for the command in the system path and executes it with the arguments.
 // An optional working directory is set for the command.
 // Any output to stderr is logged as a debug message.
-func RunWD(logger *zap.SugaredLogger, name, wdir string, arg ...string) error {
-	if logger == nil {
-		return ErrZap
-	}
-	return run(logger, name, wdir, arg...)
+func RunWD(debug *zap.SugaredLogger, name, wdir string, arg ...string) error {
+	return run(debug, name, wdir, arg...)
 }
 
-func run(logger *zap.SugaredLogger, name, wdir string, arg ...string) error {
+func run(debug *zap.SugaredLogger, name, wdir string, arg ...string) error {
 	if err := LookCmd(name); err != nil {
 		return fmt.Errorf("run %w", err)
 	}
@@ -312,8 +306,8 @@ func run(logger *zap.SugaredLogger, name, wdir string, arg ...string) error {
 	if err != nil {
 		return fmt.Errorf("run could not read stderr %w", err)
 	}
-	if len(b) > 0 {
-		logger.Debugf("run %q: %s\n", cmd, string(b))
+	if debug != nil && len(b) > 0 {
+		debug.Debugf("run %q: %s\n", cmd, string(b))
 	}
 
 	if err := cmd.Wait(); err != nil {
diff --git a/public/js/artifact-editor.min.js b/public/js/artifact-editor.min.js
index e12b27c0..581d1c43 100644
--- a/public/js/artifact-editor.min.js
+++ b/public/js/artifact-editor.min.js
@@ -1,2 +1,2 @@
 /* artifact-editor.min.js © Defacto2 2024 */
-(()=>{function A(e,r,i){if(e==null)throw new Error("The year input element is null.");if(r==null)throw new Error("The month input element is null.");if(i==null)throw new Error("The day input element is null.");e.classList.remove("is-invalid","is-valid"),r.classList.remove("is-invalid","is-valid"),i.classList.remove("is-invalid","is-valid");let d=parseInt(e.value,10);isNaN(d)?e.value="0":e.value=d;let s=parseInt(r.value,10);isNaN(s)?r.value="0":r.value=s;let l=parseInt(i.value,10);isNaN(l)?i.value="0":i.value=l;let a=0,u=new Date().getFullYear(),p=d>=1980&&d<=u;d>a&&!p&&e.classList.add("is-invalid");let h=s>=1&&s<=12;s>a&&!h&&r.classList.add("is-invalid");let g=l>=1&&l<=31;l>a&&!g&&i.classList.add("is-invalid"),isNaN(d)&&(h||g)&&e.classList.add("is-invalid"),(s==a||isNaN(s))&&g&&r.classList.add("is-invalid")}function ce(e){return me(e,!0)}function ve(e){return me(e,!1)}function me(e,r){if(e==null)throw new Error("The repository URL element is null.");e.classList.remove("is-valid","is-invalid");let i=e.value.trim();if(i.length===0)return;if(r==!0&&i.startsWith("refs/")){e.classList.add("is-invalid");return}if(i.includes("://")){e.classList.add("is-invalid");return}let s=/[^A-Za-z0-9-._/]/g;i=i.replace(s,""),i=i.replaceAll("//","/");let l=/^\//;i=i.replace(l,""),e.value=i;let a=e.getAttribute("maxlength");if(a===null)throw new Error(`The maxlength attribute is required for ${e.id}.`);if(i.length>a){e.classList.add("is-invalid");return}}function b(e){if(e==null)throw new Error("The element of the releaser validator is null.");e.classList.remove("is-valid","is-invalid");let r=e.value.trim().toUpperCase();r=r.replace(/[^A-ZÀ-ÖØ-Þ0-9\-,& ]/g,""),e.value=r;let i=e.getAttribute("minlength"),d=e.getAttribute("maxlength"),s=e.getAttribute("required");if(i===null)throw new Error(`The minlength attribute is required for ${e.id}.`);if(d===null)throw new Error(`The maxlength attribute is required for ${e.id}.`);let l=document.getElementById("artifact-editor-releasers-error");if(l===null)throw new Error("The releasers error element is null.");let a=r.length<i||r.length>d;if(s!=null&&a){e.classList.add("is-invalid"),e.id==="-1"&&l.classList.add("d-block");return}let u=r.length>0&&(r.length<i||r.length>d);if(s==null&&u){e.classList.add("is-invalid");return}e.classList.remove("is-invalid"),l.classList.remove("d-block")}function fe(e){if(e==null)throw new Error("The element of the releaser validator is null.");e.classList.remove("is-valid","is-invalid");let r=e.value.trim();r.length>0&&r.length!=11&&e.classList.add("is-invalid")}function z(e,r){if(e==null)throw new Error("The element of the number validator is null.");e.classList.remove("is-valid","is-invalid");let i=parseInt(e.value,10);isNaN(i)&&e.classList.add("is-invalid"),(i>r||i<0)&&e.classList.add("is-invalid")}async function H(e){let r=E(e);r.focus(),await navigator.clipboard.writeText(`${r.value}`).then(function(){console.log(`Copied ${pe(r.value.length)} to the clipboard`)},function(i){console.error(`could not save any text to the clipboard: ${i}`)})}function E(e){let r=document.getElementById(e);if(r==null)throw new Error(`The ${e} for getElmById() element is null.`);return r}function pe(e=0){let s=Math.pow(1e3,2),l=Math.pow(1e3,3);return e>l?`${(Math.round(e*100/l)/100).toFixed(2)} GB`:e>s?`${(Math.round(e*100/s)/100).toFixed(1)} MB`:e>1e3?`${(Math.round(e*100/1e3)/100).toFixed()} kB`:`${Math.round(e).toFixed()} bytes`}(()=>{"use strict";let e=document.getElementById("emulate-run-program");if(e!==null){let t=document.getElementById("emulate-guess-program");if(t===null)throw new Error("The guess program input is missing.");e.addEventListener("input",()=>{if(e.value=e.value.toUpperCase(),e.value!==""){t.disabled=!0;return}t.disabled=!1})}if(E("artifact-editor-key-value")===null)throw new Error("The key value is missing.");let i=E("artifact-editor-key-label");if(i===null)throw new Error("The key label is missing.");if(i.addEventListener("click",()=>H("artifact-editor-key-value")),E("artifact-editor-unique-id-value")===null)throw new Error("The key value is missing.");let s=E("artifact-editor-unique-id-label");if(s===null)throw new Error("The key label is missing.");s.addEventListener("click",()=>H("artifact-editor-unique-id-value"));let l=document.getElementById("artifact-editor-os-label");if(l===null)throw new Error("The operating system label is missing.");let a=document.getElementById("artifact-editor-operating-system");if(a===null)throw new Error("The operating system input is missing.");a.addEventListener("input",p);let u=document.getElementById("artifact-editor-category");if(u===null)throw new Error("The category input is missing.");u.addEventListener("input",h),p(),h();function p(){let t=a.selectedIndex,o=a.options[t].parentNode.label;(typeof o>"u"||o=="")&&(a.classList.add("is-invalid"),a.classList.remove("is-valid"),o="Operating system"),l.textContent=`${o}`}function h(){u.selectedIndex==0&&(u.classList.remove("is-valid"),u.classList.add("is-invalid"))}let g=document.getElementsByName("reset-classifications");if(g.length===0)throw new Error("The reset classifications are missing.");for(let t=0;t<g.length;t++)ge(t);function ge(t){let n=g[t],o=n.getAttribute("data-reset-os");if(o===null)throw new Error("data-reset-os attribute is required for ${elm.id}.");let N=n.getAttribute("data-reset-cat");if(N===null)throw new Error("data-reset-cat attribute is required for ${elm.id}.");n.addEventListener("click",j=>{j.preventDefault(),a.value=o,a.classList.remove("is-invalid"),u.value=N,u.classList.remove("is-invalid"),p(),h()})}let q="artifact-editor-filename",f=document.getElementById(q);if(f===null)throw new Error("The filename input is missing.");f.addEventListener("input",t=>{t.target.classList.remove("is-valid"),t.target.classList.remove("is-invalid"),t.target.value.trim().length===0&&t.target.classList.add("is-invalid")});let O=document.getElementById(q+"-reset");if(O===null)throw new Error("The filename reset is missing.");let C=document.getElementsByName(q+"-resetter");if(C.length===0)throw new Error("The filename resetter is missing.");O.addEventListener("click",()=>{if(f.classList.remove("is-valid"),C.length===0)throw new Error("The filename resetter is missing.");f.value=C[0].value,f.classList.add("is-valid"),f.classList.remove("is-invalid"),f.value.trim().length===0&&f.classList.add("is-invalid")});let M="artifact-editor-releaser",L=document.getElementById(M+"-1");if(L===null)throw new Error("The releaser 1 input is missing.");L.addEventListener("input",t=>b(t.target));let y=document.getElementById(M+"-2");if(y===null)throw new Error("The releaser 2 input is missing.");y.addEventListener("input",t=>b(t.target));let W=document.getElementById(M+"-reset");if(W===null)throw new Error("The releasers reset is missing.");W.addEventListener("click",he);function he(){let t=L.getAttribute("data-reset-rel1");if(t===null)throw new Error("data-reset-rel1 attribute is required for rel1Input.");L.value=t,b(L);let n=y.getAttribute("data-reset-rel2");if(n===null)throw new Error("data-reset-rel2 attribute is required for rel2Input.");y.value=n,b(y)}let D="artifact-editor-title",B=document.getElementById(D);if(B===null)throw new Error("The title input is missing.");B.addEventListener("input",t=>{t.target.classList.remove("is-valid")});let Z=document.getElementById(D+"-reset");if(Z===null)throw new Error("The title reset is missing.");let U=document.getElementsByName(D+"-resetter");if(U.length===0)throw new Error("The title resetter is missing.");Z.addEventListener("click",()=>{if(B.classList.remove("is-valid"),U.length===0)throw new Error("The title resetter is missing.");B.value=U[0].value,B.classList.add("is-valid")});let w="artifact-editor-credit",Y=document.getElementById(w+"-text");if(Y===null)throw new Error("The creator text input is missing.");Y.addEventListener("input",t=>{t.target.classList.remove("is-valid")});let F=document.getElementById(w+"-ill");if(F===null)throw new Error("The creator illustrator input is missing.");F.addEventListener("input",t=>{t.target.classList.remove("is-valid")});let S=document.getElementById(w+"-prog");if(S===null)throw new Error("The creator programmer input is missing.");S.addEventListener("input",t=>{t.target.classList.remove("is-valid")});let V=document.getElementById(w+"-audio");if(V===null)throw new Error("The creator audio input is missing.");V.addEventListener("input",t=>{t.target.classList.remove("is-valid")});let G=document.getElementById(w+"-resetter");if(G===null)throw new Error("The creator resetter is missing.");let _=document.getElementById(w+"-reset");if(_===null)throw new Error("The creator reset is missing.");_.addEventListener("click",()=>{if(G.length===0)throw new Error("The creator resetter is missing.");let t=G.value.split(";");if(t.length!=4)throw new Error("The creator resetter values are invalid.");let n=t[0],o=t[1],N=t[2],j=t[3];Y.value=n,F.value=o,S.value=N,V.value=j});let I=document.getElementById("artifact-editor-comment");if(I===null)throw new Error("The comment input is missing.");I.addEventListener("input",t=>{t.target.classList.remove("is-valid")});let J=document.getElementById("artifact-editor-comment-reset");if(J===null)throw new Error("The comment reset is missing.");let Q=document.getElementById("artifact-editor-comment-resetter");if(Q===null)throw new Error("The comment resetter is missing.");J.addEventListener("click",()=>{I.classList.remove("is-valid"),I.value=Q.value});let X=document.getElementById("artifact-editor-virustotal");if(X===null)throw new Error("The virustotal input is missing.");X.addEventListener("input",t=>{t.target.classList.remove("is-valid","is-invalid");let n=t.target.value.trim();n.length!=0&&(n.startsWith("https://www.virustotal.com/")||t.target.classList.add("is-invalid"))});let c=document.getElementById("artifact-editor-year");if(c===null)throw new Error("The year input is missing.");c.addEventListener("input",()=>{A(c,v,m)});let v=document.getElementById("artifact-editor-month");if(v===null)throw new Error("The month input is missing.");v.addEventListener("input",()=>{A(c,v,m)});let m=document.getElementById("artifact-editor-day");if(m===null)throw new Error("The day input is missing.");m.addEventListener("input",()=>{A(c,v,m)});let ee=document.getElementById("artifact-editor-date-reset");if(ee===null)throw new Error("The date reset is missing.");let te=document.getElementById("artifact-editor-date-resetter");if(te===null)throw new Error("The date resetter is missing.");ee.addEventListener("click",()=>{c.classList.remove("is-invalid","is-valid"),v.classList.remove("is-invalid","is-valid"),m.classList.remove("is-invalid","is-valid");let n=te.value.split("-");if(n.length!=3)throw new Error("The date resetter values are invalid.");c.value=n[0],v.value=n[1],m.value=n[2]});let ie=document.getElementById("artifact-editor-date-lastmod");if(ie!==null){let t=document.getElementById("artifact-editor-date-lastmodder");if(t===null)throw new Error("The date last modder input is missing.");ie.addEventListener("click",()=>{c.classList.remove("is-invalid","is-valid"),v.classList.remove("is-invalid","is-valid"),m.classList.remove("is-invalid","is-valid");let o=t.value.split("-");if(o.length!=3)throw new Error("The date last modder values are invalid.");c.value=o[0],v.value=o[1],m.value=o[2]})}let re=document.getElementById("artifact-editor-links-reset");if(re===null)throw new Error("The links reset is missing.");let T=document.getElementById("artifact-editor-youtube"),ne=document.getElementById("artifact-editor-youtube-reset");if(T===null||ne===null)throw new Error("A YouTube input is missing.");let x=document.getElementById("artifact-editor-demozoo"),se=document.getElementById("artifact-editor-demozoo-reset");if(x===null||se===null)throw new Error("A Demozoo input is missing.");let k=document.getElementById("artifact-editor-pouet"),ae=document.getElementById("artifact-editor-pouet-reset");if(k===null||ae===null)throw new Error("A Pouet input is missing.");let R=document.getElementById("artifact-editor-16colors"),le=document.getElementById("artifact-editor-16colors-reset");if(R===null||le===null)throw new Error("A 16colors input is missing.");let $=document.getElementById("artifact-editor-github"),oe=document.getElementById("artifact-editor-github-reset");if($===null||oe===null)throw new Error("A GitHub input is missing.");let P=document.getElementById("artifact-editor-relations"),de=document.getElementById("artifact-editor-relations-reset");if(P===null||de===null)throw new Error("A relations input is missing.");let K=document.getElementById("artifact-editor-websites"),ue=document.getElementById("artifact-editor-websites-reset");if(K===null||ue===null)throw new Error("A websites input is missing.");re.addEventListener("click",()=>{T.classList.remove("is-invalid","is-valid"),x.classList.remove("is-invalid","is-valid"),k.classList.remove("is-invalid","is-valid"),R.classList.remove("is-invalid","is-valid"),$.classList.remove("is-invalid","is-valid"),P.classList.remove("is-invalid","is-valid"),K.classList.remove("is-invalid","is-valid"),T.value=ne.value,x.value=se.value,k.value=ae.value,R.value=le.value,$.value=oe.value,P.value=de.value,K.value=ue.value});let we=45e4,Ee=2e5;T.addEventListener("input",t=>fe(t.target)),x.addEventListener("input",t=>z(t.target,we)),k.addEventListener("input",t=>z(t.target,Ee)),R.addEventListener("input",t=>ve(t.target)),$.addEventListener("input",t=>ce(t.target))})();})();
+(()=>{function q(e,r,i){if(e==null)throw new Error("The year input element is null.");if(r==null)throw new Error("The month input element is null.");if(i==null)throw new Error("The day input element is null.");e.classList.remove("is-invalid","is-valid"),r.classList.remove("is-invalid","is-valid"),i.classList.remove("is-invalid","is-valid");let l=parseInt(e.value,10);isNaN(l)?e.value="0":e.value=l;let s=parseInt(r.value,10);isNaN(s)?r.value="0":r.value=s;let o=parseInt(i.value,10);isNaN(o)?i.value="0":i.value=o;let d=0,b=new Date().getFullYear(),T=l>=1980&&l<=b;l>d&&!T&&e.classList.add("is-invalid");let u=s>=1&&s<=12;s>d&&!u&&r.classList.add("is-invalid");let c=o>=1&&o<=31;o>d&&!c&&i.classList.add("is-invalid"),isNaN(l)&&(u||c)&&e.classList.add("is-invalid"),(s==d||isNaN(s))&&c&&r.classList.add("is-invalid")}function fe(e){return he(e,!0)}function ge(e){return he(e,!1)}function he(e,r){if(e==null)throw new Error("The repository URL element is null.");e.classList.remove("is-valid","is-invalid");let i=e.value.trim();if(i.length===0)return;if(r==!0&&i.startsWith("refs/")){e.classList.add("is-invalid");return}if(i.includes("://")){e.classList.add("is-invalid");return}let s=/[^A-Za-z0-9-._/]/g;i=i.replace(s,""),i=i.replaceAll("//","/");let o=/^\//;i=i.replace(o,""),e.value=i;let d=e.getAttribute("maxlength");if(d===null)throw new Error(`The maxlength attribute is required for ${e.id}.`);if(i.length>d){e.classList.add("is-invalid");return}}function y(e){if(e==null)throw new Error("The element of the releaser validator is null.");e.classList.remove("is-valid","is-invalid");let r=e.value.trim().toUpperCase();r=r.replace(/[^A-ZÀ-ÖØ-Þ0-9\-,& ]/g,""),e.value=r;let i=e.getAttribute("minlength"),l=e.getAttribute("maxlength"),s=e.getAttribute("required");if(i===null)throw new Error(`The minlength attribute is required for ${e.id}.`);if(l===null)throw new Error(`The maxlength attribute is required for ${e.id}.`);let o=document.getElementById("artifact-editor-releasers-error");if(o===null)throw new Error("The releasers error element is null.");let d=r.length<i||r.length>l;if(s!=null&&d){e.classList.add("is-invalid"),e.id==="-1"&&o.classList.add("d-block");return}let b=r.length>0&&(r.length<i||r.length>l);if(s==null&&b){e.classList.add("is-invalid");return}e.classList.remove("is-invalid"),o.classList.remove("d-block")}function we(e){if(e==null)throw new Error("The element of the releaser validator is null.");e.classList.remove("is-valid","is-invalid");let r=e.value.trim();r.length>0&&r.length!=11&&e.classList.add("is-invalid")}function Z(e,r){if(e==null)throw new Error("The element of the number validator is null.");e.classList.remove("is-valid","is-invalid");let i=parseInt(e.value,10);isNaN(i)&&e.classList.add("is-invalid"),(i>r||i<0)&&e.classList.add("is-invalid")}async function B(e){let r=v(e);r.focus(),await navigator.clipboard.writeText(`${r.value}`).then(function(){console.log(`Copied ${Be(r.value.length)} to the clipboard`)},function(i){console.error(`could not save any text to the clipboard: ${i}`)})}function v(e){let r=document.getElementById(e);if(r==null)throw new Error(`The ${e} for getElmById() element is null.`);return r}function Be(e=0){let s=Math.pow(1e3,2),o=Math.pow(1e3,3);return e>o?`${(Math.round(e*100/o)/100).toFixed(2)} GB`:e>s?`${(Math.round(e*100/s)/100).toFixed(1)} MB`:e>1e3?`${(Math.round(e*100/1e3)/100).toFixed()} kB`:`${Math.round(e).toFixed()} bytes`}(()=>{"use strict";let e=document.getElementById("emulate-run-program");if(e!==null){let t=document.getElementById("emulate-guess-program");if(t===null)throw new Error("The guess program input is missing.");e.addEventListener("input",()=>{if(e.value=e.value.toUpperCase(),e.value!==""){t.disabled=!0;return}t.disabled=!1})}if(v("artifact-editor-key-value")===null)throw new Error("The key value is missing.");let i=v("artifact-editor-key-label");if(i===null)throw new Error("The key label is missing.");if(i.addEventListener("click",()=>B("artifact-editor-key-value")),v("artifact-editor-unique-id-value")===null)throw new Error("The unique id value is missing.");let s=v("artifact-editor-unique-id-label");if(s===null)throw new Error("The unique id label is missing.");if(s.addEventListener("click",()=>B("artifact-editor-unique-id-value")),v("artifact-editor-location-value")===null)throw new Error("The location value is missing.");let d=v("artifact-editor-location-label");if(d===null)throw new Error("The location label is missing.");d.addEventListener("click",()=>B("artifact-editor-location-value")),v("artifact-editor-templocation")!==null&&v("artifact-editor-templocation-label").addEventListener("click",()=>B("artifact-editor-templocation"));let T=document.getElementById("artifact-editor-os-label");if(T===null)throw new Error("The operating system label is missing.");let u=document.getElementById("artifact-editor-operating-system");if(u===null)throw new Error("The operating system input is missing.");u.addEventListener("input",C);let c=document.getElementById("artifact-editor-category");if(c===null)throw new Error("The category input is missing.");c.addEventListener("input",M),C(),M();function C(){let t=u.selectedIndex,a=u.options[t].parentNode.label;(typeof a>"u"||a=="")&&(u.classList.add("is-invalid"),u.classList.remove("is-valid"),a="Operating system"),T.textContent=`${a}`}function M(){c.selectedIndex==0&&(c.classList.remove("is-valid"),c.classList.add("is-invalid"))}let D=document.getElementsByName("reset-classifications");if(D.length===0)throw new Error("The reset classifications are missing.");for(let t=0;t<D.length;t++)Ee(t);function Ee(t){let n=D[t],a=n.getAttribute("data-reset-os");if(a===null)throw new Error("data-reset-os attribute is required for ${elm.id}.");let A=n.getAttribute("data-reset-cat");if(A===null)throw new Error("data-reset-cat attribute is required for ${elm.id}.");n.addEventListener("click",W=>{W.preventDefault(),u.value=a,u.classList.remove("is-invalid"),c.value=A,c.classList.remove("is-invalid"),C(),M()})}let U="artifact-editor-filename",h=document.getElementById(U);if(h===null)throw new Error("The filename input is missing.");h.addEventListener("input",t=>{t.target.classList.remove("is-valid"),t.target.classList.remove("is-invalid"),t.target.value.trim().length===0&&t.target.classList.add("is-invalid")});let _=document.getElementById(U+"-reset");if(_===null)throw new Error("The filename reset is missing.");let Y=document.getElementsByName(U+"-resetter");if(Y.length===0)throw new Error("The filename resetter is missing.");_.addEventListener("click",()=>{if(h.classList.remove("is-valid"),Y.length===0)throw new Error("The filename resetter is missing.");h.value=Y[0].value,h.classList.add("is-valid"),h.classList.remove("is-invalid"),h.value.trim().length===0&&h.classList.add("is-invalid")});let F="artifact-editor-releaser",E=document.getElementById(F+"-1");if(E===null)throw new Error("The releaser 1 input is missing.");E.addEventListener("input",t=>y(t.target));let p=document.getElementById(F+"-2");if(p===null)throw new Error("The releaser 2 input is missing.");p.addEventListener("input",t=>y(t.target));let J=document.getElementById(F+"-reset");if(J===null)throw new Error("The releasers reset is missing.");J.addEventListener("click",pe);function pe(){let t=E.getAttribute("data-reset-rel1");if(t===null)throw new Error("data-reset-rel1 attribute is required for rel1Input.");E.value=t,y(E);let n=p.getAttribute("data-reset-rel2");if(n===null)throw new Error("data-reset-rel2 attribute is required for rel2Input.");p.value=n,y(p)}let S="artifact-editor-title",L=document.getElementById(S);if(L===null)throw new Error("The title input is missing.");L.addEventListener("input",t=>{t.target.classList.remove("is-valid")});let Q=document.getElementById(S+"-reset");if(Q===null)throw new Error("The title reset is missing.");let V=document.getElementsByName(S+"-resetter");if(V.length===0)throw new Error("The title resetter is missing.");Q.addEventListener("click",()=>{if(L.classList.remove("is-valid"),V.length===0)throw new Error("The title resetter is missing.");L.value=V[0].value,L.classList.add("is-valid")});let w="artifact-editor-credit",G=document.getElementById(w+"-text");if(G===null)throw new Error("The creator text input is missing.");G.addEventListener("input",t=>{t.target.classList.remove("is-valid")});let P=document.getElementById(w+"-ill");if(P===null)throw new Error("The creator illustrator input is missing.");P.addEventListener("input",t=>{t.target.classList.remove("is-valid")});let K=document.getElementById(w+"-prog");if(K===null)throw new Error("The creator programmer input is missing.");K.addEventListener("input",t=>{t.target.classList.remove("is-valid")});let j=document.getElementById(w+"-audio");if(j===null)throw new Error("The creator audio input is missing.");j.addEventListener("input",t=>{t.target.classList.remove("is-valid")});let z=document.getElementById(w+"-resetter");if(z===null)throw new Error("The creator resetter is missing.");let X=document.getElementById(w+"-reset");if(X===null)throw new Error("The creator reset is missing.");X.addEventListener("click",()=>{if(z.length===0)throw new Error("The creator resetter is missing.");let t=z.value.split(";");if(t.length!=4)throw new Error("The creator resetter values are invalid.");let n=t[0],a=t[1],A=t[2],W=t[3];G.value=n,P.value=a,K.value=A,j.value=W});let I=document.getElementById("artifact-editor-comment");if(I===null)throw new Error("The comment input is missing.");I.addEventListener("input",t=>{t.target.classList.remove("is-valid")});let ee=document.getElementById("artifact-editor-comment-reset");if(ee===null)throw new Error("The comment reset is missing.");let te=document.getElementById("artifact-editor-comment-resetter");if(te===null)throw new Error("The comment resetter is missing.");ee.addEventListener("click",()=>{I.classList.remove("is-valid"),I.value=te.value});let ie=document.getElementById("artifact-editor-virustotal");if(ie===null)throw new Error("The virustotal input is missing.");ie.addEventListener("input",t=>{t.target.classList.remove("is-valid","is-invalid");let n=t.target.value.trim();n.length!=0&&(n.startsWith("https://www.virustotal.com/")||t.target.classList.add("is-invalid"))});let m=document.getElementById("artifact-editor-year");if(m===null)throw new Error("The year input is missing.");m.addEventListener("input",()=>{q(m,f,g)});let f=document.getElementById("artifact-editor-month");if(f===null)throw new Error("The month input is missing.");f.addEventListener("input",()=>{q(m,f,g)});let g=document.getElementById("artifact-editor-day");if(g===null)throw new Error("The day input is missing.");g.addEventListener("input",()=>{q(m,f,g)});let re=document.getElementById("artifact-editor-date-reset");if(re===null)throw new Error("The date reset is missing.");let ne=document.getElementById("artifact-editor-date-resetter");if(ne===null)throw new Error("The date resetter is missing.");re.addEventListener("click",()=>{m.classList.remove("is-invalid","is-valid"),f.classList.remove("is-invalid","is-valid"),g.classList.remove("is-invalid","is-valid");let n=ne.value.split("-");if(n.length!=3)throw new Error("The date resetter values are invalid.");m.value=n[0],f.value=n[1],g.value=n[2]});let se=document.getElementById("artifact-editor-date-lastmod");if(se!==null){let t=document.getElementById("artifact-editor-date-lastmodder");if(t===null)throw new Error("The date last modder input is missing.");se.addEventListener("click",()=>{m.classList.remove("is-invalid","is-valid"),f.classList.remove("is-invalid","is-valid"),g.classList.remove("is-invalid","is-valid");let a=t.value.split("-");if(a.length!=3)throw new Error("The date last modder values are invalid.");m.value=a[0],f.value=a[1],g.value=a[2]})}let oe=document.getElementById("artifact-editor-links-reset");if(oe===null)throw new Error("The links reset is missing.");let x=document.getElementById("artifact-editor-youtube"),ae=document.getElementById("artifact-editor-youtube-reset");if(x===null||ae===null)throw new Error("A YouTube input is missing.");let k=document.getElementById("artifact-editor-demozoo"),le=document.getElementById("artifact-editor-demozoo-reset");if(k===null||le===null)throw new Error("A Demozoo input is missing.");let R=document.getElementById("artifact-editor-pouet"),de=document.getElementById("artifact-editor-pouet-reset");if(R===null||de===null)throw new Error("A Pouet input is missing.");let $=document.getElementById("artifact-editor-16colors"),ue=document.getElementById("artifact-editor-16colors-reset");if($===null||ue===null)throw new Error("A 16colors input is missing.");let N=document.getElementById("artifact-editor-github"),ce=document.getElementById("artifact-editor-github-reset");if(N===null||ce===null)throw new Error("A GitHub input is missing.");let H=document.getElementById("artifact-editor-relations"),ve=document.getElementById("artifact-editor-relations-reset");if(H===null||ve===null)throw new Error("A relations input is missing.");let O=document.getElementById("artifact-editor-websites"),me=document.getElementById("artifact-editor-websites-reset");if(O===null||me===null)throw new Error("A websites input is missing.");oe.addEventListener("click",()=>{x.classList.remove("is-invalid","is-valid"),k.classList.remove("is-invalid","is-valid"),R.classList.remove("is-invalid","is-valid"),$.classList.remove("is-invalid","is-valid"),N.classList.remove("is-invalid","is-valid"),H.classList.remove("is-invalid","is-valid"),O.classList.remove("is-invalid","is-valid"),x.value=ae.value,k.value=le.value,R.value=de.value,$.value=ue.value,N.value=ce.value,H.value=ve.value,O.value=me.value});let Le=45e4,ye=2e5;x.addEventListener("input",t=>we(t.target)),k.addEventListener("input",t=>Z(t.target,Le)),R.addEventListener("input",t=>Z(t.target,ye)),$.addEventListener("input",t=>ge(t.target)),N.addEventListener("input",t=>fe(t.target))})();})();
diff --git a/view/app/artifacteditjsdos.tmpl b/view/app/artifacteditjsdos.tmpl
index 96fa4b2d..31457544 100644
--- a/view/app/artifacteditjsdos.tmpl
+++ b/view/app/artifacteditjsdos.tmpl
@@ -299,8 +299,8 @@
                     It required a 286 or newer CPU, and in the early and mid 1990s, 
                     the XMS was the far more common way for games to access memory.</div>
             </div>
+        </div>
         {{- end}}
-      </div>
     </div>
     {{/*  Switch to assets and reset buttons  */}}
     {{- template "artifactfooter" . }}
diff --git a/view/app/artifactfile.tmpl b/view/app/artifactfile.tmpl
index bd533d3c..c9b9e009 100644
--- a/view/app/artifactfile.tmpl
+++ b/view/app/artifactfile.tmpl
@@ -76,8 +76,10 @@
           <div class="col-xl-6">
             <legend>Artifact for download</legend>
             <div class="input-group mb-1">
-              <label class="input-group-text w-25" for="artifact-editor-dl-loc">Location</label>
-              <input type="text" class="form-control" id="artifact-editor-dl-loc" value="{{$downloadPath}}" autocomplete="off" readonly>
+              <button type="button" class="btn btn-secondary w-25" id="artifact-editor-location-label"
+                data-bs-toggle="tooltip" data-bs-title="Copy the path">Location</button>
+              <input type="text" class="form-control" name="artifact-editor-location-value" id="artifact-editor-location-value" 
+                aria-describedby="artifact-editor-location-label" value="{{$downloadPath}}" autocomplete="off" readonly>
             </div>
             <div class="input-group mb-1">
               <label class="input-group-text w-25" for="artifact-editor-dl-fn">Filename</label>
@@ -146,8 +148,19 @@
             <div class="input-group mb-3"><span class="text-info-emphasis">Nothing to show as the artifact is not an archive (a ZIP or RAR file, etc.)</span></div>
             {{- else}}
             <div class="input-group mb-3">
-              <label class="input-group-text w-25" for="artifact-editor-decompress-loc" id="aartifact-editor-decompress-loc-label">Temp location</label>
-              <input type="text" class="form-control" id="artifact-editor-decompress-loc" value="{{$modDecompressLoc}}" readonly>
+              <button type="button" class="btn btn-secondary w-25" id="artifact-editor-templocation-label"
+                data-bs-toggle="tooltip" data-bs-title="Copy the path">Temp location</button>
+              <input type="text" class="form-control" name="artifact-editor-templocation" id="artifact-editor-templocation" 
+                aria-describedby="artifact-editor-templocation-label" value="{{$modDecompressLoc}}" readonly>
+
+              {{/*  
+            <div class="input-group">
+              <button type="button" class="btn btn-secondary" id="artifact-editor-key-label"
+                data-bs-toggle="tooltip" data-bs-title="Copy the key">Record key</button>
+              <input type="text" value='{{$key}}' class="form-control" name="artifact-editor-key" id="artifact-editor-key-value"
+                aria-describedby="artifact-editor-key-label" readonly>
+            </div>  */}}
+
             </div>
             <div class="container text-begin mb-3">
               <hr class="m-0 mb-3 mt-3">
@@ -270,7 +283,7 @@
                         <div class="invalid-feedback" id="edHideMeErr">error placeholder</div>  
                       </div>  */}}
                       <div>
-                        <button class="btn btn-link" 
+                        <button class="btn btn-link m-0 p-0" 
                           hx-target="#editor-copy-readme-result"
                           hx-delete="/editor/readme/{{$unid}}">
                           Delete README</button>
@@ -278,7 +291,7 @@
                       {{- end}}
                       {{- if ne "" (index . "modReadmeSuggest")}}
                       <div>
-                        <button class="btn btn-link" 
+                        <button class="btn btn-link m-0 p-0" 
                           hx-target="#editor-copy-readme-result"
                           hx-patch="/editor/readme/copy/{{$unid}}/{{$modReadmeSuggest | urlEncode }}">
                           Use guessed README file</button>
diff --git a/view/app/artifacts.tmpl b/view/app/artifacts.tmpl
index 794ed76f..92fe9a6f 100644
--- a/view/app/artifacts.tmpl
+++ b/view/app/artifacts.tmpl
@@ -78,12 +78,12 @@
         {{- if ne $attr ""}}
         <p class="card-text"><small class="text-body-secondary">{{$attr}}</small></p>
         {{- end}}
-        {{- if eq $editor true}}{{ template "artifactsedit" . }}{{end}}
         {{- linkPage .ID}}
         {{- linkDownload .ID .FileSecurityAlertURL.String }}{{ downloadB .Filesize}}
         {{- linkPreview .ID .Filename.String .Platform.String}}
       </div>
       <a href="{{linkHref .ID}}">{{thumb .UUID.String .Filename.String true }}</a>
+      {{- if eq $editor true}}{{ template "artifactsedit" . }}{{end}}
     </div>
   </div>
   {{- /*  End of the iteration of the records */}}
diff --git a/view/app/artifactsedit.tmpl b/view/app/artifactsedit.tmpl
index fc971718..f5c046d4 100644
--- a/view/app/artifactsedit.tmpl
+++ b/view/app/artifactsedit.tmpl
@@ -1,11 +1,20 @@
 {{- /* artifactsedit.tmpl */}}
 {{- define "artifactsedit" }}
 {{- $zooID := .WebIDDemozoo.Int64 }}
-{{- if gt $zooID 0}}
-  {{- /*  Demozoo production ID  */}}
-  <p class="card-text"><small class="text-body-info" id="editorFeedback{{ .WebIDDemozoo.Int64 }}">
-    <a href="https://demozoo.org/productions/{{ .WebIDDemozoo.Int64 }}">Lookup Demozoo</a>, production #{{ .WebIDDemozoo.Int64 }}</small>
-  </p>
-  {{- demozooGetLink .Filename .Filesize .WebIDDemozoo .UUID }}
-{{- end}}
+{{- $editorLink := "link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"}}
+{{- $syncLink := demozooGetLink .Filename .Filesize .WebIDDemozoo .UUID}}
+  <div class="card-footer">
+    <strong>Editor</strong>, 
+    <a class="{{$editorLink}}" href="{{linkHref .ID}}#data-editor">metadata</a>, 
+    <a class="{{$editorLink}}" href="{{linkHref .ID}}#file-editor">file assets</a>, 
+    <a class="{{$editorLink}}" href="{{linkHref .ID}}#emulate-editor">emulator</a> settings
+    <br>
+  {{- if gt $zooID 0}}
+    {{- /*  Demozoo production ID  */}}
+    <div class="card-text"><small class="text-body-info" id="editorFeedback{{ .WebIDDemozoo.Int64 }}">
+      Demozoo production <a class="{{$editorLink}}" href="https://demozoo.org/productions/{{ .WebIDDemozoo.Int64 }}">{{ .WebIDDemozoo.Int64 }}</a>
+      {{- if ne $syncLink ""}}, <a class="{{$editorLink}}" href="">{{$syncLink}}</a>{{end}}</small>
+    </div>
+  {{- end}}
+  </div>
 {{- end}}
\ No newline at end of file