function get_option_template(values) {
  return `
    <li class="d-flex-between px-10 bb-solid table-options">

        <div class="d-flex-start align-items-center">
            <input id="cb-select-all-1" class="m-0 check-elements id" type="checkbox" data-id="${
              values.id
            }" data-check="false" onchange="checkSelected(this)">
            <p class="m-0 ml-10 id">${values.id}</p>
        </div>

        <div class="m-0 text-align-left">
            <p class="name break-word">${values.name}</p>
        </div>

        <p class="text-align-left tooltip extract">
            ${ render_option_value(values.value, values.extract) }
        </p>

        <p class="text-align-center size">
            ${values.format_size}
        </p>

        <p class="text-align-center autoload">
            ${values.autoload}
        </p>

        <div class="text-align-center">
          <p class="status text-lowercase m-auto" data-status="${values.multiple === true ? "multiple" : values.origin.status}">
          ${values.multiple === true ? wpdbt_admin_vars.data.translations.multiple : wpdbt_admin_vars.data.translations[values.origin.status]}
          </p>
        </div>

        <div class="text-align-center">
        ${ render_origin_name(values) }
        </div>

        <div class="d-flex-center align-items-center">
            <var class="key d-none"></var>
            <button onclick="showModal(this)" data-label="${wpdbt_admin_vars.data.translations.remove}" data-individual="yes" data-modal="delete" class="tooltip cursor-pointer b-none bg-none p-0">
                <span class="tooltiptext small">${wpdbt_admin_vars.data.translations.remove}</span>
                <img width="15px" src="${wpdbt_admin_vars.data.admin_url}img/icon-delete.svg">
            </button>
            <button onclick="showModal(this)" data-label="${wpdbt_admin_vars.data.translations.edit}" data-individual="yes" data-modal="edit" class="tooltip cursor-pointer b-none bg-none p-0">
                <span class="tooltiptext small">${wpdbt_admin_vars.data.translations.edit}</span>
                <img width="15px" src="${wpdbt_admin_vars.data.admin_url}img/icon-edit.svg">
            </button>
        </div>
    </li>
    `;
}

function get_transient_template(values) {
  return `
    <li class="d-flex-between px-10 bb-solid table-options">

        <div class="d-flex-start align-items-center">
            <input id="cb-select-all-1" class="m-0 check-elements id" type="checkbox" data-id="${
              values.id
            }" data-check="false" onchange="checkSelected(this)">
            <p class="m-0 ml-10 id">${values.id}</p>
        </div>

        <div class="m-0 text-align-left">
            <p class="name break-word">${values.name}</p>
        </div>

        <p class="text-align-left tooltip extract">
            ${ render_option_value(values.value, values.extract) }
        </p>

        <p class="text-align-center size">
            ${values.format_size}
        </p>

        <p class="text-align-center autoload">
            ${values.autoload}
        </p>

        <div class="text-align-center">
          <p class="status text-lowercase m-auto" data-status="${values.multiple === true ? "multiple" : values.origin.status}">
          ${values.multiple === true ? wpdbt_admin_vars.data.translations.multiple : wpdbt_admin_vars.data.translations[values.origin.status]}
          </p>
        </div>

        <div class="text-align-center">
        ${ render_origin_name(values) }
        </div>

        <div class="d-flex-center align-items-center">
            <var class="key d-none"></var>
            <button onclick="showModal(this)" data-label="${wpdbt_admin_vars.data.translations.remove}" data-individual="yes" data-modal="delete" class="tooltip cursor-pointer b-none bg-none p-0">
                <span class="tooltiptext small">${wpdbt_admin_vars.data.translations.remove}</span>
                <img width="15px" src="${wpdbt_admin_vars.data.admin_url}img/icon-delete.svg">
            </button>
            <button onclick="showModal(this)" data-label="${wpdbt_admin_vars.data.translations.edit}" data-individual="yes" data-modal="edit" class="tooltip cursor-pointer b-none bg-none p-0">
                <span class="tooltiptext small">${wpdbt_admin_vars.data.translations.edit}</span>
                <img width="15px" src="${wpdbt_admin_vars.data.admin_url}img/icon-edit.svg">
            </button>
        </div>
    </li>
    `;
}

function get_table_template(values) {
  return `<li class="d-flex-between px-10 bb-solid">

    <div class="w-30p d-flex-start align-items-center">
        <input id="cb-select-all-1" class="m-0 check-elements id" type="checkbox" data-id="${
          values.id
        }" data-check="false" onchange="checkSelected(this)">
        <p class="m-0 ml-10 break-word name">${display_table_name(values)}</p>
    </div>

    <p class="w-10p text-align-center row">${values.row}</p>

    <p class="w-10p text-align-center size">${values.format_size}</p>

    <div class="w-15p text-align-center">
      <p class="status text-lowercase" data-status="${values.multiple === true ? "multiple" : values.origin.status}">
      ${values.multiple === true ? wpdbt_admin_vars.data.translations.multiple : wpdbt_admin_vars.data.translations[values.origin.status]}
      </p>
    </div>

    <div class="w-25p text-align-center">
    ${ render_origin_name(values) }

    </div>

    <div class="d-flex-center align-items-center w-10p">

        <var class="key d-none" data-id="${values.id}"></var>

        <button onclick="showModal(this)" data-label="${wpdbt_admin_vars.data.translations.remove}" data-individual="yes" data-modal="delete" class="tooltip cursor-pointer b-none bg-none p-0">
            <span class="tooltiptext small">${wpdbt_admin_vars.data.translations.remove}</span>
            <img src="${wpdbt_admin_vars.data.admin_url}img/icon-delete.svg" class="icon-delete" width="15px" src="">
        </button>
        <button onclick="showModal(this)" data-label="${wpdbt_admin_vars.data.translations.empty}" data-individual="yes" data-modal="empty" class="tooltip cursor-pointer b-none bg-none p-0">
            <span class="tooltiptext small">${wpdbt_admin_vars.data.translations.empty}</span>
            <img src="${wpdbt_admin_vars.data.admin_url}img/icon-empty.svg" class="icon-empty" width="15px" src="">
        </button>
        <button onclick="showModal(this)" data-label="${wpdbt_admin_vars.data.translations.optimize}" data-individual="yes" data-modal="optimize" class="tooltip cursor-pointer b-none bg-none p-0">
            <span class="tooltiptext small">${wpdbt_admin_vars.data.translations.optimize}</span>
            <img src="${wpdbt_admin_vars.data.admin_url}img/icon-optimize.svg" class="icon-optimize" width="15px" src="">
        </button>
        <button onclick="showModal(this)" data-label="${wpdbt_admin_vars.data.translations.repair}<" data-individual="yes" data-modal="repair" class="tooltip cursor-pointer b-none bg-none p-0">
            <span class="tooltiptext small">${wpdbt_admin_vars.data.translations.repair}</span>
            <img src="${wpdbt_admin_vars.data.admin_url}img/icon-repair.svg" class="icon-repair" width="15px" src="">
        </button>

    </div>
</li>`;
}

function get_cronjob_template(values) {
  return `<li class="d-flex-between px-20 bb-solid table-cronjobs">

    <div class="d-flex-start align-items-center">
        <input id="cb-select-all-1" class="m-0 check-elements" type="checkbox" data-id="${values.id}" data-check="false" onchange="checkSelected(this)">
        <p class="m-0 ml-10 mr-10 break-word name">${values.name}</p>
    </div>

    <p class="text-align-left break-word args">
    ${ render_args(values.args_array) }
    </p>

    <p class="text-align-left break-word display">${values.display}</p>
    
    <p class="text-align-left break-word next-run">${values.next_run}</p>

    <div class="text-align-center">
      <p class="status text-lowercase m-auto" data-status="${values.multiple === true ? "multiple" : values.origin.status}">
      ${values.multiple === true ? wpdbt_admin_vars.data.translations.multiple : wpdbt_admin_vars.data.translations[values.origin.status]}
      </p>
    </div>
    <div class="text-align-center">
    ${ render_origin_name(values) }

    </div>

    <div class="d-flex-center align-items-center">

        <var class="id d-none" data-id="${values.id}"></var>
        <var class="is-days d-none" data-isdays=""></var>

        <button onclick="showModal(this)" data-label="${wpdbt_admin_vars.data.translations.remove}" data-individual="yes" data-modal="delete" class="tooltip cursor-pointer b-none bg-none p-0">
            <span class="tooltiptext small">${wpdbt_admin_vars.data.translations.remove}</span>
            <img width="15px" src="${wpdbt_admin_vars.data.admin_url}img/icon-delete.svg">
        </button>
    </div>
</li>`;
}

function render_option_value(value, extract){

     // Prepare extract
     if (value.length > 16) {
        let span_element = '<span class="tooltiptext value">' + value + '</span>';
        let image = '<img width="15px" src="' + wpdbt_admin_vars.data.admin_url + 'img/icon-information.svg">';
        return image + extract + span_element;
      } else {
        return value;
      }

}

function render_args(args) {

  if (args.length > 0) {
    let content = '';

    args.forEach(function (arg) {
      if(arg != null){
        content += "<span class='args'>" + arg + "</span>";
      }
    });

    return content;

  }

  return "Ninguno";
}

function render_origin_name(values){

    let display_name = '';

    if( values.origin.warning == 'no' ||  values.origin.name == 'Uncategorized'){
        display_name = values.origin.name;
    }else{
        display_name = 
        "<img class='mr-5' width='13px' src='" + wpdbt_admin_vars.data.admin_url  + "img/warning.svg'>" +
        values.origin.name;
    }

    if( values.multiple === true ){
        display_name = wpdbt_admin_vars.data.translations.multiple
    }
   
    if( values.origin.name == 'Uncategorized'){
        display_name = wpdbt_admin_vars.data.translations.uncategorized
    }

    return `<button 
    onclick="${license === true ? 'showModal(this)' : ''}"
    class="break-word cursor-pointer b-none bg-none button ${license === true ? '' : 'disabled'}" 
    id="${values.id}"
    href="#"
    data-warning="${values.origin.warning}" 
    data-type="${values.origin.type}"
    data-label="${wpdbt_admin_vars.data.translations.details}" data-individual="details" data-modal="details"
    >
    <div class="d-block">
        ${display_name}
    </div>
   
    </button>`

}

function display_table_name(values){
  return (values.prefix == true) ? `<span class="opacity-05">${wpdbt_admin_vars.data.prefix}</span>${values.name_without_prefix}` : `${values.name_without_prefix}`;
}