<table class="contentTable">
    <tr>
        <td class="key">[{isys type='f_label' name='C__SYSTEM_SETTINGS__APIKEY' ident='API-Key'}]</td>
        <td class="value">
            [{isys type='f_text' name='C__SYSTEM_SETTINGS__APIKEY'}]

            [{if isys_glob_is_edit_mode()}]
                <button type="button" id="btn_new_key" class="btn ml5">
                    <img src="[{$dir_images}]axialis/basic/symbol-update.svg" alt="" /><span>[{isys type="lang" ident="LC__SYSTEM_SETTINGS__API__CREATE_NEW_KEY"}]</span>
                </button>
            [{/if}]
        </td>
    </tr>
    <tr>
        <td class="key"></td>
        <td class="value pl20">
            <div class="mb10">[{isys type="checkbox" name="C__SYSTEM_SETTINGS__API_STATUS" p_bInfoIconSpacer=false}]</div>
            <div class="mb10">[{isys type="checkbox" name="C__SYSTEM_SETTINGS__API__AUTHENTICATED_USERS_ONLY" p_bInfoIconSpacer=false}]</div>
            <div>[{isys type="checkbox" name="C__SYSTEM_SETTINGS__API__STRIP_TAGS" p_bInfoIconSpacer=false}]</div>
        </td>
    </tr>
    <tr>
        <td class="key">[{isys type='f_label' name='C__SYSTEM_SETTINGS__LOG_LEVEL' ident='Log level'}]</td>
        <td class="value">[{isys type='f_dialog' name='C__SYSTEM_SETTINGS__LOG_LEVEL' p_bSort=false}]</td>
    </tr>
</table>

<script type="text/javascript">
    (function () {
        'use strict';

        const $apiKeyInput  = $('C__SYSTEM_SETTINGS__APIKEY');
        const $apiKeyButton = $('btn_new_key');

        if ($apiKeyInput && $apiKeyButton) {
            $apiKeyButton.on('click', function () {
                new Ajax.Request('?call=password&ajax=1&strength=strong', {
                    onComplete: function (xhr) {
                        const json = xhr.responseJSON;

                        if (json.success && json.data) {
                            $apiKeyInput.setValue(json.data);
                        } else {
                            idoit.Notify.error(json.message || 'Got no password - please try again');
                        }
                    }
                });
            });
        }
    })();
</script>
