src/components/operations/operation-details/ko/runtime/operation-console.html

<!-- ko if: working -->
<div class="panel panel-dark fit">
    <spinner class="fit"></spinner>
</div>
<!-- /ko -->

<!-- ko ifnot: working -->
<div class="flex flex-column fit animation-fade-in" data-bind="dialog: {}">
    <div class="flex-item flex-grow">
        <div class="panel panel-dark" data-bind="with: consoleOperation">
            <button type="button" tabindex="0" class="no-border pull-right" data-dismiss="modal"
                aria-label="Close console" data-bind="click: $parents[1].closeConsole">
                <i class="icon-emb icon-emb-simple-remove"></i>
            </button>

            <nav aria-label="breadcrumb" style="margin-right: 20px">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="#"
                            data-bind="text: api.displayName, attr: { href: $component.getApiReferenceUrl() }"></a>
                    </li>
                    <!-- ko if: api.apiVersion -->
                    <li class="breadcrumb-item">
                        <span data-bind="text: api.apiVersion"></span>
                    </li>
                    <!-- /ko -->

                    <!-- ko ifnot: api.type === 'websocket' -->
                    <li class="breadcrumb-item text-wrap">
                        <span data-bind="text: name"></span>
                    </li>
                    <!-- /ko -->
                </ol>
            </nav>

            <!-- ko ifnot: api.type === 'websocket' -->
            <div class="text-monospace text-wrap" data-bind="text: urlTemplate, attr: { 'data-method': method }"></div>
            <!-- /ko -->

            <!-- ko if: $component.hostnameSelectionEnabled() || $component.showHostnameInput() -->
            <h3>Host</h3>

            <div class="row flex flex-row">
                <div class="col-4">
                    <label for="hostname" class="text-monospace form-label">
                        Hostname
                    </label>
                </div>
                <div class="col-7">
                    <div class="form-group">
                        <!-- ko if: $component.hostnameSelectionEnabled -->
                        <select id="hostname" class="form-control" data-bind="value: $component.selectedHostname">
                            <!-- ko foreach: { data: $component.hostnames, as: 'hostname' } -->
                            <option data-bind="value: hostname, text: hostname"></option>
                            <!-- /ko -->
                        </select>
                        <!-- /ko -->
                        <!-- ko if: $component.showHostnameInput -->
                        <input id="hostname" type="text" autocomplete="off" class="form-control form-control-sm"
                            placeholder="hostname" spellcheck="false"
                            data-bind="event: { keyup: $component.updateRequestSummary }, textInput: $component.selectedHostname">
                        <!-- /ko -->
                    </div>
                </div>
            </div>
            <!-- /ko -->

            <!-- ko if: $component.isHostnameWildcarded -->
            <div class="row flex flex-row">
                <div class="col-4">
                    <label for="wildcardSegment" class="text-monospace form-label">
                        Wildcard segment
                    </label>
                </div>
                <div class="col-7">
                    <div class="form-group">
                        <input id="wildcardSegment" type="text" autocomplete="off" class="form-control form-control-sm"
                            placeholder="name" spellcheck="false"
                            data-bind="event: { keyup: $component.updateRequestSummary }, textInput: $component.wildcardSegment">
                    </div>
                </div>
            </div>
            <!-- /ko -->

            <authorization
                params="{ api: $component.api, authorizationServers: $component.authorizationServers, consoleOperation: $component.consoleOperation, updateRequestSummary: $component.updateRequestSummary}">
            </authorization>

            <details open class="details-styled">
                <summary aria-label="Parameters">
                    <h3>
                        Parameters
                        <i class="icon-emb icon-emb-chevron-down"></i>
                    </h3>
                </summary>

                <!-- ko if: (templateParameters && templateParameters().length > 0) || (request.queryParameters && request.queryParameters().length > 0) -->
                <div data-bind="foreach: { data: templateParameters, as: 'parameter' }">
                    <div class="row flex flex-row">
                        <div class="col-4">
                            <label class="text-monospace form-label" data-bind="text: parameter.name">
                            </label>
                        </div>
                        <div class="col-7">
                            <div class="form-group">
                                <!-- ko if: parameter.options.length > 0 -->
                                <div class="input-group has-validation">
                                    <select class="form-control" aria-label="Parameter value"
                                        data-bind="value: parameter.value, options: parameter.options, optionsCaption: parameter.optionsCaption, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
                                    <span class="invalid-feedback"
                                            data-bind="validationMessage: parameter.value"></span>
                                </div>
                                <!-- /ko -->
                                <!-- ko if: parameter.options.length === 0 -->
                                <div class="input-group has-validation">
                                    <input type="text" autocomplete="off" class="form-control form-control-sm"
                                        placeholder="value" spellcheck="false" aria-label="Parameter value"
                                        data-bind="event: { keyup: $component.updateRequestSummary }, textInput: parameter.value">
                                    <span class="invalid-feedback"
                                        data-bind="validationMessage: parameter.value"></span>
                                </div>
                                <!-- /ko -->
                            </div>
                        </div>
                    </div>
                </div>
                <div data-bind="foreach: { data: request.queryParameters, as: 'parameter' }">
                    <div class="row flex flex-row">
                        <div class="col-4">
                            <div class="form-group">
                                <div class="input-group has-validation">
                                    <input type="text" autocomplete="off" class="form-control form-control-sm"
                                        placeholder="name" spellcheck="false" aria-label="Parameter name"
                                        data-bind="textInput: parameter.name, attr:{ 'readonly': parameter.required }">
                                    <span class="invalid-feedback" data-bind="validationMessage: parameter.name"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-7">
                            <div class="form-group">
                                <!-- ko if: parameter.options.length > 0 -->
                                <div class="input-group has-validation">
                                    <select class="form-control" aria-label="Parameter value"
                                        data-bind="value: parameter.value, options: parameter.options, optionsCaption: parameter.optionsCaption, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
                                    <span class="invalid-feedback"
                                        data-bind="validationMessage: parameter.value"></span>
                                </div>
                                <!-- /ko -->
                                <div class="input-group">
                                    <!-- ko if: parameter.options.length === 0 -->
                                    <!-- ko if: !parameter.secret-->
                                    <input type="text" autocomplete="off" class="form-control form-control-sm"
                                        placeholder="value" spellcheck="false" aria-label="Parameter value"
                                        data-bind="textInput: parameter.value, attr:{ 'aria-required': parameter.required }">
                                    <!-- /ko -->
                                    <!-- ko if: parameter.secret-->
                                    <input autocomplete="off" class="form-control form-control-sm" placeholder="value"
                                        spellcheck="false" aria-label="Parameter value"
                                        data-bind=" attr: {type: parameter.inputType, 'aria-required': parameter.required }, textInput: parameter.value">
                                    <button data-bind="click: () => $component.toggleSecretParameter(parameter)"
                                        class="input-group-addon">
                                        <i
                                            data-bind="class: parameter.revealed() ? 'icon-emb icon-emb-eye-fill' :'icon-emb icon-emb-eye'"></i>
                                    </button>
                                    <!-- /ko -->
                                    <span class="invalid-feedback"
                                        data-bind="validationMessage: parameter.value"></span>
                                    <!-- /ko -->
                                </div>
                            </div>
                        </div>
                        <!-- ko ifnot: parameter.required -->
                        <div class="col-1">
                            <a href="#" role="button" data-bind="click: $component.removeQueryParameter"
                                class="btn-centered-vert btn-inline" aria-label="Remove parameter"><i
                                    class="icon-emb icon-emb-trash"></i></a>
                        </div>
                        <!-- /ko -->
                    </div>
                </div>
                <!-- /ko -->

                <a href="#" role="button" data-bind="click: $component.addQueryParameter">
                    <i class="icon-emb icon-emb-plus"></i>
                    Add parameter
                </a>
            </details>

            <details open class="details-styled">
                <summary aria-label="headers">
                    <h3>
                        Headers
                        <i class="icon-emb icon-emb-chevron-down"></i>
                    </h3>
                </summary>

                <!-- ko if: api.type === 'websocket' -->
                <span>Headers are not supported in the test console for WebSocket APIs.</span>
                <!-- /ko -->

                <!-- ko ifnot: api.type === 'websocket' -->
                <!-- ko if: request.headers().length > 0 -->
                <div data-bind="foreach: { data: request.headers, as: 'header' }">
                    <div class="row flex flex-row">
                        <div class="col-4">
                            <div class="form-group">
                                <div class="input-group has-validation">
                                    <input type="text" autocomplete="off" class="form-control form-control-sm"
                                        placeholder="name" spellcheck="false" aria-label="Header name"
                                        data-bind="textInput: header.name, attr:{ 'readonly': header.required }">
                                    <span class="invalid-feedback" data-bind="validationMessage: header.name"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-7">
                            <div class="form-group">
                                <!-- ko if: header.options && header.options.length > 0 -->
                                <select class="form-control" aria-label="Header value"
                                    data-bind="value: header.value, options: header.options, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
                                <!-- /ko -->
                                <!-- ko if: !header.options || header.options.length === 0 -->
                                <div class="input-group has-validation">
                                    <!-- ko if: !header.secret() -->
                                    <input type="text" autocomplete="off" class="form-control form-control-sm"
                                        placeholder="value" spellcheck="false" aria-label="Header value"
                                        data-bind="textInput: header.value, attr:{'aria-required': header.required}">
                                    <!-- /ko -->
                                    <!-- ko if: header.secret() -->
                                    <input autocomplete="off" class="form-control form-control-sm" placeholder="value"
                                        spellcheck="false" aria-label="Header value"
                                        data-bind="attr: {type: header.inputTypeValue, 'aria-required': header.required}, textInput: header.value, event: { keyup: $component.updateRequestSummary }">
                                    <button data-bind="click: () => $component.toggleSecretHeader(header)"
                                        class="input-group-addon">
                                        <i
                                            data-bind="class: header.revealed() ? 'icon-emb icon-emb-eye-fill' :'icon-emb icon-emb-eye'"></i>
                                    </button>
                                    <!-- /ko -->
                                    <span class="invalid-feedback" data-bind="validationMessage: header.value"></span>
                                </div>
                                <!-- /ko -->
                            </div>
                        </div>
                        <!-- ko ifnot: header.required -->
                        <div class="col-1">
                            <a href="#" role="button" data-bind="click: $component.removeHeader"
                                class="btn-centered-vert btn-inline" aria-label="Remove header"><i
                                    class="icon-emb icon-emb-trash"></i></a>
                        </div>
                        <!-- /ko -->
                    </div>
                </div>
                <!-- /ko -->

                <a href="#" role="button" data-bind="click: $component.addHeader">
                    <i class="icon-emb icon-emb-plus"></i> Add header
                </a>
                <!-- /ko -->
            </details>

            <!-- ko if: canHaveBody || hasBody() -->
            <details open class="details-styled">
                <summary aria-label="body">
                    <h3>
                        Body
                        <i class="icon-emb icon-emb-chevron-down"></i>
                    </h3>
                </summary>

                <!-- ko if: !hasBody() -->
                <a href="#" role="button" data-bind="click: $component.addBody">
                    <i class="icon-emb icon-emb-plus"></i> Add body
                </a>
                <!-- /ko -->

                <!-- ko if: hasBody() -->
                <div class="row flex flex-row form-group">
                    <div class="col-5">
                        <label class="form-check-label">Request body format</label>
                    </div>
                    <div class="col-7 flex">
                        <!-- ko if: request.readonlyBodyFormat -->
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="bodyFormat" id="bodyFormatForm"
                                value="form"
                                data-bind="checked: request.bodyFormat, attr: { disabled: request.readonlyBodyFormat}">
                            <label class="form-check-label" for="bodyFormatRaw">Form-data</label>
                        </div>
                        <!-- /ko -->
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="bodyFormat" id="bodyFormatRaw"
                                value="raw"
                                data-bind="checked: request.bodyFormat, attr: { disabled: request.readonlyBodyFormat}">
                            <label class="form-check-label" for="bodyFormatRaw"
                                aria-label="Request body format Raw">Raw</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="bodyFormat" id="bodyFormatBinary"
                                value="binary"
                                data-bind="checked: request.bodyFormat, attr: { disabled: request.readonlyBodyFormat}">
                            <label class="form-check-label" for="bodyFormatBinary"
                                aria-label="Request body format Binary">Binary</label>
                        </div>
                    </div>
                </div>

                <!-- ko if: request.bodyFormat() === 'raw' && request.representations?.length > 0 -->
                <div class="row flex flex-row form-group">
                    <div class="col-5">
                        <label class="form-check-label">Sample request body</label>
                    </div>
                    <div class="col-5">
                        <div class="flex form-check form-check-inline">
                            <select aria-label="Sample request body" id="requestRepresentations" class="form-control"
                                data-bind="value: $component.selectedRepresentation">
                                <!-- ko foreach: { data: request.representations, as: 'representation' } -->
                                <option
                                    data-bind="value: representation, text: !!representation.typeName ? representation.typeName : ('Example ' + ($index() + 1))">
                                </option>
                                <!-- /ko -->
                            </select>
                        </div>
                    </div>
                    <div class="col-2 flex justify-content-end">
                        <!-- ko if: request.isBodyEdited() -->
                        <i class="icon-emb icon-emb-spinner" style="cursor: pointer; display: flex; align-self: center;"
                            data-bind="click: $component.revertBody"></i>
                        <!-- /ko -->
                    </div>
                </div>
                <!-- /ko -->

                <!-- ko ifnot: request.readonlyBodyFormat -->
                <div class="form-group">
                    <!-- ko if: request.bodyFormat() === 'raw' -->
                    <textarea class="form-control form-control-sm" rows="5" aria-label="Request body"
                        data-bind="textInput: request.body"></textarea>
                    <!-- /ko -->
                    <!-- ko if: request.bodyFormat() === 'binary' -->
                    <file-input params="{ onSelect: $component.onFileSelect }" class="form-control"
                        aria-label="Upload file"
                        data-bind="css: { 'is-invalid': !request.binary.isValid() }"></file-input>
                    <span class="invalid-feedback" data-bind="validationMessage: request.binary"></span>
                    <!-- /ko -->
                </div>
                <!-- /ko -->
                <!-- ko if: request.readonlyBodyFormat -->
                <div data-bind="foreach: { data: request.bodyDataItems, as: 'item' }">
                    <div class="input-label">
                        <span class="text-monospace item-label" data-bind="text: item.name"></span><span
                            class="text-monospace" data-bind="text: '(type: ' + item.type() + ')'"></span>
                    </div>
                    <div class="form-group">
                        <!-- ko if: item.bodyFormat() === 'string' -->
                        <div class="input-group">
                            <input type="text" autocomplete="off" class="form-control form-control-sm"
                                spellcheck="false" data-bind="textInput: item.body">
                        </div>
                        <!-- /ko -->
                        <!-- ko if: item.bodyFormat() === 'raw' -->
                        <textarea class="form-control form-control-sm" rows="5" aria-label="Request body"
                            data-bind="textInput: item.body"></textarea>
                        <!-- /ko -->
                        <!-- ko if: item.bodyFormat() === 'binary' -->
                        <file-input params="{ containerItem: item, onSelect: $component.onFileSelect }"
                            class="form-control" aria-label="Request body"
                            data-bind="css: { 'is-invalid': !item.binary.isValid() }">
                        </file-input>
                        <span class="invalid-feedback" data-bind="validationMessage: item.binary"></span>
                        <!-- /ko -->
                    </div>
                </div>
                <!-- /ko -->
                <div class="col-1">
                    <a href="#" role="button" data-bind="click: $component.removeBody"
                        class="btn-centered-vert btn-inline" aria-label="Remove body"><i
                            class="icon-emb icon-emb-trash"></i></a>
                </div>
                <!-- /ko -->
            </details>
            <!-- /ko -->
        </div>

        <!-- ko ifnot: api().type === 'websocket' -->
        <div class="panel panel-dark panel-highlight flex-item flex-grow">
            <details open class="details-styled">
                <summary aria-label="HTTP request">
                    <h3>
                        HTTP request
                        <i class="icon-emb icon-emb-chevron-down"></i>
                    </h3>
                </summary>

                <!-- ko ifnot: operation().request.isFormData() -->
                <div class="form-group">
                    <select aria-label="Programming language" id="requestLanguages" class="form-control"
                        data-bind="value: $component.selectedLanguage">
                        <!-- ko foreach: { data: requestLanguages, as: 'requestLanguage' } -->
                        <option data-bind="value: requestLanguage.value, text: requestLanguage.text"></option>
                        <!-- /ko -->
                    </select>
                </div>

                <div class="code-snippet">
                    <div class="code-snippet-heading">
                        <button class="code-snippet-command" data-bind="click: toggleRequestSummarySecrets"
                            aria-label="Toggle secrets">
                            <!-- ko if: $component.secretsRevealed  -->
                            <i class="icon-emb icon-emb-eye-fill"></i> Hide secrets
                            <!-- /ko -->
                            <!-- ko ifnot: $component.secretsRevealed  -->
                            <i class="icon-emb icon-emb-eye"></i> Reveal secrets
                            <!-- /ko -->
                        </button>
                        <button class="code-snippet-command"
                            data-bind="copyToClipboard: $component.getPlainTextCodeSample, click: logCopyEvent"
                            aria-label="Copy to clipboard">
                            <i class="icon-emb icon-emb-duplicate"></i> Copy
                        </button>
                    </div>
                </div>
                <!-- ko if: $component.codeSample -->
                <pre
                    data-bind="syntaxHighlight: { code: $component.codeSample, language: $component.selectedLanguage }"></pre>
                <!-- /ko -->
                <!-- /ko -->
            </details>
        </div>
        <!-- /ko -->

        <!-- ko if: api().type === 'websocket' -->
        <div class="panel panel-dark panel-highlight flex-item flex-grow">
            <details open class="details-styled">
                <summary aria-label="WebSocket request">
                    <h3>
                        WebSocket request
                        <i class="icon-emb icon-emb-chevron-down"></i>
                    </h3>
                </summary>

                <select aria-label="Programming language" id="requestLanguages" class="form-control"
                    data-bind="value: $component.selectedLanguage">
                    <!-- ko foreach: { data: requestLanguages, as: 'requestLanguage' } -->
                    <option data-bind="value: requestLanguage.value, text: requestLanguage.text"></option>
                    <!-- /ko -->
                </select>

                <div class="code-snippet">
                    <div class="code-snippet-heading">
                        <button class="code-snippet-command" data-bind="click: toggleRequestSummarySecrets"
                            aria-label="Toggle secrets">
                            <!-- ko if: $component.secretsRevealed  -->
                            <i class="icon-emb icon-emb-eye-fill"></i> Hide
                            <!-- /ko -->
                            <!-- ko ifnot: $component.secretsRevealed  -->
                            <i class="icon-emb icon-emb-eye"></i> Show
                            <!-- /ko -->
                        </button>
                        <button class="code-snippet-command"
                            data-bind="copyToClipboard: $component.getPlainTextCodeSample"
                            aria-label="Copy to clipboard">
                            <i class="icon-emb icon-emb-duplicate"></i> Copy
                        </button>
                    </div>
                </div>

                <!-- ko if: $component.codeSample -->
                <pre
                    data-bind="syntaxHighlight: { code: $component.codeSample, language: $component.selectedLanguage }"></pre>
                <!-- /ko -->
                <!-- ko if: wsConnected -->
                <h3>Payload</h3>
                <div class="flex justify-content-end">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="wsDataFormat" id="wsDataFormatRaw"
                            value="raw" data-bind="checked: wsDataFormat">
                        <label class="form-check-label" for="wsDataFormatRaw">Raw</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="wsDataFormat" id="wsDataFormatBinary"
                            value="binary" data-bind="checked: wsDataFormat">
                        <label class="form-check-label" for="wsDataFormatBinary">Binary</label>
                    </div>
                </div>
                <div class="form-group">
                    <!-- ko if: wsDataFormat() === 'raw' -->
                    <textarea class="form-control form-control-sm" rows="5" aria-label="Payload"
                        data-bind="event: { keyup: $component.updateRequestSummary }, textInput: wsPayload, valueUpdate: 'keyup'"></textarea>
                    <!-- /ko -->
                    <!-- ko if: wsDataFormat() === 'binary' -->
                    <file-input params="{ onSelect: $component.onFileSelect }" class="form-control" aria-label="Payload"
                        data-bind="css: { 'is-invalid': !consoleOperation().request.binary.isValid() }"></file-input>
                    <span class="invalid-feedback"
                        data-bind="validationMessage: consoleOperation().request.binary"></span>
                    <!-- /ko -->
                </div>

                <div class="flex flex-column align-items-end">
                    <div class="btn-group" role="group">
                        <button type="button" class="button button-primary btn-sm"
                            data-bind="click: wsSendData, attr: { disabled: wsSending }, text: wsSendStatus">
                            Send
                        </button>
                    </div>
                </div>
                <!-- /ko -->

                <h3>Output</h3>
                <!-- ko if: wsLogItems().length > 0 -->
                <div class="code-snippet">
                    <div class="code-snippet-heading">
                        <button class="code-snippet-command"
                            data-bind="click: $component.clearLogs, disabled: wsSending" aria-label="Clear logs">
                            <i class="icon-emb icon-emb-trash"></i> Clear
                        </button>
                    </div>
                </div>

                <div class="table-preset table-preset-ws-logs ws-logs-items" data-bind="scrollintoview: {}">
                    <div class="d-contents" role="rowgroup">
                        <div class="d-contents" role="row">
                            <div role="columnheader" class="table-preset-head">Name</div>
                            <div role="columnheader" class="table-preset-head"></div>
                            <div role="columnheader" class="table-preset-head">Data</div>
                        </div>
                    </div>
                    <div class="d-contents table-preset-v-scroll" role="rowgroup">
                        <!-- ko foreach: { data: wsLogItems, as: 'item' } -->
                        <div class="d-contents" role="row">
                            <div role="cell" data-bind="text: item.logTime">
                            </div>
                            <div role="cell">
                                <i data-bind="attr: { 'ws-log-type': item.logType }"></i>
                            </div>
                            <div role="cell" class="text-truncate" data-bind="text: item.logData">
                            </div>
                        </div>
                        <!-- /ko -->
                    </div>
                </div>
                <!-- /ko -->

                <!-- ko if: wsLogItems().length === 0 -->
                <p>Sent and received messages will appear here. Send a payload to begin.</p>
                <!-- /ko -->
            </details>
        </div>
        <!-- /ko -->

        <!-- ko if: sendingRequest -->
        <div class="panel panel-dark" data-bind="scrollintoview: {}">
            <spinner class="fit"></spinner>
        </div>
        <!-- /ko -->

        <!-- ko if: requestError -->
        <div class="alert alert-danger" data-bind="scrollintoview: {}">
            <p>Unable to complete the request</p>
            <p data-bind="html: requestError"></p>
        </div>
        <!-- /ko -->

        <!-- ko if: responseStatusCode -->
        <div class="panel panel-dark" data-bind="scrollintoview: {}">

            <h3>HTTP response</h3>
            <pre><span>HTTP/1.1</span> <span data-bind="attr: { 'data-code': responseStatusCode  }"><span data-bind="text: responseStatusCode, attr: { 'data-code':responseStatusCode  }"></span> <span data-bind="text: responseStatusText"></span></span>

<span data-bind="text: responseHeadersString"></span>

<span data-bind="text: responseBody"></span></pre>
        </div>
        <!--/ko-->
    </div>

    <div class="flex-item panel">
        <!-- ko ifnot: working -->
        <div class="flex flex-column align-items-end">
            <div class="btn-group" role="group">
                <!-- ko if: !$component.sendingRequest() && $component.selectedLanguage() === 'http' -->
                <button type="button" class="button button-primary btn-sm" data-bind="click: validateAndSendRequest">
                    Send
                </button>
                <!-- /ko -->
                <!-- ko if: sendingRequest -->
                <button type="button" class="button button-primary btn-sm" disabled>
                    Sending...
                </button>
                <!-- /ko -->
            </div>
        </div>
        <!-- ko if: api().type === 'websocket' -->
        <div class="flex flex-column align-items-end">
            <div class="btn-group" role="group">
                <!-- ko ifnot: wsConnected -->
                <button type="button" class="button button-primary btn-sm"
                    data-bind="click: wsConnect, attr: { disabled: wsConnecting }, text: wsStatus">
                    Connect
                </button>
                <!-- /ko -->
                <!-- ko if: wsConnected -->
                <button type="button" class="button button-primary btn-sm"
                    data-bind="click: wsDisconnect, attr: { disabled: wsSending }">
                    Disconnect
                </button>
                <!-- /ko -->
            </div>
        </div>
        <!-- /ko -->
        <!-- /ko -->
    </div>
</div>
<!--/ko-->