<!DOCTYPE html>
<html>
<head>
  <title>Log Viewer</title>
  <link rel="stylesheet" type="text/css" href="/style.css" />
</head>

<body onload="document.query.level.value = {{.Level}}">

<h2>Log a message:</h2>
<form name="post" action="/post" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="search" value="">
  Log level:
  <select name="level">
    {{range .AppLevels}}
    <option value="{{.Value}}">{{.Name}}</option>
    {{end}}
  </select>
  <input name="message" size="60"/>
  <input type="submit" value="Log"
   onclick="document.post.search.value = window.location.search;">
</form>

<h2>Query logs:</h2>
<form id="query" name="query" action="/" method="GET">
  Version:
  <input type="text" name="version" value="{{.Version}}"
   onchange="this.form.submit();"/>
  Minimum log level:
  <select name="level" onchange="this.form.submit();">
    <option value="-1">None</option>
    {{range .AppLevels}}
    <option value="{{.Value}}">{{.Name}}</option>
    {{end}}
  </select>
  Count:
  <input type="text" name="count" value="{{.Count}}"
   onchange="this.form.submit();"/>
  <input type="submit" value="Query">
</form>

{{if .Error}}
<div id="error">
 <strong>Aw, Snap!</strong>
 Failed to read logs: <i>{{.Error}})</i>
 {{if not .Logs}}
 <p>
 Are you a member of the Log API trusted tester program?
 {{end}}
</div>
{{end}}

<div id="logs">
{{if .Next}}
<a href="/?{{.Next}}">Next {{.Count}} &gt;</a>
{{else}}
Next {{.Count}} &gt;
{{end}}
<ol>
{{range .Logs}}
  <li class="log">
  <ol>
  <li>
  <h5>
    <span>{{.StartTime.Format "2006-01-02 15:04:05.000 MST"}}</span>
    <span class="path">{{.Resource}}</span>
    <span>{{.Status}}</span>
    <span>{{.Latency}}</span>
    <span>{{.ResponseSize}}</span>
    <span>{{.UserAgent}}</span>
  </h5>
  </li>
  {{range .AppLogs}}
    <li><h5>
    <span class="severity level_{{.Level}}">{{levelInitial .Level}}</span>
    {{.Time.Format "2006-01-02 15:04:05.000 MST"}}
    <span class="snippet">{{.Message}}</span>
    </h5></li>
  {{end}}
  </ol>
  </li>
{{end}}
</ol>
</div>
</body></html>
