<div id="tfa-user-table">
    [{if $userList}]
    [{$userList}]
    [{else}]
    <div class="box-blue p10 mt10 mb10 ml10 mr10">
        <img src="[{$dir_images}]axialis/basic/button-info.svg" class="vam mr5" />
        <span class="vam">[{isys type="lang" ident="LC__USER_SETTINGS__TFA__MANAGEMENT_NO_USERS"}]</span>
    </div>
    [{/if}]
</div>

<style>
    #tfa-user-table td[data-property="action"] {
        padding: 3px 0 0 8px;
    }

    #tfa-user-table td[data-property="action"] .overflowable {
        padding: 2px;
    }
</style>

<script type="text/javascript">
    function tfaDeactivate($button, userId) {
        $button
            .down('img')
            .addClassName('animation-rotate')
            .writeAttribute('src', window.dir_images + 'axialis/user-interface/loading.svg');

        new Ajax.Request(idoit.Router.getRoute('tfa.deactivation-modal-for-user'), {
            method:     'get',
            parameters: {
                userId: userId
            },
            onComplete: function (xhr) {
                $button
                    .down('img')
                    .removeClassName('animation-rotate')
                    .writeAttribute('src', window.dir_images + 'axialis/basic/gear.svg');

                Modal.open(xhr.responseText, { maxWidth: 400, maxHeight: 250 });
            }
        });
    }
</script>
