{{!< default}}

{{#post}}
<main class="gh-archive-page gh-container">
    <div class="gh-archive-page__bread-header-wrapper {{#if feature_image}}gh-archive-page__bread-header-wrapper--with-image{{/if}}">
        <div class="gh-archive-page__bread-header-background"></div>
        <ul class="gh-breadcrumbs">
            <li class="gh-breadcrumb-item"><a href="{{@site.url}}" aria-label="{{t "Home page link"}}">{{t "Home"}}</a></li>
            <li class="gh-breadcrumb-item"><a href="{{@site.url}}/categories" aria-label="{{t "Categories page link"}}">{{t "Categories"}}</a></li>
        </ul>
        <div class="gh-archive-page-header {{#if feature_image}}gh-archive-page-header--with-image{{/if}}">
            <div class="gh-archive-page-header__main">
                <h1 class="gh-archive-page-header__heading">{{t "Categories"}}</h1>
                <div class="gh-archive-page-header__content">
                    {{content}}
                </div>
            </div>
            {{#if feature_image}}
            <div class="gh-archive-page-header__image-wrapper">
                <picture>
                    <source srcset="{{img_url feature_image size="1600" format="webp"}} 1600w, {{img_url feature_image size="1200" format="webp"}} 1200w, {{img_url feature_image size="1000" format="webp"}} 1000w, {{img_url feature_image size="800" format="webp"}} 800w, {{img_url feature_image size="500" format="webp"}} 500w" sizes="(min-width: 1584px) 702px, 30vw, (max-width: 900px) 90vw" type="image/webp">
                    <img srcset="{{img_url feature_image size="1600"}} 1600w, {{img_url feature_image size="1200"}} 1200w, {{img_url feature_image size="1000"}} 1000w, {{img_url feature_image size="800"}} 800w, {{img_url feature_image size="500"}} 500w" sizes="(min-width: 1584px) 702px, 30vw, (max-width: 900px) 90vw" src="{{img_url feature_image size="1600"}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{t "Categories page feature image"}}{{/if}}"/>
                </picture>
            </div>     
            {{/if}}
        </div>
    </div>
    <div class="gh-archive-wrapper">
        <div class="gh-archive-feed">
            {{#get "tags" include="count.posts" limit="100"}}
            {{#foreach tags}}
                <div class="gh-archive-card">
                    <a href={{url}} class="gh-archive-card__image-wrapper" aria-label="{{name}} {{t "page link"}}">
                        {{#if feature_image}}
                        <picture>
                            <source srcset="{{img_url feature_image size="1000" format="webp"}} 1000w, {{img_url feature_image size="800" format="webp"}} 800w, {{img_url feature_image size="600" format="webp"}} 600w, {{img_url feature_image size="500" format="webp"}} 500w" sizes="(max-width: 500px) 92vw, 30vw" type="image/webp">
                            <img class="gh-archive-card__image" srcset="{{img_url feature_image size="1000"}} 1000w, {{img_url feature_image size="800"}} 800w, {{img_url feature_image size="600"}} 600w, {{img_url feature_image size="500"}} 500w" sizes="(max-width: 500px) 92vw, 30vw" src="{{img_url feature_image size="1000"}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{name}} {{t "post feature image"}}{{/if}}"/>
                        </picture>
                        {{else}}
                        <div class="gh-archive-card__default-image">
                            {{> "icons/image-default"}}
                        </div>
                        {{/if}}
                    </a>
                    <div class="gh-archive-card-content">
                        <a href="{{url}}" aria-label="{{name}} {{t "page link"}}">
                            <h2 class="gh-archive-card__title">{{name}}</h2>
                        </a>
                        <span class="gh-archive-card__posts-count">{{plural count.posts empty=(t "No Posts") singular=(t "% Post") plural=(t "% Posts")}}</span>
                    </div>
                </div>
            {{/foreach}}
            {{/get}}
        </div>
    </div>
</main>
{{/post}}