{{define "title"}}
GoWatch {{ .Watch.Name }}
{{end}}

{{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="{{.urlPrefix}}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>
{{ if .numericalMap }}
    <canvas id="chartCanvas">

    </canvas>
{{ end }}

{{ $first := true }}
{{ if .categoricalMap }}
    <ul class="nav nav-tabs" id="categoricalTab" role="tablist">
        {{ range $name, $values := .categoricalMap }}
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ if $first }}active{{ end }}" id="{{ $name }}-tab" data-bs-toggle="tab" data-bs-target="#{{ $name }}-tab-pane" type="button" role="tab" aria-controls="{{ $name }}-tab-pane" aria-selected="{{ if $first }}true{{ else }}false{{ end }}">{{ $name }}</button>
            </li>
            {{ $first = false }}
        {{ end }}
    </ul>
    <div class="tab-content" id="categoricalTabContent">
        {{ $first = true }}
        {{ range $name, $values := .categoricalMap }}
        <div class="tab-pane {{ if $first }}active{{ end }}" id="{{ $name }}-tab-pane" role="tabpanel" aria-labelledby="{{ $name }}-tab" tabindex="0">
            <table class="table">
                <thead>
                    <tr>
                        <th>When</th>
                        <th>Value</th>
                    </tr>
                </thead>
                <tbody>
                {{ range $value := $values }}
                    <tr>
                        <td>{{ $value.Time.Format "2006-01-02 15:04:05" }}</td>
                        <td>{{ $value.Value }}</td>
                    </tr>
                {{ end }}
                </tbody>
            </table>
        </div>
            {{ $first = false }}
        {{ end }}
    </div>
{{ end }}
  

{{end}}

{{ define "scripts"}}
{{ if .numericalMap }}
<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 := .numericalMap }}
                    {
                        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,
                    },
                }
            }
        });
    }
    document.addEventListener('DOMContentLoaded', canvasInit, false);
</script>
{{ end }}
{{ end }}