{{ $image := partialCached "helper/image" (dict "Context" . "Type" "article") .RelPermalink "article" }}
{{- $context := . -}}
<div class="article-details">
    {{ if .Params.categories }}
    <header class="article-category">
        {{ range (.GetTerms "categories") }}
            {{ if and $image.exists $image.resource }}
                {{- $imageRaw := $image.resource | resources.Fingerprint "md5"  -}}
                {{- $20x := $imageRaw.Fill "20x20 smart"  -}}
                <a href="{{ .RelPermalink }}" 
                    class="color-tag"
                    data-image="{{ $20x.RelPermalink }}" 
                    data-key="{{ $context.Slug }}" 
                    data-hash="{{ $imageRaw.Data.Integrity }}">
                    {{ .LinkTitle }}
                </a>
            {{ else }}
                <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
            {{ end }}
        {{ end }}
    </header>
    {{ end }}

    <h2 class="article-title">
        <a href="{{ .RelPermalink }}">
            {{- .Title -}}
        </a>
    </h2>

    {{ with .Params.description }}
    <h3 class="article-subtitle">
        {{ . }}
    </h3>
    {{ end }}

    {{- if not .Date.IsZero -}}
    <footer class="article-time">
        {{ partial "helper/icon" "clock" }}
        <time class="article-time--published">
            {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
        </time>
    </footer>
    {{- end -}}
</div>