Bug 31986: Add page-section to various administration pages
[srvgit] / koha-tmpl / intranet-tmpl / prog / en / modules / admin / aqbudgets.tt
index ba308b6..195c2a6 100644 (file)
+[% USE raw %]
+[% USE Asset %]
+[% USE AuthorisedValues %]
+[% USE Branches %]
+[% USE Price %]
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
-<title>Koha &rsaquo; Administration &rsaquo; Funds[% IF ( add_form ) %] &rsaquo; [% IF ( budget_id ) %]Modify fund[% IF ( budget_name ) %] '[% budget_name %]'[% END %][% ELSE %]Add fund [% END %][% END %]</title>
+
+<title>[% IF op == 'add_form' %][% IF ( budget_id ) %]Modify fund[% IF ( budget_name ) %] '[% budget_name | html %]'[% END %][% ELSE %]Add fund[% END %] &rsaquo;[% END %] Funds &rsaquo; Administration &rsaquo; Koha</title>
+[% Asset.css("lib/jquery/plugins/treetable/stylesheets/jquery.treetable.css") | $raw %]
 [% INCLUDE 'doc-head-close.inc' %]
-<script type="text/javascript" src="[% themelang %]/js/acq.js"></script>
-
-[% IF ( add_form ) %]
-<script type="text/javascript">
-//<![CDATA[
-
-    function userPopup() {
-        window.open("/cgi-bin/koha/admin/aqbudget_user_search.pl?type=user",
-            'PatronPopup',
-            'width=740,height=450,location=yes,toolbar=no,'
-            + 'scrollbars=yes,resize=yes'
-        );
-    }
-
-    function ownerPopup() {
-        window.open("/cgi-bin/koha/admin/aqbudget_user_search.pl?type=owner",
-            'PatronPopup',
-            'width=740,height=450,location=yes,toolbar=no,'
-            + 'scrollbars=yes,resize=yes'
-        );
-    }
-
-    function edit_owner(borrowernumber, surname, firstname) {
-        $('#budget_owner_name').empty();
-        $('#budget_owner_id').val('');
-        if (borrowernumber) {
-            var ownerlink = '<a href="/cgi-bin/koha/members/moremember.pl'
-                + '?borrowernumber=' + borrowernumber + '">'
-                + firstname + ' ' + surname + '</a>';
-            $('#budget_owner_name').html(ownerlink);
-            $('#budget_owner_id').val(borrowernumber);
-        }
-    }
-
-    function ownerRemove() {
-        edit_owner(0);
-    }
-
-    function add_user(borrowernumber, surname, firstname) {
-        var ids = $("#budget_users_id").val().split(':');
-        if(borrowernumber && ids.indexOf(borrowernumber) == -1) {
-            var li = '<li id="user_' + borrowernumber + '">'
-                + '<a href="/cgi-bin/koha/members/moremember.pl?borrowernumber='
-                + borrowernumber + '">' + firstname + ' ' + surname
-                + '</a> [<a style="cursor:pointer"'
-                + 'onclick="del_user(' + borrowernumber +')">Remove</a>]</li>';
-            $(li).insertBefore("li#add_user_button");
-            ids.push(borrowernumber);
-            $("#budget_users_id").val(ids.join(':'));
-        } else {
-            return -1;
-        }
-        return 0;
-    }
-
-    function del_user(borrowernumber) {
-        var ids = $("#budget_users_id").val().split(':');
-        if (borrowernumber) {
-            var idx = ids.indexOf(borrowernumber+'');
-            if (idx != -1) {
-                ids.splice(idx, 1);
-                $("#budget_users_id").val(ids.join(':'));
-                $("li#user_" + borrowernumber).remove();
-            }
-        }
-    }
-
-    function Check(f) {
-        var ok=1;
-        var _alertString="";
-        var alertString2;
-
-        if (!(isNotNull(f.budget_code,1))) {
-            _alertString += _("- Budget code cannot be blank") + "\n";
-        }
-
-        if (!(isNotNull(f.budget_name,1))) {
-            _alertString += _("- Budget name cannot be blank") + "\n";
-        }
-
-        if (!(isNotNull(f.budget_amount,1))) {
-            _alertString += _("- Budget amount cannot be blank") + "\n";
-        }
-
-        var budgetId;
-        if   (typeof(f.budget_id ) != "undefined")  {
-            budgetId = f.budget_id.value
-        }
-
-        var newBudgetParent;
-
-//  hack to test if selected parent_id in scrolling-list...
-//  if value == 'undef' its got a selected_parent :/
-        if(f.budget_parent_id){
-            var chkAdd   =  f.budget_parent_id.value ;
-            if  (     typeof(chkAdd ) != "undefined") {
-                newBudgetParent  =  f.budget_parent_id.value
-            } else {
-                newBudgetParent  =  f.budget_parent_id.item(0).value
-            }
+</head>
 
-            if   (budgetId  > 0)  {  ; //its a mod ...
-                // if parent == curent-budget, fail...
-                if ( newBudgetParent  ==  budgetId     ) {
-                        _alertString += _("- Budget parent is current budget") + "\n";
-                }
+<body id="admin_aqbudgets" class="admin">
+[% WRAPPER 'header.inc' %]
+    [% INCLUDE 'budgets-admin-search.inc' %]
+[% END %]
 
-                else if (newBudgetParent) {
-                    var result = checkBudgetParent(  budgetId , newBudgetParent   );
-                    if (result) {
-                        _alertString += result;
-                    }
-                }
-            }
-        }
-
-         // else do lookup
-        var budgetTotal = Math.abs(f.budget_amount.value);
-        var result =   budgetExceedsParent  (budgetTotal, budgetId, newBudgetParent, f.budget_period_id.value)
-        if (result) {
-            _alertString += result;
-        }
-
-        if (_alertString.length==0) {
-            document.Aform.submit();
-        } else {
-            alertString2 = _("Form not submitted because of the following problem(s)");
-            alertString2 += "\n------------------------------------------------------------------------------------\n\n";
-            alertString2 += _alertString;
-            alert(alertString2);
-        }
-    }
-//]]>
-</script>
-[% ELSE %]
-<link href="[% themelang %]/lib/jquery/plugins/treetable/stylesheets/jquery.treeTable.css" rel="stylesheet" type="text/css" />
-
-<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.tablesorter.min.js"></script>
-<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/treetable/jquery.treeTable.min.js"></script>
-<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.qtip.js"></script>
-
-<script type="text/javascript">
-//<![CDATA[
-    //
-    $(document).ready(function() {
-        var tooltipcontent = $(".tooltipcontent");
-        tooltipcontent.hide();
-
-        $(".tooltiped td").each(function (){
-            contentelem = $(this).parent().children().filter(".tooltipcontent");
-            if(contentelem.html() != ""){
-            $(this).qtip({
-                content: contentelem.html(),
-                show: "mouseover",
-                hide: "mouseout",
-                style: {
-                    name: "light",
-                    tip: "bottomLeft",
-                    border: {
-                        radius: 5,
-                        color: "#356CA1"
-                    }
-                },
-                position: {
-                    corner: {
-                        target: "topRight",
-                        tooltip: "bottomRight"
-                    }
-                }
-            });
-            }
-        });
-        [% IF ( notree ) %]
-        $("#budgeth").tablesorter({
-            widgets : ['zebra'],
-            sortList: [[0,0]],
-            headers: { 7: { sorter: false }}
-        });
+[% WRAPPER 'sub-header.inc' %]
+<nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+    <li>
+        <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+    </li>
+    <li>
+        <a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a>
+    </li>
+    <li>
+        <a href="/cgi-bin/koha/admin/aqbudgetperiods.pl">Budgets</a>
+    </li>
+
+    [% IF op == 'list' %]
+        [% IF budget_period_id %]
+            <li>
+                <a href="#" aria-current="page">
+                    Funds for '[% budget_period_description | html %]'
+                </a>
+            </li>
         [% ELSE %]
-        $("#budgeth").treeTable();
+            <li>
+                <a href="#" aria-current="page">
+                    All funds
+                </a>
+            </li>
         [% END %]
+    [% END %]
 
-        $("#filterbutton").click(function() {
-            $("#fundfilters").slideToggle(0);
-        });
-    });
-//]]>
-</script>
-[% END %]
-
-</head>
-<body id="admin_aqbudgets" class="admin">
-[% INCLUDE 'header.inc' %]
-[% INCLUDE 'budgets-admin-search.inc' %]
-
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo;
-    <a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a> &rsaquo; <a href="/cgi-bin/koha/admin/aqbudgetperiods.pl">Budgets</a> &rsaquo; [% IF ( else ) %]Funds for '[% budget_period_description %]'[% END %][% IF ( add_form ) %]
-    <a href="/cgi-bin/koha/admin/aqbudgets.pl?budget_period_id=[% budget_period_id %]">Funds</a> &rsaquo; [% IF ( budget_id ) %]Modify fund[% IF ( budget_name ) %] '[% budget_name %]'[% END %][% ELSE %]Add fund[% END %][% END %]  [% IF ( delete_confirm ) %]
-    <a href="/cgi-bin/koha/admin/aqbudgets.pl">Funds</a> &rsaquo; Delete fund?[% END %]</div>
+    [% IF op == 'add_form' %]
+        <li>
+            <a href="/cgi-bin/koha/admin/aqbudgets.pl?budget_period_id=[% budget_period_id | uri %]">Funds</a>
+        </li>
+        [% IF ( budget_id ) %]
+            <li>
+                <a href="#" aria-current="page">
+                Modify fund
+                    [% IF ( budget_name ) %] '[% budget_name | html %]'[% END %]
+                </a>
+            </li>
+        [% ELSE %]
+            <li>
+                <a href="#" aria-current="page">
+                    Add fund
+                </a>
+            </li>
+        [% END %]
+    [% END %]
 
-<div id="doc3" class="yui-t2">
-<div id="bd">
-<div id="yui-main">
-<div class="yui-b" id="content">
+    [% IF op == 'delete_confirm' %]
+        <li>
+            <a href="/cgi-bin/koha/admin/aqbudgets.pl">Funds</a>
+        </li>
+        <li>
+            <a href="#" aria-current="page">
+                Delete fund?
+            </a>
+        </li>
+    [% END %]
+    </ol>
+</nav>
+[% END %]
 
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
 
-[% UNLESS ( delete_confirm ) %][% INCLUDE 'budgets-admin-toolbar.inc' %][% END %]
+[% UNLESS op == 'delete_confirm' %][% INCLUDE 'budgets-admin-toolbar.inc' %][% END %]
 
 [% IF (error_not_authorised_to_modify) %]
-    <div class="error">
-        <p>You are not authorised to modify this fund</p>
+    <div class="dialog alert">
+        <p>You are not authorized to modify this fund</p>
     </div>
 [% END %]
 
-[% IF ( else ) %]
+[% IF op == 'list' %]
 
-<h1>Funds for '[% budget_period_description %]'</h1>
+<h1>
+  [% IF budget_period_id %]
+    Funds for '[% budget_period_description | html %]'
+  [% ELSE %]
+    All funds
+  [% END %]
+</h1>
 
 [% INCLUDE 'budgets-active-currency.inc' %]
 
-<table id="budgeth">
+[% IF budgets %]
+
+    [% UNLESS budget_period_id %]
+        <div class="toolbar btn-toolbar">
+            <span class="actions">
+                <a href="#" id="expand_all">Expand all</a> |
+                <a href="#" id="collapse_all">Collapse all</a> |
+                <a href="#" id="hide_inactive">Hide inactive budgets</a> |
+                <a href="#" id="show_inactive">Show inactive budgets</a>
+            </span>
+        </div>
+    [% END %]
+<div class="page-section">
+<table id="budgeth" class="group">
     <thead>
         <tr>
+            <th>Active</th>
+            <th>Budget period description</th>
             <th>Fund code</th>
             <th>Fund name</th>
-            <th>Total<br />allocated</th>
-            <th>Base-level<br />allocated</th>
-            <th>Base-level<br />spent</th>
-            <th>Total sublevels<br />spent</th>
-            <th>Base-level<br />remaining</th>
-            <th class="tooltipcontent">&nbsp;</th>
-            <th>Actions</th>
+            <th>Base-level allocated</th>
+            <th>Base-level ordered</th>
+            <th>Total ordered</th>
+            <th>Base-level spent</th>
+            <th>Total spent</th>
+            <th>Base-level available</th>
+            <th>Total available</th>
+            <th class="noExport">Actions</th>
         </tr>
     </thead>
-<tfoot>
+    <tfoot>
     <tr>
-    <th colspan="2" style="text-align: left;" nowrap="nowrap">Period allocated [% IF ( budget_period_total ) %][% budget_period_total %][% END %]  </th>
-    <th nowrap="nowrap" class="data"> [% period_alloc_total %]</th>
-    <th nowrap="nowrap"  class="data"> [% base_alloc_total %]</th>
-    <th class="data">[% base_spent_total %]</th>
-    <th class="data">[% base_spent_total %]</th>
-    <th class="data">[% base_remaining_total %]</th>
-    <th class="tooltipcontent"></th>
+    <th></th>
+    <th></th>
+    <th colspan="2" style="text-align: left;" nowrap="nowrap">Period allocated [% IF budget_period_total %][% budget_period_total | $Price %][% END %]  </th>
+    <th nowrap="nowrap" class="data"> [% period_alloc_total | $Price %]</th>
+    <th></th>
+    <th class="data">[% ordered_total | $Price %]</th>
+    <th></th>
+    <th class="data">[% spent_total | $Price %]</th>
+    <th></th>
+    <th class="data">[% available_total | $Price %]</th>
     <th></th>
     </tr>
     </tfoot>
     <tbody>
-    [% IF ( budget ) %]
-        [% FOREACH budge IN budget %]
-    [% IF ( budge.toggle ) %]
-    <tr id="node-[% budge.budget_id %]" class="highlight[% IF ( budge.budget_parent_id ) %] child-of-node-[% budge.budget_parent_id %][% END %] tooltiped">
+    [% FOREACH budget IN budgets %]
+    [% IF budget.budget_parent_id %]
+      <tr data-tt-id="[% budget.budget_id | html %]" data-tt-parent-id="[% budget.budget_parent_id | html %]">
     [% ELSE %]
-    <tr id="node-[% budge.budget_id %]" class="tooltiped [% IF ( budge.budget_parent_id ) %] child-of-node-[% budge.budget_parent_id %][% END %]">
+      <tr data-tt-id="[% budget.budget_id | html %]">
     [% END %]
-
-    <td>[% budge.budget_code_indent %]</td>
-    <td>[% budge.budget_name %]</td>
-    <td class="data">[% budge.budget_amount_total %]</td>
-    <td class="data">[% budge.budget_amount %] </td>
-    <td class="data">[% budge.budget_spent %] </td>
-    <td class="data">[% budge.total_levels_spent %]</td>
-    [% IF ( budge.remaining_pos ) %]
-        <td class="data" style="color: green;">
-    [% ELSIF ( budge.remaining_neg ) %] 
-        <td class="data" style="color: red;">
-    [% ELSE %]
-        <td class="data">
+    <td>[% budget.budget_period_active | html %]</td>
+    <td>Budget [% budget.budget_period_description | html %] [id=[% budget.budget_period_id | html %]][% UNLESS budget.budget_period_active %] (inactive)[% END %]</td>
+    <td>[% budget.budget_code | html %]</td>
+    <td>[% budget.budget_name | html %]</td>
+    <td class="data">
+        <span class="total_amount" data-parent_id="[% budget.budget_parent_id | html %]" data-self_id="[% budget.budget_id | html %]">[% budget.budget_amount | $Price %]</span>
+    </td>
+    <td class="data">
+      [% IF budget.budget_parent_id %]
+        <span class="child_fund_amount">[% budget.budget_ordered | $Price %]</span>
+      [% ELSE %]
+        <span class="total_amount">[% budget.budget_ordered | $Price %]</span>
+      [% END %]
+    </td>
+    <td class="data">
+      [% IF budget.budget_parent_id %]
+        <span class="child_fund_amount">[% budget.total_ordered | $Price %]</span>
+      [% ELSE %]
+        <span class="total_amount">[% budget.total_ordered | $Price %]</span>
+      [% END %]
+    </td>
+    <td class="data">
+      [% IF budget.budget_parent_id %]
+        <span class="child_fund_amount">[% budget.budget_spent | $Price %]</span>
+      [% ELSE %]
+        <span class="total_amount">[% budget.budget_spent | $Price %]</span>
+      [% END %]
+    </td>
+    <td class="data">
+      [% IF budget.budget_parent_id %]
+        <span class="child_fund_amount">[% budget.total_spent | $Price %]</span>
+      [% ELSE %]
+        <span class="total_amount">[% budget.total_spent | $Price %]</span>
+      [% END %]
+    </td>
+
+
+    [% BLOCK colorcellvalue %]
+        [% IF (value > 0) %]
+            <span class="total_amount" data-parent_id="[% budget.budget_parent_id | html %]" data-self_id="[% budget.budget_id | html %]" style="color: green;">
+        [% ELSIF (value < 0) %]
+            <span class="total_amount" data-parent_id="[% budget.budget_parent_id | html %]" data-self_id="[% budget.budget_id | html %]" style="color: red;">
+        [% ELSE %]
+            <span class="totalamount">
+        [% END %]
+        [% value | $Price %]
+        </span>
     [% END %]
-            [% budge.budget_remaining %] </td>
-
-    <td class="tooltipcontent">[% IF ( budge.budget_owner_id ) %]<strong>Owner: </strong><a href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% budge.budget_owner_id %]">[% budge.budget_owner_name %]</a>[% END %]
-        [% IF ( budge.budget_branchcode ) %]<br /><strong>Library: </strong>[% budge.budget_branchcode %][% END %]
-        [% IF ( budge.budget_notes ) %]<br /><strong>Notes: </strong>[% budge.budget_notes %][% END %]
-        [% IF ( budge.budget_hierarchy ) %]
-            <ul class="budget_hierarchy">[% FOREACH budget_hierarch IN budge.budget_hierarchy %]
-                [% IF ( budget_hierarch.element_id ) %]
-                    <li><a href="?op=add_form&amp;budget_id=[% budget_hierarch.element_id %]&amp;budget_period_id=[% budget_hierarch.budget_period_id %]">[% budget_hierarch.element_name %]</a></li>
-                [% ELSE %]
-                    <li><strong>[% budget_hierarch.element_name %] : </strong></li>
-                [% END %]
-                [% END %]
-            </ul>
-        [% END %]</td>
-    [% IF ( budge.budget_lock ) %]
-        <td> <span style="color: gray;"> Edit Delete </span> </td>
+    <td class="data">
+        [% INCLUDE colorcellvalue value=budget.budget_remaining parent=budget.budget_parent_id %]
+    </td>
+    <td class="data">
+        [% INCLUDE colorcellvalue value=budget.total_remaining parent=budget.budget_parent_id %]
+    </td>
+    [% IF ( budget.budget_lock ) %]
+        <td> <span></span> </td>
     [% ELSE %]
         <td>
-            <a href="/cgi-bin/koha/admin/aqbudgets.pl?op=add_form&amp;budget_id=[% budge.budget_id %]&amp;budget_period_id=[% budge.budget_period_id %]" >Edit</a>
-            <a href="/cgi-bin/koha/admin/aqbudgets.pl?op=delete_confirm&amp;budget_id=[% budge.budget_id %]&amp;budget_period_id=[% budge.budget_period_id %]">Delete</a>
-            <a href="/cgi-bin/koha/admin/aqbudgets.pl?op=add_form&amp;budget_parent_id=[% budge.budget_id %]&amp;budget_period_id=[% budge.budget_period_id %]">Add child fund</a>
+            <div class="btn-group dropup">
+                <a class="btn btn-default btn-xs dropdown-toggle" id="budgetactions[% budget.budget_id | html %]_[% budget.budget_period_id | html %]" role="button" data-toggle="dropdown" href="#">
+                   Actions <b class="caret"></b>
+                </a>
+                <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="budgetactions[% budget.budget_id | html %]_[% budget.budget_period_id | html %]">
+                    <li><a href="/cgi-bin/koha/admin/aqbudgets.pl?op=add_form&amp;budget_id=[% budget.budget_id | uri %]&amp;budget_period_id=[% budget.budget_period_id | uri %]"><i class="fa fa-pencil"></i> Edit</a></li>
+                    [% IF budget.budget_has_children %]
+                        <li class="disabled"><a href="#" class="deletefund-disabled" data-toggle="tooltip" data-placement="left" title="This fund has sub funds."><i class="fa fa-trash"></i> Delete</a></li>
+                    [% ELSE %]
+                        <li><a href="/cgi-bin/koha/admin/aqbudgets.pl?op=delete_confirm&amp;budget_id=[% budget.budget_id | uri %]&amp;budget_period_id=[% budget.budget_period_id | uri %]"><i class="fa fa-trash"></i> Delete</a></li>
+                    [% END %]
+                    <li><a href="/cgi-bin/koha/admin/aqbudgets.pl?op=add_form&amp;budget_parent_id=[% budget.budget_id | uri %]&amp;budget_period_id=[% budget.budget_period_id | uri %]"><i class="fa fa-plus"></i> Add sub fund</a></li>
+                </ul>
+            </div>
         </td>
     [% END %]
     </tr>
-        [% END %]
-    [% ELSE %]
-        <tr><td colspan="12">No fund found</td></tr>
     [% END %]
     </tbody>
 </table>
+</div> <!-- /.page-section -->
 
-[% IF ( pagination_bar ) %]<div class="pages">[% pagination_bar %]</div>[% END %]
-[% END %] <!-- else -->
+[% ELSE %]
+    <p>No fund found</p>
+[% END %]
+
+[% END %] <!-- list -->
 
 <!-- ********************************************************************************************** -->
 <!-- create add/mod entry form -->
-[% IF ( add_form && !error_not_authorised_to_modify ) %]
-<form action="/cgi-bin/koha/admin/aqbudgets.pl" name="Aform" method="post">
+[% IF op == 'add_form' && !error_not_authorised_to_modify %]
+<form action="/cgi-bin/koha/admin/aqbudgets.pl" id="edit_fund" name="Aform" method="post">
     <fieldset class="rows">
-    <legend>[% IF ( budget_id ) %]Modify[% ELSE %]Add[% END %] Fund
+        <legend><h1>[% IF ( budget_id ) %]<span>Modify fund</span>[% ELSE %]<span>Add fund</span>[% END %]
     [% IF ( budget_period_description ) %]
-        [% budget_name %] for Budget '[% budget_period_description %]'
+        [% budget_name | html %] <span>for budget</span> '[% budget_period_description | html %]'
     [% END %]
+            </h1>
     </legend>
 
     <input type="hidden" name="op" value="add_validate" />
     [% IF ( budget_parent_id ) %]
     <li>
         <span class="label">Fund parent: </span>
-        [% budget_parent_name %]
-        [% budget_parent_id %] - [% budget_parent_name %]
-        <input type="hidden" name="budget_parent_id" value="[% budget_parent_id %]" />
+        [% budget_parent_name | html %]
+        [% budget_parent_id | html %] - [% budget_parent_name | html %]
+        <input type="hidden" name="budget_parent_id" value="[% budget_parent_id | html %]" />
     </li>
     [% END %]
     <li>
     <label class="required"  for="budget_code">Fund code: </label>
-    <input type="text" name="budget_code" id="budget_code" value="[% budget_code %]" size="30" />
+    <input type="text" name="budget_code" id="budget_code" value="[% budget_code | html %]" size="30" />
     </li>
 
     <li>
     <label class="required" for="budget_name">Fund name: </label>
-    <input type="text" name="budget_name" id="budget_name" value="[% budget_name %]" size="60" />
+    <input type="text" name="budget_name" id="budget_name" value="[% budget_name | html %]" size="60" />
     </li>
 
     <li>
-    <label style="white-space: nowrap;" for="budget_amount" class="required">Amount: </label>
-    <input type="text" name="budget_amount" id="budget_amount" value="[% budget_amount %]" size="8" />
+    <label for="budget_amount" class="required">Amount: </label>
+    <input type="text" name="budget_amount" id="budget_amount" value="[% budget_amount | $Price on_editing => 1 %]" size="8" />
     </li>
 
     <li>
-    <label for="budget_encumb">Encumbrance: </label>
-    <input type="text" name="budget_encumb" id="budget_encumb" value="[% budget_encumb %]" size="8" />
+      <label for="budget_encumb">Warning at (%): </label>
+      <input type="text" name="budget_encumb" id="budget_encumb" value="[% budget_encumb | html %]" size="10" />
+      <span class="hint">0 to disable</span>
     </li>
 
     <li>
-    <label for="budget_expend">Expenditure: </label>
-    <input type="text" name="budget_expend" id="budget_expend" value="[% budget_expend %]" size="8" />
+      <label for="budget_expend">Warning at (amount): </label>
+      <input type="text" name="budget_expend" id="budget_expend" value="[% budget_expend | $Price on_editing => 1 %]" size="10" />
+      <span class="hint">0 to disable</span>
     </li>
 
     <li>
         <span class="label">Owner: </span>
-        <span  id="budget_owner_name">
-        <a href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% budget_owner_id %]">
-            [% budget_owner_name %]
-        </a>
-        </span>
+        [% IF  budget_owner %]
+            <span  id="budget_owner_name">
+                <a href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% budget_owner.borrowernumber | uri %]">
+                    [% budget_owner.firstname | html %] [% budget_owner.surname | html %]
+                </a> |
+            </span>
+        [% ELSE %]
+            <span  id="budget_owner_name"></span>
+        [% END %]
+        <a id="edit_owner" class="new_window" href="#"><i class="fa fa-search"></i> Select owner</a>
+        <a id="remove_owner" href="#"><i class="fa fa-trash"></i> Remove owner</a>
         <input type="hidden" name="budget_owner_id" id="budget_owner_id"
-            value="[% budget_owner_id %]" />
-
-        <!-- FIXME: hardcoded button positions :/ -->
-        <input type="button" id="edit_owner" value="Edit owner"
-            onclick="ownerPopup(); return false;" />
-        <input type="button" id="remove_owner" value="Remove owner"
-            onclick="ownerRemove(); return false;" />
+            value="[% budget_owner.borrowernumber | html %]" />
     </li>
 
+
+    [% IF budget_has_children %]
+        <li class="radio">
+            <label>
+                <input type="checkbox" id="set_owner_to_children" name="set_owner_to_children" value="1" />
+                Update all sub funds with this owner
+            </label>
+            <span class="hint">Selecting this option will overwrite existing fund owners, if any</span>
+        </li>
+    [% END %]
+
     <li>
         <span class="label">Users:</span>
         <ul style="float:left;" id="budget_users">
             [% FOREACH user IN budget_users %]
-                <li id="user_[% user.borrowernumber %]">
-                    <a href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% user.borrowernumber %]">
-                        [% user.firstname %] [% user.surname %]
+                <li id="user_[% user.borrowernumber | html %]">
+                    <a href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% user.borrowernumber | uri %]">
+                        [% user.firstname | html %] [% user.surname | html %]
                     </a>
-                    [<a style="cursor:pointer"
-                    onclick="del_user([% user.borrowernumber %])">Remove</a>]
+                    &bull; <a href="#" class="del_user" data-borrowernumber="[% user.borrowernumber | html %]"><i class="fa fa-trash"></i> Remove</a>
                 </li>
             [% END %]
-            <li id="add_user_button">
-                <input type="button" onclick="userPopup()" value="Add users" />
-            </li>
+            <li><a href="#" id="add_user_button"><i class="fa fa-plus"></i> Add users</a></li>
         </ul>
-        <input type="hidden" name="budget_users_ids" id="budget_users_id" value="[% budget_users_ids %]" />
+        <input type="hidden" name="budget_users_ids" id="budget_users_id" value="[% budget_users_ids | html %]" />
+    </li>
     <li>
     <label for="budget_branchcode">Library: </label>
     <select name="budget_branchcode" id="budget_branchcode">
-    <option value=""></option>
-    [% FOREACH branchloop_selec IN branchloop_select %]
-        [% UNLESS ( branchloop_selec.selected ) %] <option value="[% branchloop_selec.value %]" > [% ELSE %] <option value="[% branchloop_selec.value %]" selected="selected"> [% END %] [% branchloop_selec.value %]-[% branchloop_selec.branchname %]</option>
-    [% END %]
+        <option value=""></option>
+        [% PROCESS options_for_libraries libraries => Branches.all( selected => budget_branchcode, unfiltered => 1 ) %]
     </select>
     </li>
 
 
     <li>
     <label for="budget_notes">Notes: </label>
-    <textarea name="budget_notes" id="budget_notes"  cols="80" rows="6">[% budget_notes %]</textarea>
+    <textarea name="budget_notes" id="budget_notes"  cols="80" rows="6">[% budget_notes | html %]</textarea>
     </li>
 
     <li>
-    <label  style="white-space: nowrap;" for="authorised_value_category1">Statistic 1 done on: </label>
+    <label  for="authorised_value_category1">Statistic 1 done on: </label>
         <select name="sort1_authcat" id="authorised_value_category1">
             <option value=""></option>
-            [% FOREACH authorised_value_categories IN authorised_value_categories1 %]
-                [% IF ( authorised_value_categories.selected ) %]
-                    <option value="[% authorised_value_categories.category %]" selected="selected">
-                        [% authorised_value_categories.category %]
-                    </option>
-                [% ELSE %]
-                    <option value="[% authorised_value_categories.category %]">
-                        [% authorised_value_categories.category %]
-                    </option>
-                [% END %]
-            [% END %]
+            [% PROCESS options_for_authorised_value_categories authorised_value_categories => AuthorisedValues.GetCategories( selected => sort1_authcat ) %]
         </select>
     </li>
     <li>
-    <label  style="white-space: nowrap;" for="authorised_value_category2">Statistic 2 done on: </label>
+    <label  for="authorised_value_category2">Statistic 2 done on: </label>
         <select name="sort2_authcat" id="authorised_value_category2">
             <option value=""></option>
-            [% FOREACH authorised_value_categories IN authorised_value_categories2 %]
-                [% IF ( authorised_value_categories.selected ) %]
-                    <option value="[% authorised_value_categories.category %]" selected="selected">
-                        [% authorised_value_categories.category %]
-                    </option>
-                [% ELSE %]
-                    <option value="[% authorised_value_categories.category %]">
-                        [% authorised_value_categories.category %]
-                    </option>
-                [% END %]
-            [% END %]
+            [% PROCESS options_for_authorised_value_categories authorised_value_categories => AuthorisedValues.GetCategories( selected => sort2_authcat ) %]
         </select>
     </li>
     </ol>
 
     [% IF ( budget_id ) %]
-        <input type="hidden" name="budget_id" value="[% budget_id %]" />
+        <input type="hidden" name="budget_id" value="[% budget_id | html %]" />
     [% END %]
     </fieldset>
 
     <fieldset class="action">
-        <input type="submit" value="Submit" onclick="Check(this.form); return false;" /> <a class="cancel" href="/cgi-bin/koha/admin/aqbudgets.pl">Cancel</a>
-        <input type="hidden" name="budget_period_id" value="[% budget_period_id %]" />
+        <input type="submit" value="Submit" /> <a class="cancel" href="/cgi-bin/koha/admin/aqbudgets.pl">Cancel</a>
+        <input type="hidden" name="budget_period_id" value="[% budget_period_id | html %]" />
     </fieldset>
 </form>
 
 [% END %] <!-- add_form -->
 
-[% IF ( delete_confirm ) %]
-<div class="dialog alert"> <h3>Delete fund [% budget_name %]?</h3>
-<table>
-    <tr>
-    <th scope="row">Fund amount:</th>
-    <td>[% budget_amount %]</td>
-    </tr>
-</table>
+[% IF op == 'delete_confirm' %]
+    <div class="dialog alert">
+        <h1>Delete fund [% budget_name | html %]?</h1>
+        If you delete this fund, all orders linked to this fund will be deleted!
+        <table>
+            <tr>
+            <th scope="row">Fund amount:</th>
+            <td>[% budget_amount | $Price %]</td>
+            </tr>
+        </table>
+
+        <form action="/cgi-bin/koha/admin/aqbudgets.pl" method="post">
+            <input type="hidden" name="op" value="delete_confirmed" />
+            <input type="hidden" name="budget_id" value="[% budget_id | html %]" />
+            <input type="hidden" name="budget_period_id" value="[% budget_period_id | html %]" />
+            <button type="submit" class="approve"><i class="fa fa-fw fa-check"></i> Yes, delete this fund</button>
+        </form>
+        <form action="/cgi-bin/koha/admin/aqbudgets.pl" method="get">
+            <button type="submit" class="deny"><i class="fa fa-fw fa-remove"></i> No, do not delete</button>
+        </form>
+    </div>
+[% END %]
 
-<form action="[% action %]" method="post">
-    <input type="hidden" name="op" value="delete_confirmed" />
-    <input type="hidden" name="budget_id" value="[% budget_id %]" />
-    <input type="hidden" name="budget_period_id" value="[% budget_period_id %]" />
-    <input type="submit" value="Delete this budget" class="approve" />
-</form>
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
 
-<form action="[% action %]" method="get">
-    <input type="submit" class="deny" value="No, do not delete" />
-</form>
-</div>
-[% END %]
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
 
-</div>
-</div>
-<div class="yui-b">
-[% IF ( else ) %]<form action="/cgi-bin/koha/admin/aqbudgets.pl" method="get">
+[% IF op == 'list' %]
+  <form action="/cgi-bin/koha/admin/aqbudgets.pl" method="get">
     <a href="#" id="filterbutton">Filters</a>
     <fieldset class="brief" id="fundfilters">
     <h4>Fund filters</h4>
         <ol>
         <li>
             <label for="filter_budgetbranch2">Library: </label>
-            <select name="filter_budgetbranch" id="filter_budgetbranch2" style="width:10em;">
+            <select name="filter_budgetbranch" id="filter_budgetbranch2">
                 <option value=""></option>
-                [% FOREACH branchloo IN branchloop %]
-                [% UNLESS ( branchloo.selected ) %]<option value="[% branchloo.value %]">
-                [% ELSE %]<option value="[% branchloo.value %]" selected="selected">[% END %]
-                [% branchloo.branchname %]</option>
-                [% END %]
+                [% PROCESS options_for_libraries libraries => Branches.all( selected => selected_branchcode, unfiltered => 1 ) %]
             </select>
         </li>
         <li class="radio">
 
-        <label for="show_mine">Show my funds only</label>
+        <label for="show_mine">Show my funds only:</label>
             [% IF ( show_mine ) %]
                 <input type="checkbox" id="show_mine"  name="show_mine" value="1" checked="checked" />
             [% ELSE %]
                 <input type="checkbox" id="show_mine"  name="show_mine" value="1" />
         [% END %]
         </li>
+
+        [% IF periods %]
+          <li>
+            <label for="periods">Budget:</label>
+            <select id="periods" name="budget_period_id">
+              <option value="">All budgets</option>
+              [% FOR period IN periods %]
+                [% IF budget_period_id && period.budget_period_id == budget_period_id %]
+                  <option value="[% period.budget_period_id | html %]" selected="selected">[% period.budget_period_description | html %]</option>
+                [% ELSE %]
+                  <option value="[% period.budget_period_id | html %]">[% period.budget_period_description | html %]</option>
+                [% END %]
+              [% END %]
+            </select>
+          </li>
+        [% END %]
         </ol>
 
-        <input type="hidden" name="show" value="1" />
-        <input type="hidden"  name="budget_period_id" value="[% budget_period_id %]" />
+        <input type="hidden" name="op" value="list" />
         <input type="submit" class="submit" name="filter" value="Go" />
     </fieldset>
 </form>[% END %]
-[% INCLUDE 'acquisitions-menu.inc' %]
-</div>
-</div>
+
+                [% INCLUDE 'acquisitions-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
+
+[% MACRO jsinclude BLOCK %]
+    [% Asset.js("js/acq.js") | $raw %]
+    [% IF op == 'add_form' %]
+        <script>
+        //<![CDATA[
+
+            function userPopup() {
+                window.open("/cgi-bin/koha/members/search.pl?columns=cardnumber,name,category,branch,action&selection_type=add&filter=funds_users",
+                    'PatronPopup',
+                    'width=1024,height=768,location=yes,toolbar=no,'
+                    + 'scrollbars=yes,resize=yes'
+                );
+            }
+
+            function ownerPopup() {
+                window.open("/cgi-bin/koha/members/search.pl?columns=cardnumber,name,category,branch,action&selection_type=select&filter=funds_owners",
+                    'PatronPopup',
+                    'width=1024,height=768,location=yes,toolbar=no,'
+                    + 'scrollbars=yes,resize=yes'
+                );
+            }
+
+            function select_user(borrowernumber, borrower) {
+                ownerRemove();
+                var borrowername = borrower.firstname + ' ' + borrower.surname;
+                if (borrowernumber) {
+                    var ownerlink = '<a href="/cgi-bin/koha/members/moremember.pl'
+                        + '?borrowernumber=' + borrowernumber + '">'
+                        + borrowername + '</a>';
+                    $('#budget_owner_name').html(ownerlink);
+                    $('#budget_owner_id').val(borrowernumber);
+                }
+            }
+
+            function ownerRemove() {
+                $('#budget_owner_name').empty();
+                $('#budget_owner_id').val('');
+            }
+
+            function add_user(borrowernumber, borrowername) {
+                var ids = $("#budget_users_id").val().split(':');
+                if(borrowernumber && ids.indexOf(borrowernumber.toString()) == -1) {
+                    var li = '<li id="user_' + borrowernumber + '">'
+                        + '<a href="/cgi-bin/koha/members/moremember.pl?borrowernumber='
+                        + borrowernumber + '">' + borrowername + '</a> '
+                        + ' &bull; <a data-borrowernumber=" + borrowernumber +" class="del_user" href="#"><i class="fa fa-trash"></i> '+_("Remove")+'</a> '
+                        + '</li>';
+                    $("#budget_users").prepend(li);
+                    ids.push(borrowernumber);
+                    $("#budget_users_id").val(ids.join(':'));
+                } else {
+                    return -1;
+                }
+                return 0;
+            }
+
+            function del_user(borrowernumber) {
+                var ids = $("#budget_users_id").val().split(':');
+                if (borrowernumber) {
+                    var idx = ids.indexOf(borrowernumber+'');
+                    if (idx != -1) {
+                        ids.splice(idx, 1);
+                        $("#budget_users_id").val(ids.join(':'));
+                        $("li#user_" + borrowernumber).remove();
+                    }
+                }
+            }
+
+            function Check(f) {
+                var ok=1;
+                var _alertString="";
+                var alertString2;
+
+                if (!(isNotNull(f.budget_code,1))) {
+                    _alertString += _("- Budget code cannot be blank") + "\n";
+                }
+
+                if (!(isNotNull(f.budget_name,1))) {
+                    _alertString += _("- Budget name cannot be blank") + "\n";
+                }
+
+                if (!(isNotNull(f.budget_amount,1))) {
+                    _alertString += _("- Budget amount cannot be blank") + "\n";
+                }
+
+                var budgetId;
+                if   (typeof(f.budget_id ) != "undefined")  {
+                    budgetId = f.budget_id.value
+                }
+
+                var newBudgetParent;
+
+        //  hack to test if selected parent_id in scrolling-list...
+        //  if value == 'undef' its got a selected_parent :/
+                if(f.budget_parent_id){
+                    var chkAdd   =  f.budget_parent_id.value ;
+                    if  (     typeof(chkAdd ) != "undefined") {
+                        newBudgetParent  =  f.budget_parent_id.value
+                    } else {
+                        newBudgetParent  =  f.budget_parent_id.item(0).value
+                    }
+
+                    if   (budgetId  > 0)  {  ; //its a mod ...
+                        // if parent == curent-budget, fail...
+                        if ( newBudgetParent  ==  budgetId     ) {
+                                _alertString += _("- Budget parent is current budget") + "\n";
+                        }
+
+                        else if (newBudgetParent) {
+                            var result = checkBudgetParent(  budgetId , newBudgetParent   );
+                            if (result) {
+                                _alertString += result;
+                            }
+                        }
+                    }
+                }
+
+                 // else do lookup
+                var budgetTotal = Math.abs(f.budget_amount.value);
+                var result =   budgetExceedsParent  (budgetTotal, budgetId, newBudgetParent, f.budget_period_id.value)
+                if (result) {
+                    _alertString += result;
+                }
+
+                if (_alertString.length==0) {
+                    document.Aform.submit();
+                } else {
+                    alertString2 = _("Form not submitted because of the following problem(s)");
+                    alertString2 += "\n------------------------------------------------------------------------------------\n\n";
+                    alertString2 += _alertString;
+                    alert(alertString2);
+                }
+            }
+            $(document).ready(function(){
+                $("#remove_owner").on("click",function(e){
+                    e.preventDefault();
+                    ownerRemove();
+                });
+                $("#edit_owner").on("click",function(e){
+                    e.preventDefault();
+                    ownerPopup();
+                });
+                $("body").on("click",".del_user",function(e){
+                    e.preventDefault();
+                    var borrowernumber = $(this).data("borrowernumber");
+                    del_user(borrowernumber);
+                });
+                $("#add_user_button").on("click",function(e){
+                    e.preventDefault();
+                    userPopup();
+                });
+                $("#edit_fund").on("submit",function(e){
+                    e.preventDefault();
+                    Check(this);
+                });
+            });
+        //]]>
+        </script>
+    [% ELSIF op == 'list' %]
+        [% INCLUDE 'datatables.inc' %]
+        [% INCLUDE 'columns_settings.inc' %]
+        [% Asset.js("lib/jquery/plugins/treetable/jquery.treetable.js") | $raw %]
+
+        <script>
+        //<![CDATA[
+            //
+            $(document).ready(function() {
+                [% IF budgets %]
+                    var oTable = KohaTable("budgeth", {
+                        "fnDrawCallback": function ( oSettings ) {
+                            if ( oSettings.aiDisplay.length == 0 )
+                            {
+                                return;
+                            }
+
+                            var nTrs = $('#budgeth tbody tr');
+                            var iColspan = nTrs[0].getElementsByTagName('td').length;
+                            var sLastGroup = "";
+                            for ( var i=0 ; i<nTrs.length ; i++ )
+                            {
+                                var iDisplayIndex = oSettings._iDisplayStart + i;
+                                var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[1];
+                                if ( sGroup != sLastGroup )
+                                {
+                                    var nGroup = document.createElement( 'tr' );
+                                    var nCell = document.createElement( 'td' );
+                                    nCell.colSpan = iColspan;
+                                    nCell.className = "group";
+                                    nCell.innerHTML = sGroup;
+                                    nGroup.appendChild( nCell );
+                                    nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
+                                    sLastGroup = sGroup;
+                                }
+                            }
+                        },
+                        "footerCallback": function ( row, data, start, end, display ) {
+                            var api = this.api(), data;
+                            footer_column_sum( api, [ 4, 6, 8, 10 ], 2 );
+                        },
+                        "aoColumnDefs": [
+                            { "bVisible": false, "aTargets": [ 0, 1 ] },
+                            { "bSortable": false, "aTargets": ["_all"] }
+                        ],
+                        'bSort': true,
+                        'aaSortingFixed': [[ 1, 'asc' ]],
+                        'bPaginate': false,
+                        "bAutoWidth": false
+                    });
+
+                    $(oTable).treetable({
+                        expandable: true
+                    });
+                    $(oTable).treetable('expandAll');
+                    $("#expand_all").click(function(e){
+                        e.preventDefault();
+                        $(oTable).treetable('expandAll');
+                    });
+                    $("#collapse_all").click(function(e){
+                        e.preventDefault();
+                        $(oTable).treetable('collapseAll');
+                    });
+
+                    [% UNLESS budget_period_id %]
+                      $("#hide_inactive").click(function(e){
+                        e.preventDefault();
+                        oTable.fnFilter( 1, 0 ); // Show only active=1
+                      });
+                      $("#show_inactive").click(function(e){
+                        e.preventDefault();
+                        oTable.fnFilter( '', 0 );
+                      });
+                      $("#hide_inactive").click();
+                    [% END %]
+                    oTable.fnAddFilters("filter", 750);
+                [% END %]
+
+                $("#filterbutton").click(function() {
+                    $("#fundfilters").slideToggle(0);
+                });
+
+                $(".deletefund-disabled").tooltip().on("click", function(e){
+                    e.preventDefault();
+                    alert(_("This fund has sub funds. It cannot be deleted."));
+                });
+            });
+        //]]>
+        </script>
+    [% END %]
+[% END %]
 [% INCLUDE 'intranet-bottom.inc' %]