{{define "content"}}
{{ if .error }}
    Could not find entry
{{ end }}

<div class="row">
    <div class="d-flex justify-content-around">
        <div class="card d-flex justify-content-around">
            <div class="card-body">
                <div class="card-title text-center h4">
                    {{ .Watch.Name }}
                    <a href="/watch/edit/{{ .Watch.ID }}" class="btn btn-sm btn-success">Edit</a>
                </div>
                {{ if not .Watch.CronEntry }}
                <h5>No Schedule</h5>
                {{ else }}
                <div class="row">
                    <div class="col-4">Previous</div>
                    <div class="col-8">{{ .Watch.CronEntry.Prev.Format "2006-01-02 15:04:05" }}</div>
                </div>
                <div class="row">
                    <div class="col-4">Next</div>
                    <div class="col-8">{{ .Watch.CronEntry.Next.Format "2006-01-02 15:04:05" }}</div>
                </div>
                {{ end }}

            </div>
          </div>
    </div>
</div>

<canvas id="chartCanvas">

</canvas>
{{end}}


{{ define "scripts"}}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>

<script>
    function canvasInit() {
        const ctx = document.getElementById("chartCanvas").getContext('2d');
        const colors = [
            "rgba(255, 0, 41, 1)",
            "rgba(55, 126, 184, 1)",
            "rgba(102, 166, 30, 1)",
            "rgba(152, 78, 163, 1)",
            "rgba(0, 210, 213, 1)",
            "rgba(255, 127, 0, 1)",
            "rgba(175, 141, 0, 1)",
            "rgba(127, 128. 205, 1)",
            "rgba(179, 233, 0, 1)",
            "rgba(196, 46, 96, 1)",
            "rgba(166, 86, 40, 1)",
            "rgba(247, 129, 191, 1)",
            "rgba(141, 211, 199, 1)",
            "rgba(190, 186, 218, 1)",
            "rgba(251, 128, 114, 1)",
            "rgba(128. 177, 211, 1)"
        ];
        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets:[
                    {{ range $name, $values := .ValueMap }}
                    {
                        label: {{ $name }},
                        fill: false,
                        borderColor: colors[{{ index $.colorMap $name}}],
                        data: [
                            {{ range $value := $values }}
                                {x: luxon.DateTime.fromISO('{{ $value.Time.Format "2006-01-02T15:04:05Z07:00" }}'), y: '{{ $value.Value }}'},
                            {{ end }}
                        ],
                    },
                    {{ end }}]
            },
            options: {
                scales: {
                    x: {
                        type: 'time'
                    },
                    y: {
                        beginAtZero: true,
                    },
                }
            }
        });
        console.log(chart);
    }
    document.addEventListener('DOMContentLoaded', canvasInit, false);
</script>
{{ end }}