{{ template "base.html" . }}

{{ define "content" }}
<div class="optionbar">
    <div class="options">
        <a class="button" href="{{ .NewPostUrl }}"><span class="big pr1">+</span> Create Post</a>
    </div>
    <div class="options">
        {{ template "pagination.html" .Pagination }}
    </div>
</div>
{{/* TODO: Breadcrumbs, or some other link back to the blog index */}}
{{ range .Posts }}
    <div class="flex items-start ph3 pv3 background-even">
        <img class="avatar-icon mr2" src="{{ .Author.AvatarUrl }}">
        <div class="flex-grow-1 overflow-hidden">
            <div class="title mb1"><a href="{{ .Url }}">{{ .Title }}</a></div>
            <div class="details">
                <a class="user" href="{{ .Author.ProfileUrl }}">{{ .Author.Name }}</a> &mdash; {{ timehtml (relativedate .Date) .Date }}
            </div>
            <div class="overflow-hidden mh-5 mt2 relative">
                <div>
                    {{ .Content }}
                </div>
                <div class="excerpt-fade absolute w-100 h4 bottom-0 z-999"></div>
            </div>
            <div class="mt2">
                <a href="{{ .Url }}">Read More &rarr;</a>
            </div>
        </div>
    </div>
{{ end }}
<div class="optionbar bottom">
    <div class="options">
        <a class="button" href="{{ .NewPostUrl }}"><span class="big pr1">+</span> Create Post</a>
    </div>
    <div class="options">
        {{ template "pagination.html" .Pagination }}
    </div>
</div>
{{ end }}