<section class="stack-section" data-tabs>
    <div class="tab-row-wrap">
        <div class="tab-row" role="tablist" aria-label="Homepage sections">
            <button class="tab-row__button is-active" type="button" data-tab-trigger="latest">Latest</button>
            <button class="tab-row__button" type="button" data-tab-trigger="featured">Featured</button>
            <button class="tab-row__button" type="button" data-tab-trigger="updated">Updated</button>
            <button class="tab-row__button" type="button" data-tab-trigger="categories">Categories</button>
        </div>
        <button class="view-toggle" type="button" aria-label="Change view">
            <span class="view-toggle__grid"></span>
            <span class="view-toggle__chevron">⌄</span>
        </button>
    </div>

    <div class="tab-panel is-active" data-tab-panel="latest">
        {{> "lists/post-feed"}}
    </div>

    <div class="tab-panel" data-tab-panel="featured">
        {{#get "posts" filter="featured:true" limit="8" include="authors,tags"}}
            {{> "lists/post-items" posts=posts}}
        {{/get}}
    </div>

    <div class="tab-panel" data-tab-panel="updated">
        {{#get "posts" order="updated_at desc" limit="8" include="authors,tags"}}
            {{> "lists/post-items" posts=posts}}
        {{/get}}
    </div>

    <div class="tab-panel" data-tab-panel="categories">
        <div class="category-overview">
            {{#get "tags" limit="4" include="count.posts"}}
                {{#foreach tags}}
                    <section class="category-overview__row">
                        <div>
                            <h2>{{name}}</h2>
                            {{#if description}}
                                <p>{{description}}</p>
                            {{else}}
                                <p>{{plural count.posts empty="No posts yet" singular="% post in this category" plural="% posts in this category"}}</p>
                            {{/if}}
                            <a href="{{url}}">View all ↗</a>
                        </div>
                        <ol>
                            {{#get "posts" filter=(concat "tag:" slug) limit="5"}}
                                {{#foreach posts}}
                                    <li><a href="{{url}}">{{title}}</a></li>
                                {{/foreach}}
                            {{/get}}
                        </ol>
                    </section>
                {{/foreach}}
            {{/get}}
        </div>
    </div>
</section>
