[%- USE T8 %]
[%- USE HTML %]
 <h1>[% title %]</h1>

 <table width="100%">

  <colgroup>
   <col width="10%">
   <col width="10%">
   <col width="10%">
   <col width="50%">
   <col width="10%">
   <col width="10%">
  </colgroup>

  <tr class="listheading">
   <th>[% 'Account' | $T8 %]</td>
   <th colspan="3">[% 'Description (Click on Description for details)' | $T8 %]</td>
   <th>[% 'Debit' | $T8 %]</td>
   <th>[% 'Credit' | $T8 %]</td>
  </tr>

[%- FOREACH row = CA %]
 [%- IF row.heading %]
  <tr class="listheading">
   <td><a href="[% row.link_edit_account %]">[% row.accno | html %]</a></td>
   <td colspan="5">[% row.description | html %]</td>
  </tr>
 [% ELSE %]
  <tr class="listrow[% loop.count % 2 %]">
   <td><b><a href="[% row.link_edit_account %]">[% row.accno | html %]</a></b></td>
   <td colspan="3" onclick="account_details([% row.id %])">[% row.description | html %]</td>
   <td class='numeric'>[% row.debit | html %]</td>
   <td class='numeric'>[% row.credit | html %]</td>
  </tr>

  <tr id="ajaxrow[% row.id %]" style="display:none", onclick="$(this).toggle()">
   <td colspan="6" width="100%"><div id="ajaxcontent[% row.id %]"></div></td>
  </tr>
 [% END %]
[% END %]

 </table>

<script type='text/javascript'>
  function account_details(id) {
    $.ajax({
      url: 'am.pl?action=list_account_details',
      data: { args: id },
      dataType: 'html',
      success: function (data) { $('#ajaxcontent' + id).html(data) },
    });
    $('#ajaxrow' + id).toggle();
  }
</script>