<div id="itemActionsBar" class="form">
  <button class="btn" data-toggle="modal" onclick="addListValue('<%= connectionId %>','<%= key %>')"
          style="margin-right: 5px">Add New Value...
  </button>
  <button class="btn btn-danger" onclick="deleteKey('<%= connectionId %>','<%= key %>')">Delete Key</button>
  TTL: <%= ttl %>
  <div id="pageNav" class="input-append input-prepend">
    <button type="button" class="btn" onclick="loadKey('<%= connectionId %>','<%= key %>','0')"
    <% if(beginning){%>disabled="disabled" <%}%>
    ><i class="icon-fast-backward"></i></button>
    <button type="button" class="btn" onclick="loadKey('<%= connectionId %>','<%= key %>','<%= items[0].number - 20%>')"
    <% if(beginning){%>disabled="disabled" <%}%>
    ><i class="icon-backward"></i></button><input class="span1" id="pageIndex" type="text"
                                                  value="<%= items[0].number %>"></input>
    <button id="gotoIndexButton" class="btn btn-primary" type="button"
            onclick="loadKey('<%= connectionId %>','<%= key%>', $('#pageIndex').val())">Goto Index
    </button>
    <button type="button" class="btn"
            onclick="loadKey('<%= connectionId %>','<%= key %>','<%= items[items.length-1].number + 1%>')"
    <% if(end){%>disabled="disabled" <%}%>
    ><i class="icon-forward"></i></button>
    <button type="button" class="btn" onclick="loadKey('<%= connectionId %>','<%= key %>','<%= length - 20 %>')"
    <% if(end){%>disabled="disabled" <%}%>
    ><i class="icon-fast-forward"></i></button>
  </div>
</div>
<div id="itemData">
  <table class="table">
    <thead>
    <th>#</th>
    <th>Value</th>
    </thead>
    <tbody>
    <% items.forEach(function(item) { %>
    <tr>
      <td><%= item.number %></td>
      <td><%= item.value %></td>
    </tr>
    <% }) %>
    </tbody>
  </table>
</div>
<script type="text/javascript">
  $(document).ready(function () {
    $('.table tbody tr').dblclick(function (event) {
      var row = event.currentTarget;
      var index = row.children[0].innerHTML.toString();
      var value = row.children[1].innerHTML.toString();
      var key = "<%= key %>";
      var connectionId = "<%= connectionId %>";
      editListRow(connectionId, key, index, value);
    });
  });
</script>
