{{define "page-content"}}
<h2>Diese Ausgabe</h2>

<form hx-encoding="multipart/form-data">
    <div class="flex flex-col gap-4">
        <div>
            <h3>Aktuelle Artikel</h3>
            <div class="flex flex-col gap-4">
                {{range .}}
                <div class="border px-2 py-1 rounded-md">
                    <h1 class="font-bold text-2xl">{{.Title}}</h1>
                    <p>{{.Description}}</p>
                </div>
                {{end}}
            </div>
        </div>

        <div>
            <h3>Cover</h3>
            <input id="image-upload" name="issue-image" type="file" required hx-post="/issue/upload-image" />
        </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>

    <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}}