<div id="key-import-modal" tabindex="-1" role="dialog" class="modal fade">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <form id="key-import-form" onsubmit="return false">
                <div class="modal-header">
                    <h4 class="modal-title">Import key from PGP server</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label for="key-fingerprint-input" class="col-sm-2 col-form-label">fingerprint</label>
                        <div class="col-sm-10">
                            <input id="key-fingerprint-input" type="text" class="form-control" placeholder="PGP key fingerprint" name="key" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="key-server-input" class="col-sm-2 col-form-label">key server</label>
                        <div class="col-sm-10">
                            <input id="key-server-input" type="text" class="form-control" placeholder="PGP key server" name="server" value="keyserver.ubuntu.com" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-10">
                            <pre class="language-less"><samp id="key-body-input" class="pre-scrollable language-less"></samp><button id="key-copy-btn" type="button" class="btn language-less" onclick="copyPgpKey()"><i class="bi bi-clipboard"></i> copy</button></pre>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" onclick="importPgpKey()"><i class="bi bi-play"></i> import</button>
                    <button type="submit" class="btn btn-success" onclick="fetchPgpKey()"><i class="bi bi-arrow-clockwise"></i> fetch</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const keyImportModal = $("#key-import-modal");
    const keyImportForm = $("#key-import-form");
    keyImportModal.on("hidden.bs.modal", () => {
        keyBodyInput.text("");
        keyImportForm.trigger("reset");
    });

    const keyBodyInput = $("#key-body-input");
    const keyCopyButton = $("#key-copy-btn");

    const keyFingerprintInput = $("#key-fingerprint-input");
    const keyServerInput = $("#key-server-input");

    async function copyPgpKey() {
        const logs = keyBodyInput.text();
        await copyToClipboard(logs, keyCopyButton);
    }

    function fetchPgpKey() {
        const key = keyFingerprintInput.val();
        const server = keyServerInput.val();

        if (key && server) {
            $.ajax({
                url: "/api/v1/service/pgp",
                data: {"key": key, "server": server},
                type: "GET",
                dataType: "json",
                success: response => { keyBodyInput.text(response.key); },
            });
        }
    }

    function importPgpKey() {
        const key = keyFingerprintInput.val();
        const server = keyServerInput.val();

        if (key && server) {
            $.ajax({
                url: "/api/v1/service/pgp",
                data: JSON.stringify({key: key, server: server}),
                type: "POST",
                contentType: "application/json",
                success: _ => {
                    keyImportModal.modal("hide");
                    showSuccess("Success", `Key ${key} has been imported`);
                },
                error: (jqXHR, _, errorThrown) => {
                    const message = _ => `Could not import key ${key} from ${server}`;
                    showFailure("Action failed", message, jqXHR, errorThrown);
                },
            });
        }
    }
</script>
