<form class="form-inline tablecontrolform">
<label>Transform </label>:  <select class="tablecontrolstate">
    <option value="groupby" selected="selected">Group By</option>
    <option value="filtering">Filtering</option>
    <option value="computed">Computed Columns</option>
  </select>
  <br/>
  <% if @tablecontrolstate == 'groupby': %>
  <label>GroupBy </label>
  <input type="text" class="pandasgroup" value="<%= @group %>"/>
  <label>Aggregation</label>
  <select class="pandasagg">
    <option value="sum">sum</option>
    <option value="mean">mean</option>
    <option value="std">std</option>
    <option value="max">max</option>
    <option value="min">min</option>
  </select>
  <% end %>
  <% if @tablecontrolstate == 'filtering': %>
  <label class="checkbox" >
    <% if @filterselected: %>
    <input type="checkbox" class="filterselected" checked="checked"/>
    <% else: %>
    <input type="checkbox" class="filterselected"/>
    <% end %>
    Filter Selection
  </label>
  <input type="button" class="clearselected btn btn-mini" value="Clear Selection"/>
  <label>
    Search
  </label>
  <input type="text" class="search input-large"/>
  <% end %>
  
  <% if @tablecontrolstate == 'computed': %>
  <table class="table">
    <thead>
      <th>
        Name
      </th>
      <th>
        Value
      </th>
      <th>
      </th>
    </thead>
    <% for computed_column in @computed_columns: %>
    <tr>
      <td>
        <%= computed_column.name %>
      </td>
      <td>
        <%= computed_column.code %>
      </td>
      <td>
        <a class="column_del" 
           name="<%= computed_column.name %>" href="#">[delete]</a>
      </td>
    </tr>
    <% end %>
    <tr>
      <td>
        <input type="text" class="computedname input-mini"/>
      </td>
      <td>
        <input type="text" class="computedtxtbox input-medium"/>
      </td>
      <td>
      </td>
    </tr>
  </table>
  <% end %>
  
</form>

<table class="bokehdatatable table table-bordered"
<% if @width: %>
       style="max-height:<%= @height %>px;max-width:<%= @width %>px"
<% else: %>
       style="max-height:<%= @height %>px"
<% end %>
       >
  <thead>
    <% if @counts: %>
    <th>counts</th>
    <% end %>
    <th>index</th>
    <% for column in @columns: %>
    <% if not @skip[column]: %>
    <th><a class="pandascolumn"><%= column %></a>
      
      <% if @sort_ascendings[column] == true: %>
      <i class="icon-caret-up"></i>
      <% else if @sort_ascendings[column] == false: %>
      <i class="icon-caret-down"></i>
      <% end %>
      
      <% end %>
    </th>
    <% end %>
  </thead>
  <% for idx in _.range(@length): %>
  <tr class="pandasrow" rownum="<%= idx %>">
    <% if @selected and @selected[idx]: %>
      <td style="background-color:<%= @colors[idx] %>"> 
        <%= @selected[idx] %>/<%= @counts[idx] %>
      </td>      
    <% else: %>
      <td> <%= @counts[idx] %> </td>
    <% end %>
    <td> <%= @index[idx] %> </td>
    <% for column in @columns: %>
      <% if not @skip[column]: %>    
      <td> <%= @data[column][idx] %> </td>
      <% end %>
    <% end %>
  </tr>
  <% end %>
</table>
<form>
  <center>
    <div class="btn-group pagination">
      <button class="btn btn-mini">First</button>
      <button class="btn btn-mini">Previous</button>
      <button class="btn btn-mini">Next</button>
      <button class="btn btn-mini">Last</button>  
    </div>
    <div class="paginatedisplay">
      Show <input type="text" class="pandassize" value="<%= @length %>"> records
      From <input type="text" class="pandasoffset" value="<%= @offset %>">
      to <%= @length + @offset %> - 
      Total : <%= @totallength %>
    </div>
  </center>
</form>
