"use strict";

import {pageTitle, base_url, toastSwal} from '../common/config'
import {lang, defaultLang} from '../common/language'
import {sidebar} from '../index/sidebar'

$(document).ready( _ => {
  pageTitle(lang().welcome.welcome)
  $('#navbarLogout').text( lang().navbar.logout )
  $('#navbarContact').text( lang().navbar.contact )

  $('#usersPageTitle').text( lang().users.users )
  $('#usersBreadCrumb').text( lang().users.users )
  $('#usersNewUser').text( lang().users.newUser )



  $('#userTable').append(
    `<tfoot>
      <tr>
        <th>${lang().users.thId}</th>
        <th>${lang().users.thFirstName}</th>
        <th>${lang().users.thlastName}</th>
        <th>${lang().users.thUserName}</th>
        <th>${lang().users.thRoll}</th>               
        <th>${lang().users.thStatus}</th>
        <th>${lang().users.thPosition}</th>
        <th>${lang().users.thEmployeesEmail}</th>
        <th>${lang().users.thCreatedAt}</th>
        <th>${lang().users.thUpdatedAt}</th>
        <th>${lang().users.thActions}</th> 
      </tr>
    </tfoot>`
  );

  sidebar()
});

const editUser = id => {
  alert( id )
  
  return false;
}


$('#userTable').DataTable({
  serverSide: false,
  ajax: {    
    async: true,
    url: 'ajaxGetAll.php',
    type: 'POST',
  },
  columns: [
    {data: "userId", title: lang().users.thId},
    {data: "firstName", title: lang().users.thFirstName},
    {data: "lastName", title: lang().users.thlastName},
    {data: "userName", title: lang().users.thUserName},
    {data: "rollName", title: lang().users.thRoll},
    {data: "status", title: lang().users.thStatus},
    {data: "position", title: lang().users.thPosition, defaultContent: lang().users.notAvailable},
    {data: "employeesEmail", title: lang().users.thEmployeesEmail},
    {data: "userCreatedAt", title: lang().users.thCreatedAt},
    {data: "userUpdatedAt", title: lang().users.thUpdatedAt},
    {defaultContent: '', title:lang().users.thActions, render: (data, type, row, meta) =>     
      {    
        let editButton = `<button onclick="return editUser(${row.userId});" class="btn btn-outline-primary" title="${lang().users.edit} ${row.firstName} ${row.lastName}"><i class="fa fa-edit"></i></button>`
        let deleteButton = `<a type="button" onclick="return deleteUser(${row.userId})" class="btn btn-outline-danger" title="${lang().users.delete} ${row.firstName} ${row.lastName}"><i class="fa fa-trash"></i></a>`
        
        return editButton + deleteButton;
      },
    }, 
  ],
  columnDefs: [     
    { targets: 5,
      data: null,
      defaultContent: '',
      orderable: true,
      className: 'select-checkbox'
    }
  ],
  order: [[ 0, 'desc' ]],
  language: {
    url: base_url('common/inc/dataTables_es_es.json'),
  }  
});

Error messages shown:
Uncaught ReferenceError: editUser is not defined
onclick http://localhost/helpdesk/users/:1

Description of problem:
function called from render doesn't call to it's function