{{template "base" .}}
{{define "head"}}
<script src="/static/js/moments.js"></script>
{{end}}
{{define "content"}}

<img src="#" id="moment_current_image">
<input type="range" min="0" max="1" value="0" id="moment_slider">
<a href="#" onclick="next_moment()">View</a>
<table class="pure-table pure-table-horizontal pure-table-striped">
    <thead>
        <th>Moment</th>
        <th>Time</th>
        <th>#</th>
        <th>View</th>
    </thead>
    <tbody>
        {{range $i, $moments := .Moments}}
            <tr>
                <td>{{$i}}</td>
                <td>{{index $moments 0}}</td>
                <td>{{len $moments}}</td>
                <td><a href="#" onclick="set_current_moment({{$i}})">View</a></td>
            </tr>
        {{end}} 
    </tbody>
</table>

<script>
    let streamName = "{{.Stream.Name}}";
    let watchAreaName = "{{.WatchArea.Name}}";
    let interval = {{.Stream.MotionInterval}};
    let moments = [
    {{range $moment := .Moments}}
        [
        {{range $image := $moment}}
            '{{$image}}',
        {{end}}
],
    {{end}}
    ];
</script>
{{end}}