{{ define "bodyClass" }}page-keys{{ end }}

{{ define "content" }}
    <main class="max-80">
        <h1>Public keys</h1>

        <h2>SSH</h2>
        <p>
            text/plain: <a href="/ssh/">https://prettysunflower.moe/ssh</a>
        </p>

        <div class="key">
            <input id="ssh-key" value="{{ .Ssh }}" readonly>
            <button class="copy-button" data-keyid="ssh-key"><img src="/static/svg/copy.svg" alt="copy icon"></button>
        </div>

        <h2>age</h2>
        <p>
            text/plain: <a href="/age/">https://prettysunflower.moe/age</a>
        </p>

        <div class="key">
            <input id="age-key" value="{{ .Age }}" readonly>
            <button class="copy-button" data-keyid="age-key"><img src="/static/svg/copy.svg" alt="copy icon"></button>
        </div>

        <h2>GPG</h2>
        <p>
            text/plain: <a href="/gpg/">https://prettysunflower.moe/gpg</a>
        </p>

        <div class="key">
            <textarea id="gpg-key" readonly>{{ .Gpg }}</textarea>
            <button class="copy-button" data-keyid="gpg-key"><img src="/static/svg/copy.svg" alt="copy icon"></button>
        </div>
    </main>

    <script>
        document.querySelectorAll("textarea").forEach(function(textarea) {
            textarea.style.height = textarea.scrollHeight + "px";
            textarea.style.overflowY = "hidden";

            textarea.addEventListener("input", function() {
                this.style.height = "auto";
                this.style.height = this.scrollHeight + "px";
            });
        });

        document.querySelectorAll("button.copy-button").forEach(function(button) {
            button.addEventListener("click", function() {
                const keyInput = document.getElementById(button.dataset.keyid);
                keyInput.select();
                document.execCommand("copy");
            })
        })
    </script>
{{ end }}