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

{{ define "widget-content" }}
<ul class="list list-gap-14 list-collapsible">
    {{ range $i, $category := .Categories }}
    {{ $shouldCollapseItem := shouldCollapse $i $.CollapseAfter }}
    <li class="twitch-category thumbnail-container{{ if $shouldCollapseItem }} list-collapsible-item{{ end }}" {{ if $shouldCollapseItem }}style="--animation-delay: {{ itemAnimationDelay $i $.CollapseAfter }};"{{ end }}>
        <div class="flex gap-10 items-center">
            <img class="twitch-category-thumbnail thumbnail" loading="lazy" src="{{ $category.AvatarUrl }}" alt="">
            <div class="shrink min-width-0">
                <a class="size-h3 color-highlight text-truncate block" href="https://www.twitch.tv/directory/category/{{ $category.Slug }}" target="_blank" rel="noreferrer">{{ $category.Name }}</a>
                <ul class="list-horizontal-text">
                    <li>{{ $category.ViewersCount | formatViewerCount }} viewers</li>
                    {{ if $category.IsNew }}
                    <li class="color-primary">NEW</li>
                    {{ end }}
                </ul>
                <ul class="list-horizontal-text flex-nowrap">
                    {{ range $i, $tag := $category.Tags }}
                        {{ if eq $i 0 }}
                        <li class="shrink-0">{{ $tag.Name }}</li>
                        {{ else }}
                        <li class="text-truncate shrink min-width-0">{{ $tag.Name }}</li>
                        {{ end }}
                    {{ end }}
                </ul>
            </div>
        </div>
    </li>
    {{ end }}
</ul>
{{ if gt (len .Categories) $.CollapseAfter }}
<label class="list-collapsible-label"><input type="checkbox" autocomplete="off" class="list-collapsible-input"></label>
{{ end }}
{{ end }}