{{ define "copyPaste" }}

<div class="modal" id="copyPasteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="copyPasteModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered auto-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="copyPasteModalLabel"><i class="icon-copy-paste icon-white"></i>Copy/Paste</span>
                <span class="btn btn-transparent" onclick="hideDialog('copyPasteModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="container-data"><p id="copyPasteInfo">Are you sure you want to copy/paste the following names?</p></td>
                    </tr>
                    <tr class="row-data">
                        <td><textarea class="form-control text-area rounded-0" rows="10" cols="50" tabindex="0" name="copyPasteText" id="copyPasteText"></textarea></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('copyPasteModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="1" id="copyPasteConfirmation" onclick="pasteNames({{ .PageType }})">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--
This text area is hidden off-screen and used for handling the copy and paste operations.  Could not use the appendChild/removeChild
methodology because it would cause the body of the page to shift upwards due to the newly appended child and removal would not
reset the positioning of the body for this specific page only
-->
<textarea id="copyPasteArea" style="opacity: 0; position: absolute; top: -5em"></textarea>

<script type="text/javascript" charset="utf-8">
    function handlePaste(callback, message) {
        document.getElementById('copyPasteText').value = "";
        let onClick = ($("#copyPasteConfirmation").attr("onclick"))
        onClick = onClick.replace(/\w+/, callback)
        $("#copyPasteConfirmation").attr("onclick", onClick);
        document.getElementById('copyPasteInfo').innerHTML = message;
        document.getElementById("copyPasteModal").style.display = "block";
        document.getElementById("copyPasteModal").style.zIndex = "-1";
        document.getElementById("copyPasteText").focus();
        const debouncedPaste = debounce(function callback() {
            $("#copyPasteConfirmation").click()
        }, 1);
        debouncedPaste();
    }

    /**
     * This function copies the given text to the operating system's clipboard
     *
     * @param text The text to be copied
     * @param copyAreaId The user can specify a specific id of an element to perform the copy operation to (specifically for the private.alias.html page)
     */
    function copyToClipboard(text, copyAreaId) {
        const textArea = (copyAreaId) ? document.getElementById(copyAreaId) : document.createElement("textarea");
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
            document.execCommand('copy');
        } catch (err) {
            console.error('Unable to copy to clipboard', err);
        }
        if (!copyAreaId) {
            document.body.removeChild(textArea);
        }
    }
</script>
{{ end }}