<!--
Copyright 2024 The Go Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!doctype html>
<html>
  {{template "head" .}}
  <body>
    <div class="section" id="header">
      {{template "nav-title" .}}
      <p>All times are in <span id="tz"></span>.</p>
      <script>
        var timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        document.getElementById("tz").innerHTML = timezone;
      </script>
      {{template "actionlog-form" .}}
    </div>
    {{template "actionlog-result" .}}
   </body>
</html>

{{define "dur-unit"}}
  <option value="minutes"{{if eq . "minutes"}} selected{{end}}>minutes</option>
  <option value="hours"{{if eq . "hours"}} selected{{end}}>hours</option>
  <option value="days"{{if eq . "days"}} selected{{end}}>days</option>
  <option value="weeks"{{if eq . "weeks"}} selected{{end}}>weeks</option>
{{end}}

{{define "actionlog-form"}}
<form id="form" action="{{.ID.Endpoint}}" method="GET">
  <input type="hidden" id="form-tz" name="timezone" value=""/>
  <script>
    document.getElementById("form-tz").setAttribute("value", timezone);
  </script>
  <span>
    <label for="filter">Filter</label>
    <input id="filter" type="text" size=75 name="filter" value="{{.Filter}}"/>
  </span>
  <div style="font-size: smaller; margin-top: 0.5rem; margin-bottom: 1rem">
    Examples: <code>Kind:Fixer</code>, <code>RequiresApproval=true</code><br/>
    Case matters. Boolean fields must be compared with <code>=true</code> or <code>=false</code>.
    OR, AND and NOT must be in all caps.<br/>
    See <a href="https://google.aip.dev/160">AIP 160</a> for more.
  </div>
  <table>
    <tr>
      <td>
        {{- /* Resist the temptation to factor out the endpoint controls into
              a single template. That will require that id values are substituted
              in, which causes safehtml to complain that they aren't safe identifiers.
              It ends up being more complicated than it's worth.
        */ -}}
        <fieldset>
          <legend>Start</legend>
          <div>
            <input type="radio" name="start" id="start-fixed" value="fixed"
              {{if eq .Start.Radio "fixed"}}checked{{end}}/>
            <label for="start-fixed">Beginning</label>
          </div>
          <div>
            <input type="radio" name="start" id="start-dur" value="dur"
              {{if eq .Start.Radio "dur"}}checked{{end}}/>
            <input type="text" id="start-dur" size="4" name="start-dur-num" value="{{.Start.DurNum}}" autofocus/>
              <select name="start-dur-unit">
                {{template "dur-unit" .Start.DurUnit}}
              </select>
            <label for="start-dur">before end</label>
          </div>
          <div>
            <input type="radio" name="start" id="start-date" value="date"
              {{if eq .Start.Radio "date"}}checked{{end}}/>
            <label for="start-date">From</label>
            <input type="datetime-local" name="start-date" value="{{.Start.Date}}"/>
          </div>
        </fieldset>
      </td>

      <td>
        <fieldset>
          <legend>End</legend>
          <div>
            <input type="radio" name="end" id="end-fixed" value="fixed"
              {{if eq .End.Radio "fixed"}}checked{{end}}/>
            <label for="end-fixed">End</label>
          </div>
          <div>
            <input type="radio" name="end" id="end-dur" value="dur"
              {{if eq .End.Radio "dur"}}checked{{end}}/>
              <input type="text" id="end-dur" size="4" name="end-dur-num" value="1" autofocus/>
              <select name="end-dur-unit">
                {{template "dur-unit" .End.DurUnit}}
              </select>
            <label for="end-dur">after start</label>
          </div>
          <div>
            <input type="radio" name="end" id="end-date" value="date"
              {{if eq .End.Radio "date"}}checked{{end}}/>
            <label for="end-date">To</label>
            <input type="datetime-local" name="end-date" value="{{.End.Date}}"ga/>
          </div>
        </fieldset>
      </td>

      <td> {{template "submit" .}} </td>
    </tr>
  </table>
</form>
{{end}}

{{define "actionlog-result"}}
<script>
  // Toggle the hidden state of a row containing the action.
  // Also change the button label accordingly.
  function toggleAction(event) {
    let row = document.getElementById(event.target.dataset.rowid);
    row.hidden = !row.hidden;
    // event.target is the button.
    event.target.value = row.hidden? 'Show': 'Hide';
  }
</script>

{{if .StartTime}}
<div class="section" id="result">
  <h2>Action Log from {{.StartTime}} to {{.EndTime}}</h2>

  {{with .Entries}}
  <table style="max-width:100%">
    <thead>
      <tr>
        <th>Created</th>
        <th>Kind</th>
        <th>Key</th>
        <th>Action</th>
        <th>Approval Req</th>
        <th>Approved</th>
        <th>Done</th>
        <th>Result</th>
        <th>Error</th>
      </tr>
    </thead>
    {{range $i, $e := .}}
      <tr>
        <td>{{$e.Created | fmttime}}</td>
        <td>{{$e.Kind}}</td>
        <td>{{$e.Key | fmtkey}}</td>
        <td>
          {{- /* clicking the button shows/hides the action on the following row */ -}}
          <input type="button" value="Show"
                  data-rowid="id-action-{{$i}}"
                  onclick="toggleAction(event)"/>
        </td>
        <td>{{$e.ApprovalRequired}}</td>
        <td>{{$e.Approved}}</td>
        <td>{{$e.Done | fmttime}}</td>
        <td><pre class="wrap">{{$e.Result | fmtval}}</pre></td>
        <td>{{$e.Error}}</td>
      </tr>
      <tr id="{{(print "action-" $i) | safeid}}" hidden="true">
        <td colspan="7">
          <pre class="wrap">{{$e.ActionForDisplay}}</pre>
        </td>
      </tr>
    {{end}}
    </table>
  {{else}}
    No entries.
  {{end}}
</div>
{{end}}

{{end}}