{{ template "base.html" . }}

{{ define "content" }}
<div class="content-block">
    <div class="flex flex-column pa3 mb2 br3">
        <div class="mb2 flex items-center">
            <img class="avatar-icon lite mr2" src="{{ .Snippet.OwnerAvatarUrl }}"/>
			<a class="user" href="{{ .Snippet.OwnerUrl }}">{{ .Snippet.OwnerName }}</a>
			<a class="tr" style="flex: 1 1 auto;" href="{{ .Snippet.Url }}">{{ timehtml (relativedate .Snippet.Date) .Snippet.Date }}</a>
        </div>
        <p class="mb2">{{ .Snippet.Description }}</p>
        <div>
            {{ range .Snippet.EmbedMedia }}
                {{ if eq .Type mediaimage }}
                    <img src="{{ .AssetUrl }}">
                {{ else if eq .Type mediavideo }}
                    <video src="{{ .AssetUrl }}" preload="metadata" controls>
                {{ else if eq .Type mediaaudio }}
                    <audio src="{{ .AssetUrl }}" controls>
                {{ else if eq .Type mediaembed }}
                    <div class="mb3 aspect-ratio aspect-ratio--16x9">
                        {{ .EmbedHTML }}
                    </div>
                {{ end }}
            {{ end }}
        </div>
    </div>
</div>
{{ end }}