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

{{ define "widget-content" }}
<ul class="list list-gap-14 collapsible-container" data-collapse-after="{{ .CollapseAfter }}">
    {{ range .Categories }}
    <li class="twitch-category thumbnail-parent">
        <div class="flex gap-10 items-start">
            <img class="twitch-category-thumbnail thumbnail" loading="lazy" src="{{ .AvatarUrl }}" alt="">
            <div class="min-width-0">
                <a class="size-h3 color-highlight text-truncate block" href="https://www.twitch.tv/directory/category/{{ .Slug }}" target="_blank" rel="noreferrer">{{ .Name }}</a>
                <ul class="list-horizontal-text">
                    <li>{{ .ViewersCount | formatApproxNumber }} viewers</li>
                    {{ if .IsNew }}
                    <li class="color-primary">NEW</li>
                    {{ end }}
                </ul>
                <ul class="list-horizontal-text flex-nowrap">
                    {{ range $i, $tag := .Tags }}
                        {{ if eq $i 0 }}
                        <li class="shrink-0">{{ $tag.Name }}</li>
                        {{ else }}
                        <li class="text-truncate min-width-0">{{ $tag.Name }}</li>
                        {{ end }}
                    {{ end }}
                </ul>
            </div>
        </div>
    </li>
    {{ end }}
</ul>
{{ end }}
