[%- USE T8 %]
[%- USE HTML %]
[%- USE LxERP %]
[%- USE L %]
[% L.button_tag('', LxERP.t8('Hide buttons'), id="hide_buttons_button", class="hide") %]
[% L.button_tag('', LxERP.t8('Show charts'),  id="show_charts_button",  class="hide") %]
[% L.button_tag('', LxERP.t8('Hide charts'),  id="hide_charts_button",  class="hide") %]

<h3 align="center" id="show_buttons"> [% title %]</h3>
<h3 align=center>
[% period %]<br>
[% accounting_method %]<br>

<br>[% report_date %]
</h3>

<style type="text/css">

#eurtable {
  border-collapse: collapse;
  width: 100%;
}

tr.category {
  /* background set via jquery */
}

tr.chart {
  border: 0;
}

td.chartname {
  padding-left: 50px;
}

tr.chartrow {
  font-size: 75%;
}

.guv_row_background {
  background:#f0f0f0;
}
</style>

<table id="eurtable">
<tr>
  <td width=75% align=left colspan=2><font size="+1"><b>A. Betriebseinnahmen</font></b><br></td>
  <td></td>
</tr>

[% FOREACH i IN categories_income %]
  <tr class="category" data-catid="cat[% i %]">
    <td>
      [% HTML.escape(category_names.item(i)) %]
    </td>
    <td class="numeric">
      [% eur_amounts.item(i) %]
    </td>
  </tr>
  [% FOREACH chart = charts_by_category.item(i).list %]
  <tr class="chartrow cat[% i %]">
    <td class="chartname">[% chart.accno %] [% chart.description %]</td>
    <td class="numeric"> [% LxERP.format_amount(chart.amount,2) %] </td>
  </tr>
  [% END %]
[% END %]
<tr>
  <td> </td>
  <td><hr noshade size=1></td>
</tr>

<tr valign=top>
  <th align=left><b>Summe Einnahmen</b></th>
  <td align=right>[% sumeura %]<hr noshade size=2></td>
</tr>
<tr>
  <td></td>
  <td><br><br></td>
</tr>
<tr>
  <td align=left><font size="+1"><b>B. Betriebsausgaben</font></b><br></td>
  <td></td>
</tr>

[% FOREACH i IN categories_expense %]
  <tr class="category" data-catid="cat[% i %]">
    <td>
      [% HTML.escape(category_names.item(i)) %]
    </td>
    <td class="numeric">
      [% eur_amounts.item(i) %]
    </td>
  </tr>
  [% FOREACH chart = charts_by_category.item(i).list %]
  <tr class="chartrow cat[% i %]">
    <td class="chartname">[% chart.accno %] [% chart.description %]</td>
    <td class="numeric"> [% LxERP.format_amount(chart.amount,2) %] </td>
  </tr>
  [% END %]
[% END %]
<tr>
  <td> </td>
  <td><hr noshade size=1></td>
</tr>

<tr valign=top>
  <th align=left><b>Summe Ausgaben</b></th>
  <td align=right>[% sumeurb %] <br><hr noshade size=2</td>
</tr>
<tr>
  <td></td>
  <td><br><br></td>
</tr>
<tr valign=top>
  <td align=left>GEWINN / VERLUST</td>
  <td align=right>[% guvsumme %]<br><hr noshade size=2></td>
</tr>

</table>


<br>

[% L.button_tag('', LxERP.t8('Show chart list'), id="show_chartlist_button", class="hide") %]
[% L.button_tag('', LxERP.t8('Hide chart list'), id="hide_chartlist_button", class="hide") %]

<div id="chartlist">
<div>[% 'Chart list' | $T8 %]</div>
<div>
<table>
<tr>
  <th>[% 'Chart'    | $T8 %]</th>
  <th>[% 'Amount'   | $T8 %]</th>
  <th>[% 'Category' | $T8 %]</th>
</tr>
[% FOREACH key = charts.keys.sort %]
[% UNLESS charts.$key.pos_eur %]
[% NEXT %]
[% END %]
<tr>
 <td>[% charts.$key.accno %]</td>
 <td class="numeric">[%  LxERP.format_amount( charts.$key.amount, 2 ) %]</td>
 <td>[% HTML.escape(category_names.item(charts.$key.pos_eur)) %]</td>
</tr>
[% END %]
</table>
</div>
</div>
</body>
</html>

<script language="javascript">
$( document ).ready(function() {
  $( ".chartrow" ).hide();
  $( "#hide_charts_button" ).hide();
  $( "#hide_chartlist_button" ).hide();
  $( "#chartlist" ).hide();
  $( '.category:even' ).css('background-color','#f0f0f0');
  $( '.category:odd' ).css('background-color','#f8f8f8');

  $( "#show_chartlist_button" ).click(function() {
    $( "#chartlist" ).toggle();
    $('html, body').animate({
        scrollTop: $(this).offset().top
    }, 500);
    $(this).hide();
    $("#hide_chartlist_button").show();
  });

  $( "#hide_chartlist_button" ).click(function() {
    $( "#chartlist" ).toggle();
    $('html, body').animate({
        scrollTop: $(this).offset().top
    }, 500);
    $(this).hide();
    $("#show_chartlist_button").show();
  });

  $( "#hide_buttons_button" ).click(function() {
    $( ".hide" ).hide();
  });

  $( "#show_buttons" ).click(function() {
    $( ".hide" ).show();
  });

  $( "#show_charts_button" ).click(function() {
    $( ".chartrow" ).show();
    $(this).hide();
    $("#hide_charts_button").show();
  });

  $( "#hide_charts_button" ).click(function() {
    $( ".chartrow" ).hide();
    $(this).hide();
    $("#show_charts_button").show();
  });

  $( ".category" ).click(function() {
    var chartrow_class = $(this).attr('data-catid');
    $('.' + chartrow_class).toggle();
  });
})

</script>