? my $app = shift;
<html>
  <head>
    <title>Logs</title>
    <link type="text/css" rel="stylesheet" href="<?= $app->static_url("alice.css") ?>" />
    <script type="text/javascript">
      sendQuery = function (form) {
        $('submit').value = "Searching...";
        $('submit').disable();
        new Ajax.Request("/search", {
          method: "get",
          parameters: form.serialize(),
          onSuccess: function (transport) {
            $('logresults').replace(transport.responseText);
            $('submit').value = "Search";
            $('submit').enable();
          }
        });
        return false;
      };
      
      expandRange = function(channel, id, li) {
        new Ajax.Request('/range', {
          method: "post",
          parameters: {id: id, channel: channel},
          onSuccess: function (transport) {
            $$('.context').each(function (item) {
              item.select(".context_wrapper").invoke("remove");
              item.removeClassName("context");
            });
            var data = transport.responseText;
            li.addClassName("context");
            data = data.evalJSON();
            li.insert({top: data[0], bottom: data[1]});
          }
        });
      };
    </script>
  </head>
  <body>
    <div id="logsearch">
<form id="query" onsubmit="return sendQuery(this)">
  <input type="search" name="body" id="body" style="width:210px;margin-left:5px" placeholder="Message" autofocus />
  <input style="width:100px" type="search" name="nick" id="nick" placeholder="Nick" />
  <input style="width:100px" type="search" name="channel" id="channel" placeholder="Channel"/>
  <input type="submit" value="Search" id="submit" />
</form>
</div>
<ul id="logresults">
</ul>
  <script type="text/javascript" src="<?= $app->static_url("alice.js") ?>"></script>
</body>
</html>
