{{template "base" .}}
{{define "head"}}
<script src="/static/js/stream.js"></script>
{{end}}
{{define "content"}}
<div>
    <canvas id="canvas" width="1280" height="720">Not supported</canvas>
    <img src="{{ .GetCurrentColorURL }}" id="current_color_stream" hidden>
    <img src="{{ .GetPreviousURL }}" width="425" height="240">
    <img src="{{ .GetDebugURL }}" width="425" height="240">
    <img src="{{ .GetCurrentURL }}" width="425" height="240">
</div>
<table class="pure-table pure-table-horizontal pure-table-striped">
    <caption>Watches</caption>
    <thead>
        <tr>
            <th>Name</th>
            <th colspan="3">Color</th>
            <th colspan="4">Area</th>
        </tr>
        <tr>
            <th></th>
            <th>R</th>
            <th>G</th>
            <th>B</th>
            <th>MinX</th>
            <th>MinY</th>
            <th>MaxX</th>
            <th>MaxY</th>
        </tr>
    </thead>
    {{range $watchArea := .WatchAreas}}
        <tr>
            <td>{{ $watchArea.Name }}</td>
            <td>{{ $watchArea.Color.R }}</td>
            <td>{{ $watchArea.Color.G }}</td>
            <td>{{ $watchArea.Color.B }}</td>
            <td>{{ $watchArea.Area.Min.X }}</td>
            <td>{{ $watchArea.Area.Min.Y }}</td>
            <td>{{ $watchArea.Area.Max.X }}</td>
            <td>{{ $watchArea.Area.Max.Y }}</td>
        </tr>
    {{end}}
</table>
{{end}}