[% WRAPPER 'default/base.tt2' %]
<div id='oils-acq-list-header' class='container'>
    <div id='oils-acq-list-header-label'>Funding Sources</div>
</div>

<!-- load the page-specific JS -->
<script src='[% ctx.media_prefix %]/js/ui/default/acq/financial/list_funding_sources.js'> </script>

<script type="text/javascript">
    function createFS(fields) {
        /** Creates a new funding source */
        openils.acq.FundingSource.create(
            fields, 
            function(fsId) {
                var evt = openils.Event.parse(fsId);
                if(evt) {
                    alert(evt); /* XXX */
                    return;
                } else {
                    location.href =  /* go to the details page for this fs */
                        '[% ctx.base_uri %]/acq/funding_source/view/'+fsId;
                }
            }
        );
    }
</script>

<div class='oils-acq-actions-div'>
    <div dojoType="dijit.form.DropDownButton">
        <span>New Funding Source</span>

        <div dojoType="dijit.TooltipDialog" execute="createFS(arguments[0]);">
            <script type='dojo/connect' event='onOpen'>
                openils.acq.CurrencyType.loadSelectWidget(fsCurrencySelector);
                new openils.User().buildPermOrgSelector('ADMIN_FUNDING_SOURCE', fsOwnerSelect);
            </script>

            <table class='dijitTooltipTable'>
                <tr>
                    <td><label for="name">Name: </label></td>
                    <td><input dojoType="dijit.form.TextBox" name="name"/></td>
                </tr>
                <tr>
                    <td><label for="name">Code: </label></td>
                    <td><input dojoType="dijit.form.TextBox" name="code"/></td>
                </tr>
                <tr>
                    <td><label for="currency_type">Currency Type:</label></td>
                    <td>
                        <input jsId='fsCurrencySelector' name="currency_type" 
                            dojoType="dijit.form.FilteringSelect" searchAttr='code' labelAttr='code'>
                        </input>
                    </td>
                </tr>
                <tr>
                    <td valign='top'><label for="owner">Owning Location:</label></td>
                    <td>
                        <input dojoType="openils.widget.OrgUnitFilteringSelect" jsId='fsOwnerSelect'
                            searchAttr="shortname" name="owner" autocomplete="true" labelAttr='shortname'> </input>
                    </td>
                </tr>
                <tr>
                    <td colspan='2' align='center'>
                        <button dojoType=dijit.form.Button type="submit">Create</button>
                    </td>
                </tr>
            </table>
        </div>
    </div> 

    <button dojoType="dijit.form.Button" 
            onclick="openils.acq.FundingSource.deleteFromGrid(
                fundingSourceListGrid, function(){location.href = location.href})">
        Delete Selected
    </button>
</div>

<!-- The main grid lives here -->
<script>
    function getName(rowIndex) {
        data = fundingSourceListGrid.model.getRow(rowIndex);
        if(!data) return;
        return '<a href="[% ctx.base_uri %]/acq/funding_source/view/'+data.id+'">'+data.name+'</a>';
    }

    var fsGridStructure = [{
        cells : [[
            {name: 'ID', field: 'id'},
            {name: 'Name', width:'auto', get:getName}, 
            {name: 'Code', field:'code'},
            {name: 'Owner', width:'auto', get:getOrgInfo}, 
            {name: 'Currency Type', field: "currency_type"},
            {name: 'Balance', get:getBalanceInfo}
        ]]
    }];
</script>
<div id="oils-acq-funding-source-list-grid" jsId='fundingSourceListGrid' dojoType="dojox.Grid" structure='fsGridStructure'></div>
[% END %]