{{ 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>
			{{ if snippetimage .Snippet }}
                <img src="{{ .Snippet.AssetUrl }}" />
			{{ else if snippetvideo .Snippet }}
                <video src="{{ .Snippet.AssetUrl }}" preload="metadata" controls />
			{{ else if snippetaudio .Snippet }}
                <audio src="{{ .Snippet.AssetUrl }}" controls />
			{{ else if snippetyoutube .Snippet }}
                <div class="mb3 aspect-ratio aspect-ratio--16x9">
                    <iframe class="aspect-ratio--object" src="https://www.youtube-nocookie.com/embed/{{ .Snippet.YoutubeID }}" allow="accelerometer; encrypted-media; gyroscope;" allowfullscreen frameborder="0" />
                </div>
			{{ end }}
        </div>
    </div>
</div>
{{ end }}