<script>
        function ping() {
            const ping_url = '/ping';

            hostname = document.getElementById('textarea').value;
            // add fancy loading gif
            input = document.getElementById('textarea_div');

            input.className += ' is-loading';

            // send the command to the backend
            data = {
                'host': hostname
            };
            fetch(ping_url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                })
                .then((response) => {
                    return response.json();
                })
                .then(function (data) {
                    command = document.getElementById('command');
                    return_code = document.getElementById('status');

                    if (data.status != 'ok') {
                        if ('command' in data) {
                            command.innerText = data.command;
                        } else {
                            command.innerText = 'No command executed.';
                        }
                        return_code.innerText = 'Something went wrong:' + data.status;
                        return
                    }
                    command.innerText = data.command;

                    return_code.innerText = 'Return code: ' + data.return_code;
                }).finally(function () {
                    input.className = 'control';
                    hljs.highlightBlock(command);
                    hljs.highlightBlock(return_code);
                })
        }
        window.onload = function () {
            return_code = document.getElementById('status');
            command = document.getElementById('command');
            hljs.highlightBlock(return_code);
            hljs.highlightBlock(command);
        }
    </script>