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

<style type="text/css">
<!--
html, body {
  height: 100%;
}
.top_border {
  border-top: solid black;
  border-width: 4px;
}
.bottom_border {
  border-bottom: solid black;
  border-width: 4px;
}
#content.html-menu { height: 100%; }
.out_of_balance {
  color: #888888;
}
-->
</style>

<div class="listtop">[% title %]</div>
[%- INCLUDE 'common/flash.html' %]

<form id="reconciliation_form" method="post" action="controller.pl" style="height:100%" id="filter_form">
  <table>
    <tr>
     <th align="right">[% 'Bank account' | $T8 %]</th>
     <td>[% L.select_tag('filter.local_bank_account_id:number',
                          SELF.BANK_ACCOUNTS,
                          default=FORM.filter.local_bank_account_id_number,
                          title_key='displayable_name',
                          with_empty=0,
                          style='width:450px',
                          onchange='filter_table();') %]</td>
    </tr>

    <tr>
     <th align="right">[% 'From' | $T8 %]</th>
     <td>[% L.date_tag('filter.fromdate:date::ge', FORM.filter.fromdate_date__ge, onchange='filter_table();') %]</td>
     <th align="right">[% 'to (date)' | $T8 %]</th>
     <td>[% L.date_tag('filter.todate:date::le', FORM.filter.todate_date__le, onchange='filter_table();') %]</td>
    </tr>

    <tr>
     <th align="right">[% 'Cleared/uncleared only' | $T8 %]</th>
     <td>[% L.select_tag('filter.cleared:eq_ignore_empty', SELF.cleared, value_key = 'value', title_key = 'title', default=FORM.filter.cleared_eq_ignore_empty, onchange='filter_table();') %]</td>
    </tr>

    <tr>
     <th align="right">[% 'Show Stornos' | $T8 %]</th>
     <td>[% L.checkbox_tag('filter.show_stornos', checked=FORM.filter.show_stornos, value='1', onchange='filter_table();') %]</td>
    </tr>

    <tr>
     <th align="right">[% 'Absolute BT Balance' | $T8 %]</th>
     <td class='absolut_bt_balance'>[% LxERP.format_amount(SELF.absolut_bt_balance, 2) %]</td>
    </tr>

    <tr>
     <th align="right">[% 'Absolute BB Balance' | $T8 %]</th>
     <td class='absolut_bb_balance'>[% LxERP.format_amount(-1 * SELF.absolut_bb_balance, 2) %]</td>
    </tr>

    <tr>
     <th align="right">[% 'BT Balance' | $T8 %]</th>
     <td class='bt_balance'>[% LxERP.format_amount(SELF.bt_balance, 2) %]</td>
    </tr>

    <tr>
     <th align="right">[% 'BB Balance' | $T8 %]</th>
     <td class='bb_balance'>[% LxERP.format_amount(-1 * SELF.bb_balance, 2) %]</td>
    </tr>
  </table>

  <div id="reconc_tabs" class="tabwidget" style="height:100%">
    <ul>
      <li><a href="#overview" onclick="load_overview();">[% 'Overview' | $T8 %]</a></li>
      <li><a href="#automatic" onclick="load_proposals();">[% 'Proposals' | $T8 %]</a></li>
    </ul>

    <div id="overview" style="height:calc(100% - 60px);overflow: auto;">
    [%- IF ui_tab == 0 %]
    [% PROCESS "reconciliation/tabs/overview.html" %]
    [%- END %]</div>
    <div id="automatic" style="height:calc(100% - 60px);overflow: auto;">
    [%- IF ui_tab == 1 %]
    [% PROCESS "reconciliation/tabs/automatic.html" %]
    [%- END %]    </div>
  </div>

</form>

<script type="text/javascript">
<!--

function load_proposals () {
  var url="controller.pl?action=Reconciliation/load_proposals";
  $.ajax({
    url: url,
    type: "POST",
    data: $('#reconciliation_form').serialize(),
    success: function(new_data) {
      $('#overview').html('');
      $('#automatic').html(new_data['html']);
    }
  });
}

function load_overview () {
  var url="controller.pl?action=Reconciliation/load_overview";
  $.ajax({
    url: url,
    type: "GET",
    data: $('#reconciliation_form').serialize(),
    success: function(new_data) {
      $('#overview').html(new_data['html']);
      $('#automatic').html('');
    }
  });
}

$.cookie('jquery_ui_tab_reconc_tabs', [% ui_tab %] );

//-->
</script>