[%- USE HTML %]
[%- USE L %]
[%- USE LxERP %]
[%- USE T8 %]

<div style='overflow:hidden'>

[% LxERP.t8("Filter") %]: [% L.input_tag('chart_picker_filter', SELF.filter.all_substr_multi__ilike, class='chart_picker_filter',  style="width: 400px") %]
[% L.hidden_tag('chart_picker_real_id', FORM.real_id) %] <a href="javascript:void(0);" onclick="$('#chart_picker_filter').val('').focus();cp.update_results();">x</a>

<div style="padding: 5px 0em 5px 0em">
  <span>
    [% L.checkbox_tag('booked', checked=FORM.booked, for_submit=1, label=LxERP.t8('Only booked accounts')) %]
  </span>
  <span class='float-right'>
    [% L.checkbox_tag('hide_chart_details', checked=1, id='hide_chart_details', for_submit=1, label=LxERP.t8('Hide chart details')) %]
  </span>
</div>

<div id="category">
  [% LxERP.t8("Account Type") %]:

  [% IF FORM.filter.category %]
    [% FOREACH var IN FORM.filter.category %]
      [% IF var == 'A' %][% L.checkbox_tag('SELF.filter.selected_category_A', checked=1, value ='A', label=LxERP.t8('Assets')) %]   [% END %]
      [% IF var == 'L' %][% L.checkbox_tag('SELF.filter.selected_category_L', checked=1, value ='L', label=LxERP.t8('Liability')) %][% END %]
      [% IF var == 'Q' %][% L.checkbox_tag('SELF.filter.selected_category_Q', checked=1, value ='Q', label=LxERP.t8('Equity')) %]   [% END %]
      [% IF var == 'I' %][% L.checkbox_tag('SELF.filter.selected_category_I', checked=1, value ='I', label=LxERP.t8('Revenue')) %]  [% END %]
      [% IF var == 'E' %][% L.checkbox_tag('SELF.filter.selected_category_E', checked=1, value ='E', label=LxERP.t8('Expense')) %]  [% END %]
    [% END %]
  [% ELSE %]
    [% L.checkbox_tag('SELF.filter.selected_category_A', checked=0, value ='A', label=LxERP.t8('Assets')) %]
    [% L.checkbox_tag('SELF.filter.selected_category_L', checked=0, value ='L', label=LxERP.t8('Liability')) %]
    [% L.checkbox_tag('SELF.filter.selected_category_Q', checked=0, value ='Q', label=LxERP.t8('Equity')) %]
    [% L.checkbox_tag('SELF.filter.selected_category_I', checked=0, value ='I', label=LxERP.t8('Revenue')) %]
    [% L.checkbox_tag('SELF.filter.selected_category_E', checked=0, value ='E', label=LxERP.t8('Expense')) %]
  [% END %]
</div>

<div style='clear:both'></div>
<div id='chart_picker_result'></div>
</div>

<script type='text/javascript'>
  var cp = kivi.ChartPicker($('#[% FORM.real_id %]'));
  $(function(){
    $('#chart_picker_filter').focus();
    // empty input field upon opening if we just want to pick a field
    [% IF FORM.choose %] $('#chart_picker_filter').val(''); [% END %]

    cp.update_results();  // function from js/autocomplete_chart_js
  });
  $('#chart_picker_filter').keyup(cp.result_timer);
  // use keyup instead of keypress to get backspace to work
  // this messes up numblock though!
  $("input[type='checkbox']").change(cp.update_results);
</script>