{{ define "check_list" }}
<div class="flex flex-col gap-1" hx-swap="outerHTML" hx-get="/monitors/{{ .Monitor.ID }}/checks" hx-trigger="every 60s">
    <div class="flex justify-between items-center w-full gap-1.5 relative">
        {{ $checkMaxIndex := sub (len $.Checks) 1 }}
        {{ range $i, $v := .Skeletons }}
        {{ $currentIndex := sub 59 $i }}
        {{ $check := "" }}
        {{ if lt $currentIndex (len $.Checks) }}
        {{ $check = index $.Checks $currentIndex }}
        {{ end }}
        <div
            class="flex-1 tooltip justify-center items-center {{ if gt $i 30 }} {{ else if gt $i 25 }} hidden md:inline-flex  {{ else }} hidden lg:inline-flex  {{ end }} ">
            <div class="tooltip-content tooltip-bottom flex flex-col gap-1 bg-light">
                {{ if $check }}
                <div class="stats shadow bg-white">
                    <div class="stat flex flex-col gap-1 justify-stretch">
                        <div class="stat-desc">
                            <div class="badge badge-soft {{ $check.BadgeClass }} w-full">{{ $check.StatusCode }} {{
                                $check.StatusText }}</div>
                        </div>
                        <div class="stat-value text-center text-sm font-medium">
                            {{ $check.CreatedAt.Format "2006-01-02 15:04" }}, <span class="font-semibold">{{
                                $check.ResponseTimeMs
                                }}</span>ms
                        </div>
                    </div>
                </div>
                {{ else }}
                {{ end }}
            </div>
            <div class="relative h-[64px] w-[6px] rounded-full bg-neutral-100 overflow-hidden"
                id="{{ if $check }}monitors-{{ $check.MonitorID }}-checks-{{ $check.ID }}{{ else }}placeholder-{{ $i }}{{ end }}">
                <div id="{{ if $check }}monitors-{{ $check.MonitorID }}-index-{{ $currentIndex }}{{ end }}"
                    class="absolute w-full bottom-0 rounded-lg transition-all duration-300 ease-in-out {{ if $check }} {{ $check.HeightClass $.MaxTime }} {{ $check.ColorClass }} {{ else }}bg-neutral-200 {{ end }} ">
                </div>
            </div>
        </div>
        {{ end }}
        <div class="relative h-[64px] w-[6px] overflow-x-hidden rounded-full bg-neutral-100 ">
            <div
                class="absolute w-[6px] bottom-0 rounded-lg transition-all duration-300 ease-in-out bg-neutral-200 h-full animate-pulse">
            </div>
        </div>

        {{ if eq (len $.Checks ) 0}}
        <div class="absolute inset-0 flex items-center justify-center z-[999999] opacity-80 text-xs animate-pulse">
            waiting...
        </div>
        {{ end }}
    </div>

    <div class="w-full  justify-between text-xs opacity-60 hidden lg:flex">
        <div>{{ .StartTime }}</div>
        <div>{{ .EndTime }}</div>
    </div>
</div>
{{ end }}