<td colspan="2" align="center">
    <h2>{$params_tpl['title']}{$params_tpl['help']}</h2>
    <div id="cur_field1_{$tpl_num|default:0}" style="display: flex; flex-direction: column;">{$tpl_types['cur_field1']}</div>
    <div id="listerine_{$tpl_num|default:0}" style="display: flex; flex-direction: column;">{$tpl_types['listerine']}</div>
    <div id="number_value_{$tpl_num|default:0}" class="number_value" style="flex-direction: column;">{$tpl_types['number_value']}</div>
    <div id="cur_field2_{$tpl_num|default:0}" style="display: none; flex-direction: column;">{$tpl_types['cur_field2']}</div>
    <div id="operand_{$tpl_num|default:0}" style="display: flex; flex-direction: column;">{$tpl_types['operand']}</div>
    <div id="case_measure_{$tpl_num|default:0}" class="case-measure" style="display: flex; flex-direction: column;">{$tpl_types['case_measure']}</div>
    <div id="cur_field_{$tpl_num|default:0}" style="display: flex; flex-direction: column;">{$tpl_types['cur_field']}</div>
    <div id="day_off_{$tpl_num|default:0}" style="display: flex; flex-direction: column;">{$tpl_types['day_off']}</div>
    <div id="holiday_{$tpl_num|default:0}" style="display: flex; flex-direction: column;">{$tpl_types['holiday']}</div>
    <div id="gen_field_container_{$tpl_num|default:0}" style="display: none; flex-direction: column;">{$tpl_types['gen_field']}</div>
    <div id="filter_{$tpl_num|default:0}" style="display: none; flex-direction: column;">{$tpl_types['filter']}</div>
</td>

{assign var="tpl_num" value=$tpl_num|default:0}
{if isset($construct_params.params[$tpl_num].listerine)}
  {assign var="listerine_value" value=$construct_params.params[$tpl_num].listerine}
{else}
  {assign var="listerine_value" value=''}
{/if}
<script>
const tplNum = '{$tpl_num}';
function addClear(e) {
  const changeListerine = (e?.target?.value) ?? '{$listerine_value}';
  
  {literal}
    const showElements = [];
    const hideElements = [];

    if (changeListerine == 1) {
      showElements.push('number_value', 'cur_field1', 'operand', 'case_measure', 'day_off', 'holiday', 'gen_field_container', 'filter');
      hideElements.push('cur_field2');
    } else if (changeListerine == 2) {
      showElements.push('cur_field1', 'cur_field2', 'operand', 'case_measure', 'day_off', 'holiday', 'gen_field_container', 'filter');
      hideElements.push('number_value');
    } else if (changeListerine == 3) {
      hideElements.push('number_value', 'cur_field1', 'cur_field2', 'operand', 'case_measure', 'day_off', 'holiday', 'gen_field_container', 'filter');
    } else if (e.target.value !== "on" && e.target.value !== "off") {
      showElements.push('number_value', 'cur_field1', 'operand', 'case_measure', 'day_off', 'holiday', 'gen_field_container', 'filter');
      hideElements.push('cur_field2');
    }

    showElements.forEach(id => $(`#${id}_${tplNum}`).show());
    hideElements.forEach(id => $(`#${id}_${tplNum}`).hide());

    const holidayChecked = changeListerine != 3 && $(`#holiday_${tplNum} input[type=checkbox]`).is(':checked');
    $(`#gen_field_container_${tplNum}`).toggle(holidayChecked);
    $(`#filter_${tplNum}`).toggle(holidayChecked);
  }

  $(`#listerine_${tplNum}`).on('change', addClear);
  $(`#holiday_${tplNum} input[type=checkbox]`).on('change', addClear);
  addClear();
  {/literal}
</script>