{{define "page-content"}}
<h2>Editor</h2>
<form>
    <div>
        <input name="article-title" placeholder="Titel" type="text" />
        <textarea name="article-description" placeholder="Beschreibung"></textarea>
        <textarea name="article-content" placeholder="Artikel"></textarea>
    </div>

    <div>
        {{range .}}
        <div>
            <input id="{{.Name}}" name="tags" type="checkbox" value="{{.ID}}" />
            <label for="{{.Name}}">{{.Name}}</label>
        </div>
        {{end}}
    </div>

    <div id="editor-images">
        <input name="article-image" type="file" hx-encoding="multipart/form-data" hx-post="/upload-image/"
            hx-swap="beforeend" hx-target="#editor-images" />
    </div>

    <input type="submit" value="Senden" hx-post="/submit-article/" hx-target="#page-content" />
</form>

<button hx-get="/hub/" hx-target="#page-content">Abbrechen</button>

<script>
    function copyToClipboard(text) {
        event.preventDefault(); // Get-Request verhindern

        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        document.body.appendChild(textarea);

        textarea.select();
        try {
            document.execCommand('copy');
        } catch (err) {
            console.warn('Fehler beim Kopieren', err);
        }

        document.body.removeChild(textarea);
    }

</script>
{{end}}

{{define "editor-images"}}
{{if gt (len .) 0}}
<div>
    {{.}}
    <button onclick="copyToClipboard('{{.}}')">Kopieren</button>
</div>
{{end}}
{{end}}