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

{{ define "widget-content-classes" }}widget-content-frameless{{ end }}

{{ define "widget-content" }}
<div class="carousel-container">
    <div class="videos cards-horizontal carousel-items-container">
        {{ range .Videos }}
        <div class="card widget-content-frame thumbnail-container">
            <img class="video-thumbnail thumbnail" loading="lazy" src="{{ .ThumbnailUrl }}" alt="">
            <div class="margin-top-10 margin-bottom-widget flex flex-column grow padding-inline-widget">
                <a class="video-title color-primary-if-not-visited" href="{{ .Url }}" target="_blank" rel="noreferrer" title="{{ .Title }}">{{ .Title }}</a>
                <ul class="list-horizontal-text flex-nowrap margin-top-7">
                    <li class="shrink-0" title="{{ .TimePosted | formatTime }}" {{ dynamicRelativeTimeAttrs .TimePosted }}>{{ .TimePosted | relativeTime }}</li>
                    <li class="shrink min-width-0">
                        <a class="block text-truncate" href="{{ .AuthorUrl }}" target="_blank" rel="noreferrer">{{ .Author }}</a>
                    </li>
                </ul>
            </div>
        </div>
        {{ end }}
    </div>
</div>
{{ end }}
