{{!< default}}

<h2 class="mb-5 pb-2 text-rose-400 w-full text-sm uppercase font-bold tracking-widest border-b border-slate-600">Freshest Articles</h2>
<div class="grid grid-cols-3 gap-6">
    {{#foreach posts limit="3"}}
        <article class="relative {{post_class}}">
            <div class="absolute top-3 left-3">{{> "tags" }}</div>
            {{#if feature_image}}
                <a href={{url}} aria-hidden="true">
                    <img class="w-full mb-5"
                     data-srcset="{{> srcset}}"
                     data-sizes="auto"
                     src="{{img_url feature_image size="m"}}"
                     srcset="{{> srcset}}"
                     sizes="auto"
                     alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{/if}}">
                </a>
            {{/if}}
            <a class="text-lg block" href={{url}} aria-label="Read article entitled: {{title}}" title="Read article entitled: {{title}}">{{title}}</a>
            <span class="text-xs text-slate-500"><time itemprop="datePublished" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>
        </article>
    {{/foreach}}
</div>

<div class="prose prose-invert max-w-full mt-14">
{{#foreach posts from="4"}}

    <article class="flex flex-row items-center h-20 mb-2 border-b border-b-neutral-800 pb-2 {{post_class}}">
        {{#if feature_image}}
        <a class="w-44 mr-7 h-full shrink-0 overflow-hidden" href={{url}} aria-hidden="true">
            <img class="mt-0 mb-0 relative -top-1/3"
                data-srcset="{{img_url feature_image size='s'}} 400w"
                data-sizes="auto"
                src="{{img_url feature_image size='s'}}"
                srcset="{{img_url feature_image size='s'}} 400w"
                sizes="auto"
                alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{/if}}">
        </a>
        {{/if}}
        <div class="grow">
            {{> "tags" size="sm"}}
            <time class="text-xxs text-blue-600 font-bold mr-3 mt-2"itemprop="datePublished"  datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
            <a class="no-underline font-light italic text-sm tracking-widest text-stone-200 mr-5" href={{url}} aria-label="Read article entitled: {{title}}" title="Read article entitled: {{title}}">{{title}}</a>
        </div>
        <span class="shrink-0 text-slate-500 text-xs italic">{{reading_time}}</span>
    </article>

{{/foreach}}
</div>

<div class="prose prose-invert max-w-full mt-14">
    {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
        {{#foreach tags}}
            {{feature_image}}
            <a href='{{ url }}'>
                <h2>{{ name }} <small>({{ count.posts }})</small></h2>
            </a>
        {{/foreach}}
    {{/get}}
</div>