[% WRAPPER 'default/base.tt2' %]
<div id='oils-acq-list-header' class='container'>
    <div id='oils-acq-picklist-my-list-header'>
        <div id='oils-acq-list-header-label'>My Selection Lists</div>
    </div>
    <div id='oils-acq-picklist-all-list-header'>
        <div id='oils-acq-list-header-label'>All Selection Lists</div>
    </div>
</div>

<script src='[% ctx.media_prefix %]/js/ui/default/acq/picklist/view_list.js'> </script>

<script>
    if(location.href.match(/listall$/)) {
        listAll = true;
        dojo.style('oils-acq-picklist-my-list-header', 'visibility', 'hidden');
        dojo.style('oils-acq-picklist-my-list-header', 'display', 'none');
    } else {
        dojo.style('oils-acq-picklist-all-list-header', 'visibility', 'hidden');
        dojo.style('oils-acq-picklist-all-list-header', 'display', 'none');
    }
</script>
<script>
    function formatName(inDatum) {
        for(var i in plCache){
            var pl = plCache[i];
            var id = pl.id();
            if (inDatum  == pl.name()){
                return '<a href="[% ctx.base_uri %]/acq/picklist/view/'+id+'">'+inDatum+'</a>';
            }
        }
    }
</script>
<div class='oils-acq-actions-div'>
  <div dojoType="dijit.form.DropDownButton">
    <span>New Selection List</span>
    <div dojoType="dijit.TooltipDialog" execute="createPL(arguments[0]);">
      <table class='dijitTooltipTable'>
        <tr>
          <td><label for="name">Name:</label></td>
          <td><input dojoType="dijit.form.TextBox" name="name"/></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="saveChanges();" disabled='disabled' jsId="plSaveButton">Save Changes</button>
    <button dojoType="dijit.form.Button" onclick="deleteFromGrid();">
        Delete Selected
    </button>
</div>

<div dojoType="dijit.layout.ContentPane" layoutAlign="top">
    <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style='height:600px;'>
        <table jsId="plListGrid" dojoType="dojox.grid.DataGrid" query="{id: '*'}" rowSelector='20px'>
            <thead>
                <tr>
                    <th field="id">ID</th>
                    <th field="name" width='auto' editable='true'
                        cellType='dojox.grid.cells._Widget'
                        widgetClass='dijit.form.TextBox' formatter='formatName'>Name</th>
                    <th field="owner" get='getOwnerName'>Selector</th>
                    <th field="create_time" width='auto' get='getDateTimeField'>Create Time</th>
                    <th field="edit_time" width='auto' get='getDateTimeField'>Edit Time</th>
                    <th field="entry_count">Entry Count</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

[% END %]