{{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 cursor-pointer 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}}