[% PROCESS javascript/form.tt %]

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store
    var cm = new Ext.grid.ColumnModel([
      [% FOREACH col IN lf.main.col_order -%]
        {
          [% IF lf.main.cols.$col.is_fk %]
            header:     '[% lf.main.cols.$col.heading %] (FK)'
          [% ELSE %]
            header:     '[% lf.main.cols.$col.heading %]'
          [% END %]
            ,dataIndex: '[% col %]'
            ,editor:    new Ext.form.TextField({})
            ,renderer: function (value,metadata,record,rowindex,colindex,store) {
              [% IF lf.main.cols.$col.extjs_xtype == 'checkbox' %]
                if (value == '(click to add filter)') { return '' }
                if (value == '1') {
                  return '<img src="[% c.req.base %]/image/bullet_green.png"/>';
                }
                else {
                  return '<img src="[% c.req.base %]/image/bullet_red.png"/>';
                }
              [% ELSE %]
                return value;
              [% END %]
            }
        },
      [% END -%]
      [% FOREACH col IN lf.main.mfks.keys -%]
        {
            header: '[% lf.main.mfks.item(col) %]'
            ,dataIndex: 'lf-multi-column'
            ,align: 'center'
            ,sortable: false
            ,menuDisabled: true
            ,tooltip: 'Hover mouse over a cell<br />to show related data'
            ,renderer: function (value,metadata,record,rowindex,colindex,store) {
                if (value == '(click to add filter)') { return '' }
                else {
                    metadata.attr += 'ext:qtitle="[% lf.main.mfks.item(col) %]" ext:qtip="'
                        + (record.get('[% col %]').join(',<br />') || '(none)') + '"';
                    metadata.css += 'half-grey';
                    return '<img ext:qtitle="[% lf.main.mfks.item(col) %]" ext:qtip="'
                        + (record.get('[% col %]').join(',<br />') || '(none)')
                        + '" src="[% c.req.base %]/image/magnifier.png"/>'
                        + ' Show';
                }
            }
        },
      [% END -%]
        {
            header: 'Delete'
            ,dataIndex: 'lf-delete-column'
            ,align: 'center'
            ,sortable: false
            ,menuDisabled: true
            ,renderer: function (value,metadata,record,rowindex,colindex,store) {
                if (value == '(click to add filter)') { return '' }
                else {
                    return '<img src="[% c.req.base %]/image/bin_closed.png"/>'
                        + ' Delete';
                }
            }
        }
    ]);

    // by default columns are sortable
    cm.defaultSortable = true;

    var pagebar = new Ext.PagingToolbar({
        id: 'pagebar'
        ,pageSize: 10
        ,store: store
        ,displayInfo: true
        ,listeners: {
            // fudge for the Rows selector below, when it selects 0 or 'all'
            enable: function() {
                if ((pagebar.pageSize == 0) || isNaN(pagebar.pageSize)) {
                    pagebar.pageSize = pagebar.store.data.length;
                    pagebar.updateInfo();
                }
            }
        }
        ,items:[
            '-' ,'Rows:' ,' ' ,{
                xtype: 'combo'
                ,mode: 'local'
                ,allowBlank: false
                ,triggerAction: 'all'
                ,lazyInit: false
                ,width: 50
                ,maskRe: /[0-9]/
                ,store: [10, 20, 50, 100, 'all']
                ,listeners: {
                    render: function(combo) {
                        combo.setValue(pagebar.pageSize);
                    }
                    ,select: function(combo) {
                        pagebar.pageSize = parseInt(combo.getRawValue(), 10);
                        pagebar.doLoad(pagebar.cursor);
                    }
                    ,specialkey: function(combo, e) {
                        if (e.getKey() == 13) {
                            pagebar.pageSize = parseInt(combo.getRawValue(), 10) || 'all';
                            combo.setValue(pagebar.pageSize);
                            pagebar.doLoad(pagebar.cursor);
                        }
                    }
                }
            }
            ,'-' ,{
                text: 'Clear Filters'
                ,cls: 'x-btn-text-icon'
                ,icon: '[% c.req.base %]image/bin_closed.png'
                // XXX private method to refresh
                ,handler: function (){
                    store.baseParams = {}; // clear search opts
                    pagebar.doLoad(pagebar.cursor);
                }
            }
            ,' ' ,{
                text: 'Apply Filters'
                ,cls: 'x-btn-text-icon'
                ,icon: '[% c.req.base %]/image/find.png'
                ,handler: function (){
                    var params = {};
                    var searchrow = grid.getStore().getAt(0).data;
                    for (var key in searchrow) {
                        if ((searchrow[key].search('click to ') != -1)
                            || (searchrow[key] == '')) {
                            // don't submit if still the default, or empty
                            continue;
                        }
                        params['search.' + key] = searchrow[key];
                    }
                    store.baseParams = params;
                    pagebar.doLoad(pagebar.cursor);
                }
            }
            ,'-' ,{
                text: 'Add New [% lf.main.title %]'
                ,cls: 'x-btn-text-icon'
                ,icon: '[% c.req.base %]/image/add.png'
                ,handler: function(){
                    // draw the window!
                    var win = generate_win();
                    win.show(this);
                }
            }
            ,'-' ,'Go to:' ,' ' ,{
                xtype: 'combo'
                ,mode: 'local'
                ,readOnly: true
                ,editable: false
                ,forceSelection: true
                ,lazyInit: false
                ,emptyText: 'Select a table ...'
                ,store: [
                  [% FOREACH table IN lf.table2path.keys.sort -%]
                    ['[% lf.table2path.item(table) %]', '[% table %]'],
                  [% END -%]
                ]
                ,listeners: {
                    beforeselect: function(combo, record, index) {
                        window.location = '[% c.req.base %]' + record.data.value;
                        return false;
                    }
                }
            }
        ]
    });

    var grid = new Ext.grid.EditorGridPanel({
        id: 'search-grid'
        ,el: 'list-grid'
        // ,width: 900
        ,autoHeight: true
        ,stripeRows: true
        ,title: '[% title %]'
        ,store: store
        ,loadMask: true
        ,colModel: cm
        ,trackMouseOver: true
        ,disableSelection: true
        ,listeners: {
            cellclick: function(g, row, col) {
                var rec = g.getStore().getAt(row);
                var fieldName = g.getColumnModel().getDataIndex(col);
                // var data = rec.get(fieldName);

                // reset the grid selectionModel
                g.getSelectionModel().deselectRow(row);

                if (fieldName == 'lf-multi-column') {
                    // multi rows are ignored
                    return false;
                }

                if (fieldName == 'lf-delete-column') {
                    if (row == 0) {
                        // edit row is ignored
                        return false;
                    }

                    var data = rec.get('[% lf.main.pk %]');
                    Ext.MessageBox.confirm (
                        'Confirm Delete [% lf.main.title %]'
                        ,'Are you sure you want to delete [% lf.main.title %] "' + data + '"?'
                        ,function (btn) {
                            if (btn == 'yes') {
                                grid.loadMask.el.mask();
                                Ext.Ajax.request({
                                    url: '[% c.req.base %]delete/[% lf.main.path %]'
                                    ,params: {
                                        key: data
                                    }
                                    ,success: function(response,options) {
                                        grid.loadMask.el.unmask();
                                        Ext.MessageBox.alert(
                                            'Success'
                                            ,'Entry successfully deleted.'
                                            ,function() {
                                                // XXX private parts of pagingtoolbar
                                                pagebar.doLoad(pagebar.cursor);
                                            }
                                        );
                                    }
                                    ,failure: function(response,options) {
                                        grid.loadMask.el.unmask();
                                        Ext.MessageBox.alert(
                                            'Problem deleting entry'
                                            ,'Sorry, the entry could not be deleted. '
                                                + 'Is its primary key referenced in another table?'
                                        );
                                    }
                                });
                            }
                        }
                    );

                    return false;
                }

                if (row == 0) {
                    if (isFK(fieldName) || isCheck(fieldName)) {
                        return false;
                    }

                    g.stopEditing;
                    rec.set(fieldName, '');
                    g.startEditing(row,col);
                }
                else {
                    // draw the window!
                    var win = generate_win();
                    win.show(this);

                    // handle for the form
                    var mainform = Ext.getCmp('form-panel').getForm();

                    // import data from grid row
                    mainform.loadRecord(rec);

                    // fill in reverse relations
                    mainform.setValues({
                      [% FOREACH table IN lf.tab_order.keys %]
                      [% NEXT IF lf.tab_order.item(table) == 1 %]
                        [% FOREACH col IN lf.table_info.$table.cols.keys %]
                        [% NEXT UNLESS lf.table_info.$table.cols.$col.is_fk
                                AND NOT lf.table_info.$table.cols.$col.editable %]
                          '[% lf.table_info.$table.table %].[% col %]': rec.data['[% lf.main.pk %]'],
                        [% END %]
                      [% END %]
                    });
                }
            }
            ,beforeedit: function(e) {
                // cancel ENTER key driven edits from the filter row
                // also cancel on the filter row itself if a FK
                if ((e.row != 0) || isFK(e.field) || isCheck(e.field)) { return false }
            }
            ,columnmove: function(oldidx, newidx) {
                // XXX private parts of pagingtoolbar
                pagebar.doLoad(pagebar.cursor);
            }
        }
        ,selModel: new Ext.grid.RowSelectionModel // req'd to deselect row
        ,bbar: pagebar
        ,viewConfig: new Ext.grid.GridView({
            autoFill: true
            ,fiorceFit: true
            ,scrollOffset: 0
            ,getRowClass: function (record, index) {
                if (pagebar.disabled == true && index == 0) {
                    return 'half-grey';
                }
            }
        })
    });