{{define "page-content"}}
<h2>Editor</h2>

<form id="edit-area">
    {{if eq .Mode 0}}
    <button class="btn" hx-post="/preview-article" hx-target="#page-content">Vorschau</button>

    <div class="flex flex-col gap-y-1">
        <label for="article-title">Titel</label>
        <input name="article-title" type="text" value="{{.Title}}" />
    </div>
    <div class="flex flex-col">
        <label for="article-description">Beschreibung</label>
        <textarea name="article-description">{{.Description}}</textarea>
    </div>
    <div class="flex flex-col">
        <label for="article-content">Artikel</label>
        <textarea name="article-content">{{.Content}}</textarea>
    </div>

    <div>
        <span>Tags</span>
        <div class="flex flex-wrap gap-x-4">
            {{range .Tags}}
            <div>
                <input id="{{.Name}}" name="tags" type="checkbox" value="{{.ID}}" />
                <label for="{{.Name}}">{{.Name}}</label>
            </div>
            {{end}}
        </div>
    </div>

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

    <div class="btn-area">
        <input class="action-btn" type="submit" value="Senden" hx-post="/submit-article" hx-target="#page-content" />
        <button class="btn" hx-get="/hub" hx-target="#page-content">Abbrechen</button>
    </div>
    {{else}}
    <button class="btn" hx-get="/write-article" hx-target="#page-content">Schreiben</button>

    <span>Titel</span>
    <div class="bg-white border mb-3 px-2 py-2 rounded-md w-full">
        {{.Title}}
    </div>

    <span>Beschreibung</span>
    <div class="bg-white border mb-3 px-2 py-2 rounded-md w-full">
        {{.Description}}
    </div>

    <span>Artikel</span>
    <div class="bg-white border mb-3 px-2 py-2 rounded-md w-full">
        <div class="prose">
            {{.HTMLContent}}
        </div>
    </div>
    {{end}}
</form>

<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 class="border px-2 py-1 rounded-md flex gap-4 justify-between">
    <div class="self-center">{{.}}</div>
    <button class="bg-slate-50 border my-2 px-3 py-2 rounded-md w-32 hover:bg-slate-100"
        onclick="copyToClipboard('{{.}}')">Kopieren</button>
</div>
{{end}}
{{end}}