[% USE L %]
[% USE P %]
[% SET style="width: 400px" %]

<h1>Chart Picker Testpage</h1>

<div>

<p>
All charts: [% P.chart.picker('chart_id', '', style=style) %]text after icon<br>
Only booked charts: [% P.chart.picker('chart_id_booked', '', booked=1, style=style) %]<br>
All charts choose: [% P.chart.picker('chart_id_choose', '', choose=1, style=style) %]<br>
</p>

<p>
Filter by link:<br>
AR_paid: [% P.chart.picker('chart_id_ar_paid', undef, type='AR_paid', category='I,A' style=style) %]<br>
AR: [% P.chart.picker('chart_id_ar', undef, type='AR', style=style) %]<br>
AP: [% P.chart.picker('chart_id_ap', undef, type='AP', style=style) %]<br>
AR or AP: [% P.chart.picker('chart_id_arap', undef, type='AR,AP', style=style) %]<br>
IC_income,IC_sale: [% P.chart.picker('chart_id_icis', undef, type='IC_income,IC_sale', style=style) %]<br>
IC_expense,IC_cogs: [% P.chart.picker('chart_id_icco', undef, type='IC_expense,IC_cogs', style=style) %]<br>
IC: [% P.chart.picker('chart_id_ic', undef, type='IC', style=style) %]<br>
</p>

<p>
Filter by category:<br>
I: [% P.chart.picker('chart_id_i', undef, category='I', style=style) %]<br>
IE: [% P.chart.picker('chart_id_ie', undef, category='I,E', style=style) %]<br>
AQL: [% P.chart.picker('chart_id_aql', undef, category='A,Q,L', style=style) %]<br>
</p>

<p>
Filter by special type:<br>
GuV: [% P.chart.picker('chart_id_guv', undef, type='guv', style=style) %]<br>
</p>

<p>bank (fat): [% P.chart.picker('bank_id', '', type='bank', fat_set_item=1, choose=1, style=style) %]
</p>
<p id="banktext"></p>


<p>
[% FOREACH i IN [ 1 2 3 4 5 6 ] %]
S [% i %]: [% P.chart.picker('credit_' _ i) %] - &nbsp;&nbsp;  H [% i %]: [% P.chart.picker('debit' _ i) %] <br>
[% END %]
</p>

<p>
Pre-filled chart object: [% P.chart.picker('pre_filled_chart_object', pre_filled_chart, style=style) %]<br>
Pre-filled chart ID: [% P.chart.picker('pre_filled_chart_id', pre_filled_chart.id, style=style) %]<br>
</p>

</div>

<script type='text/javascript'>
  $(function(){
      // do something when a chartpicker with fat_set_item and a certain id changes
      $('#bank_id').on('set_item:ChartPicker', function (e, item) {
        console.log(item)
        $('#banktext').html('Selected fat item with category ' + item.category);
      })
  });

</script>