<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-import-fingerprint-input" class="col-2 col-form-label">fingerprint</label>
                        <div class="col-10">
                            <input id="key-import-fingerprint-input" type="text" class="form-control" placeholder="PGP key fingerprint" name="key" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="key-import-server-input" class="col-2 col-form-label">key server</label>
                        <div class="col-10">
                            <input id="key-import-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-2"></div>
                        <div class="col-10">
                            <pre class="language-less"><samp id="key-import-body-input" class="pre-scrollable language-less"></samp><button id="key-import-copy-button" 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 = document.getElementById("key-import-modal");
    const keyImportForm = document.getElementById("key-import-form");

    const keyImportBodyInput = document.getElementById("key-import-body-input");
    const keyImportCopyButton = document.getElementById("key-import-copy-button");

    const keyImportFingerprintInput = document.getElementById("key-import-fingerprint-input");
    const keyImportServerInput = document.getElementById("key-import-server-input");

    async function copyPgpKey() {
        const key = keyImportBodyInput.textContent;
        await copyToClipboard(key, keyImportCopyButton);
    }

    function fetchPgpKey() {
        const key = keyImportFingerprintInput.value;
        const server = keyImportServerInput.value;

        if (key && server) {
            makeRequest(
                "/api/v1/service/pgp",
                {
                    query: {
                        key: key,
                        server: server,
                    },
                    convert: response => response.json(),
                },
                data => { keyImportBodyInput.textContent = data.key; },
            );
        }
    }

    function importPgpKey() {
        const key = keyImportFingerprintInput.value;
        const server = keyImportServerInput.value;

        if (key && server) {
            makeRequest(
                "/api/v1/service/pgp",
                {
                    method: "POST",
                    json: {
                        key: key,
                        server: server,
                    },
                },
                _ => {
                    bootstrap.Modal.getOrCreateInstance(keyImportModal).hide();
                    showSuccess("Success", `Key ${key} has been imported`);
                },
                error => {
                    const message = _ => `Could not import key ${key} from ${server}`;
                    showFailure("Action failed", message, error);
                },
            );
        }
    }

    ready(_ => {
        keyImportModal.addEventListener("hidden.bs.modal", _ => {
            keyImportBodyInput.textContent = "";
            keyImportForm.reset();
        });
    });
</script>
