{{define "page-content"}} <h2>Diese Ausgabe</h2> <form hx-encoding="multipart/form-data"> <div class="flex flex-col gap-4"> <div class="w-full" id="issue-banner-container"></div> <h3>Titelseite</h3> <div class="grid grid-cols-2 gap-4 items-center"> <div class="flex flex-col"> <label for="issue-title">Titel</label> <input name="issue-title" required type="text" /> </div> <div class="grid grid-cols-1 items-center"> <label class="btn text-center" for="issue-banner-upload">Titelbild</label> <input class="hidden" id="issue-banner-upload" name="issue-banner" type="file" required hx-post="/issue/upload-banner" hx-target="#issue-banner-container" /> </div> </div> <div> <h3>Über diese Ausgabe</h3> <div> <textarea id="easyMDE" placeholder="Beschreibung dieser Ausgabe"></textarea> <input id="issue-content" name="issue-content" type="hidden" /> </div> </div> <div> <h3>Aktuelle Artikel</h3> <div class="flex flex-col gap-4"> {{range .}} <div class="border border-slate-200 dark:border-slate-800 px-2 py-1 rounded-md"> <h1 class="font-bold text-2xl">{{.Title}}</h1> <p>{{.Summary}}</p> </div> {{end}} </div> </div> </div> <div class="btn-area"> <button class="action-btn" hx-post="/issue/publish" hx-target="#page-content">Ausgabe publizieren</button> <button class="btn" hx-get="/hub" hx-target="#page-content">Abbrechen</button> </div> </form> <script> var easyMDE = new EasyMDE({ element: document.getElementById('easyMDE'), hideIcons: ['image'], imageTexts: {sbInit: ''}, showIcons: ["code", "table", "upload-image"], uploadImage: true, imageUploadFunction: function (file, onSuccess, onError) { var formData = new FormData(); formData.append('article-image', file); fetch('/article/upload-image', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { onSuccess(data); }) .catch(error => { onError(error); }); }, }); easyMDE.codemirror.on("change", () => { document.getElementById('issue-content').value = easyMDE.value(); }); </script> {{end}} {{define "issue-banner-template"}} <div class="w-full" id="issue-banner-container"> <img src="data:image/webp;base64,{{.BannerImage}}" alt="Banner Image"> <input id="issue-banner-url" name="issue-banner-url" type="hidden" value="{{.URL}}" /> </div> {{end}}