{{ template "widget-base.html" . }}

{{ define "widget-content" }}
<div class="widget-small-content-bounds dns-stats">
    <div class="flex text-center justify-between dns-stats-totals">
        <div>
            <div class="color-highlight size-h3">{{ .Stats.TotalQueries | formatNumber }}</div>
            <div class="size-h6">QUERIES</div>
        </div>
        <div>
            <div class="color-highlight size-h3">{{ .Stats.BlockedPercent }}%</div>
            <div class="size-h6">BLOCKED</div>
        </div>
        {{ if gt .Stats.ResponseTime 0 }}
        <div>
            <div class="color-highlight size-h3">{{ .Stats.ResponseTime | formatNumber }}ms</div>
            <div class="size-h6">LATENCY</div>
        </div>
        {{ else }}
        <div class="cursor-help" data-popover-type="text" data-popover-text="Total number of blocked domains from all adlists" data-popover-max-width="200px" data-popover-text-align="center">
            <div class="color-highlight size-h3">{{ .Stats.DomainsBlocked | formatViewerCount }}</div>
            <div class="size-h6">DOMAINS</div>
        </div>
        {{ end }}
    </div>

    <div class="dns-stats-graph margin-top-15">
        <div class="dns-stats-graph-gridlines-container">
            <svg class="dns-stats-graph-gridlines" shape-rendering="crispEdges" viewBox="0 0 1 100" preserveAspectRatio="none">
                <g stroke="var(--color-graph-gridlines)" stroke-width="1">
                    <line x1="0" y1="1" x2="1" y2="1" vector-effect="non-scaling-stroke" />
                    <line x1="0" y1="25" x2="1" y2="25" vector-effect="non-scaling-stroke" />
                    <line x1="0" y1="50" x2="1" y2="50" vector-effect="non-scaling-stroke" />
                    <line x1="0" y1="75" x2="1" y2="75" vector-effect="non-scaling-stroke" />
                    <line x1="0" y1="99" x2="1" y2="99" vector-effect="non-scaling-stroke" stroke="var(--color-progress-bar-border)"/>
                </g>
            </svg>
        </div>

        <div class="dns-stats-graph-columns">
            {{ range $i, $column := .Stats.Series }}
            <div class="dns-stats-graph-column" data-popover-type="html" data-popover-position="above" data-popover-show-delay="500">
                <div data-popover-html>
                    <div class="flex text-center justify-between gap-25">
                        <div>
                            <div class="color-highlight size-h3">{{ $column.Queries | formatNumber }}</div>
                            <div class="size-h6">QUERIES</div>
                        </div>
                        <div>
                            <div class="color-highlight size-h3">{{ $column.PercentBlocked }}%</div>
                            <div class="size-h6">BLOCKED</div>
                        </div>
                    </div>
                </div>
                {{ if gt $column.PercentTotal 0}}
                <div class="dns-stats-graph-bar" style="--bar-height: {{ $column.PercentTotal }}">
                    {{ if ne $column.Queries $column.Blocked }}
                        <div class="queries"></div>
                    {{ end }}
                    {{ if or (gt $column.Blocked 0) (and (lt $column.PercentTotal 15) (lt $column.PercentBlocked 10)) }}
                        <div class="blocked" style="flex-basis: {{ $column.PercentBlocked }}%"></div>
                    {{ end }}
                </div>
                {{ end }}
                <div class="dns-stats-graph-time">{{ index $.TimeLabels $i }}</div>
            </div>
            {{ end }}
        </div>
    </div>

    {{ if .Stats.TopBlockedDomains }}
    <details class="details margin-top-40">
        <summary class="summary">Top blocked domains</summary>
        <ul class="list list-gap-4 list-with-transition size-h5">
            {{ range .Stats.TopBlockedDomains }}
            <li class="flex justify-between align-center">
                <div class="text-truncate rtl">{{ .Domain }}</div>
                <div class="text-right" style="width: 4rem;"><span class="color-highlight">{{ .PercentBlocked }}</span>%</div>
            </li>
            {{ end }}
        </ul>
    </details>
    {{ end }}
</div>
{{ end }}