{{template "base" .}}
{{define "content"}}
<div>
    <canvas id="canvas" width="1280" height="720">Not supported</canvas>
    <img src="/stream?name={{.Name}}" id="current_color_stream" hidden>
    <img src="/previous?name={{.Name}}" width="425" height="240">
    <img src="/debug?name={{.Name}}" width="425" height="240">
    <img src="/current?name={{.Name}}" 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}}