#{if play.mode.toString() == 'DEV'}
<h2>Redis Cache Monitor</h2>

<h3>Cache Contents</h3>
<table>
<div id="cacheContents"></div>
</table>

<h3>Instance Information</h3>
<table>
<div id="cacheInstance">Loading...</div>
</table>

<h3>Client Information</h3>
<table>
<div id="cacheClientInfo">Loading...</div>
</table>

<script type="text/javascript">
  
  $(function() {
    cacheContents();
    cacheInstance();
    cacheClientInfo();
  });
  
  function cacheContents() {
    $.getJSON('/cache/cacheContents', function(json) {
      var $div = $('<div id="cacheContents" />');
    
      for(key in json) {
        var value = json[key];
        $div.append('<tr><td align="left">' + key + '</td><td> => </td><td align="left">' + value + '</td></tr>');
      }
      $('#cacheContents').replaceWith($div);
      setTimeout(function(){ cacheContents() }, 2000);
    });
  }
  
  function cacheInstance() {
    $.getJSON('/cache/cacheInstance', function(json) {
      var $div = $('<div id="cacheInstance" />');
      
      for(key in json) {
        var value = json[key];
        $div.append('<tr><td align="left">' + key + '</td><td> => </td><td align="left">' + value + '</td></tr>');
      }
      $("#cacheInstance").replaceWith($div);
    });
  }

  function cacheClientInfo() {
    $.getJSON('/cache/cacheClientInfo', function(json) {      
      var $div = $('<div id="cacheClientInfo" />');
      for(key in json) {
        var value = json[key];
        $div.append('<tr><td align="left">' + key + '</td><td> => </td><td align="left">' + value + '</td></tr>');
      }
      $('#cacheClientInfo').replaceWith($div);
      setTimeout(function(){ cacheClientInfo() }, 2000);
    });
  }
</script>

#{/if}