<div class="timeline-item flex flex-column pa3 mb2 br3" data-id="{{ .ID }}" {{ with .FilterTitle }}data-filter-title="{{ . }}"{{ end }}>
	{{/* top bar - avatar, info, date */}}
	<div class="flex items-center">
		{{ if .OwnerAvatarUrl }}
			<a class="flex flex-shrink-0" href="{{ .OwnerUrl }}">
				<img class="avatar-icon lite {{ if not .SmallInfo }}big{{ end }} {{ if .SmallInfo }}mr2{{ else }}mr3{{ end }}" src="{{ .OwnerAvatarUrl }}" />
			</a>
		{{ end }}

		<div class="overflow-hidden flex-grow-1 flex flex-column justify-center">
			{{ if .Breadcrumbs }}
				{{ template "breadcrumbs.html" .Breadcrumbs }}
			{{ end }}
			{{ if .Title }}
				<div class="f5 {{ if not .AllowTitleWrap }}nowrap truncate{{ end }}">
					{{ with .TypeTitle }}<b class="dn di-ns">{{ . }}:</b>{{ end }}
					<a href="{{ .Url }}">{{ .Title }}</a>
				</div>
			{{ end }}
			<div class="details">
				<a class="user" href="{{ .OwnerUrl }}">{{ .OwnerName }}</a>
				{{ if not .SmallInfo }}
					&mdash; {{ timehtml (relativedate .Date) .Date }}
				{{ end }}
			</div>
		</div>

		{{ if .SmallInfo }}
			<a href="{{ .Url }}">{{ timehtml (relativedate .Date) .Date }}</a>
		{{ end }}
		{{ if .Editable }}
			<a href="javascript:;" class="edit ml2">&#9998;</a>
			<div class="dn rawdesc">{{ .RawDescription }}</div>
		{{ end }}
	</div>

	{{/* content */}}

	{{ if .Description }}
		<div class="mt3 overflow-hidden relative {{ if .TruncateDescription }}mh-5{{ end }}">
			<div class="post-content">{{ trim .Description }}</div>
			{{ if .TruncateDescription }}
				<div class="excerpt-fade absolute w-100 h4 bottom-0 z-999"></div>
			{{ end }}
		</div>
		{{ if .TruncateDescription }}
			<div class="mt2">
				<a href="{{ .Url }}">Read more »</a>
			</div>
		{{ end }}
	{{ end }}

	{{ range .EmbedMedia }}
		<div class="timeline-content-box mt3 {{ if eq .Type mediaembed }}embed{{ end }} br2 overflow-hidden flex {{ if not (eq .Type mediaunknown) }}timeline-item-bg justify-center{{ end }}">
			{{ 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 }}
				{{ .EmbedHTML }}
			{{ else }}
				<div class="project-card br2 pv1 ph2">
					<a href="{{ .AssetUrl }}" target="_blank">{{ .Filename }} ({{ filesize .FileSize }})</a>
				</div>
			{{ end }}
		</div>
	{{ end }}

	{{ with .Projects }}
		<div class="mt3 flex g2 projects">
			{{ range $i, $proj := . }}
				<a data-projid="{{ $proj.ID }}" href="{{ $proj.Url }}" class="snippet-project flex flex-row items-center bg-theme-dimmer ph2 pv1 br2">
					<img src="{{ $proj.Logo }}" class="db mr1 br1 h1-5" />
					<div>{{ $proj.Name }}</div>
				</a>
			{{ end }}
		</div>
	{{ end }}
</div>
