{{!< default}}

{{#post}}
<main class="gh-container gh-article-page-wrapper">
    <article class="gh-article-page gh-article-page--wide {{post_class}} ">
        <header class="gh-article-page-wide__bread-header-wrapper">
            <div class="gh-article-page__bread-header-background"></div>
            {{> "breadcrumbs"}}
            <div class="gh-article-page-header {{^if feature_image}}gh-article-page-header-wide-noImage{{/if}}">
                <div class="gh-article-page-wide__header-content">
                    <div class="gh-article-page-header__info">
                        {{#match authors.length "=" 1}}
                            <a href="{{primary_author.url}}" class="gh-article-page-header__author" aria-label="{{name}} {{t "page link"}}">
                                {{#if primary_author.profile_image}}
                                <picture>
                                    <source srcset="{{img_url primary_author.profile_image size="200" format="webp"}} 200w, {{img_url primary_author.profile_image size="112" format="webp"}} 112w" sizes="40px"  type="image/webp">
                                    <img class="gh-article-page-header__author-image" srcset="{{img_url primary_author.profile_image size="200"}} 200w, {{img_url primary_author.profile_image size="112"}} 112w" sizes="40px" src="{{img_url primary_author.profile_image}}"
                                    alt="{{primary_author.name}} {{t "profile image"}}">
                                </picture>
                                {{else}}
                                <img class="gh-article-page-header__author-image" src="{{asset "imagesAndIcons/AuthorAvatarDefault.jpg"}}"
                                    alt="{{primary_author.name}} {{t "profile image"}}">
                                {{/if}}
                                <span class="gh-article-page-header__author-name">{{primary_author.name}}</span>
                            </a>
                        {{else}}
                            <div class="gh-article-page-header__authors">
                                <span class="gh-post-meta">{{t "By"}}</span>
                                {{#foreach authors}}
                                    <a href="{{url}}" class="gh-article-page-header__author" aria-label="{{name}} {{t "page link"}}">
                                        <span class="gh-article-page-header__author-name">{{name}}</span>
                                    </a>                            
                                {{/foreach}}
                            </div>
                        {{/match}}
                        <span class="gh-post-meta gh-post-meta--article-header{{#match @custom.background_color "#ffffff"}} gh-post-meta--white-bg{{/match}}">{{t "Updated on"}} <time datetime="{{date format="
                                YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time> </span>
                        <span class="gh-post-meta gh-article-page__reading-time{{#match @custom.background_color "#ffffff"}} gh-post-meta--white-bg{{/match}}">{{reading_time}}</span>
                    </div>
                    <h1 class="gh-article-page-heading">{{title}}</h1>
                    {{#if custom_excerpt}}
                    <p class="gh-article-page-excerpt">{{custom_excerpt}}</p>
                    {{/if}}
                    <div class="gh-article-page-share-block">
                        <a class="gh-article-share-btn gh-article-share-btn--facebook" href="https://www.facebook.com/sharer.php?u={{url absolute='true'}}" target="_blank" rel="noopener" aria-label="{{t "Share on Facebook"}}">
                            {{> "icons/facebook"}}
                        </a>
                        <a class="gh-article-share-btn" href="https://twitter.com/intent/tweet?url={{url absolute='true'}}&amp;text={{encode title}}" target="_blank" rel="noopener" aria-label="{{t "Share on Twitter"}}">
                            {{> "icons/twitter"}}
                        </a>
                        <a class="gh-article-share-btn" href="https://reddit.com/submit?url={{url absolute='true'}}&amp;media=&amp;description={{encode title}}" target="_blank" rel="noopener" data-pin-do="none" aria-label="{{t "Share on Reddit"}}">
                            {{> "icons/reddit"}}
                        </a>
                        <button class="gh-article-share-btn copyToClipboardBtn" aria-label="{{t "Copy to clipboard button"}}">
                            {{> "icons/link-angled"}}
                            <span class="copyToClipboardBtn__success">{{t "Link copied!"}}</span>
                            <span class="copyToClipboardBtn__fail">{{t "Copy failed!"}}</span>
                        </button>
                    </div>
                </div>
                {{#if feature_image}}
                <figure class="gh-article-page-feature-image">
                    <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: 816px) 736px, 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: 816px) 736px, 90vw" src="{{img_url feature_image size="1600"}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}" />
                    </picture>
                    {{#if feature_image_caption}}
                    <figcaption>{{feature_image_caption}}</figcaption>
                    {{/if}}
                </figure>
                {{/if}}
            </div>
        </header>
        <div class="gh-article-page-content">
            {{content}}
        </div>
        {{#if comments}}
            {{comments title="Comments" count="true" mode="auto" saturation="20"}}
        {{/if}}
        <footer class="gh-article-page-footer">
            <div class="gh-article-page-footer__meta">
                <span class="gh-post-meta gh-post-meta--article-header">{{t "Updated on"}} <time datetime="{{date format="
                        YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time> </span>
                <div class="gh-article-page-share-block">
                    <a class="gh-article-share-btn gh-article-share-btn--facebook" href="https://www.facebook.com/sharer.php?u={{url absolute='true'}}" target="_blank" rel="noopener" aria-label="{{t "Share on Facebook"}}">
                        {{> "icons/facebook"}}
                    </a>
                    <a class="gh-article-share-btn" href="https://twitter.com/intent/tweet?url={{url absolute='true'}}&amp;text={{encode title}}" target="_blank" rel="noopener" aria-label="{{t "Share on Twitter"}}">
                        {{> "icons/twitter"}}
                    </a>
                    <a class="gh-article-share-btn" href="https://reddit.com/submit?url={{url absolute='true'}}&amp;media=&amp;description={{encode title}}" target="_blank" rel="noopener" data-pin-do="none" aria-label="{{t "Share on Reddit"}}">
                        {{> "icons/reddit"}}
                    </a>
                    <button class="gh-article-share-btn copyToClipboardBtn" aria-label="{{t "Copy to clipboard button"}}">
                        {{> "icons/link-angled"}}
                        <span class="copyToClipboardBtn__success">{{t "Link copied!"}}</span>
                        <span class="copyToClipboardBtn__fail">{{t "Copy failed!"}}</span>
                    </button>
                </div>
            </div>
            <div class="gh-article-page-footer__author">
                <a href="{{primary_author.url}}" class="gh-article-page-header__author" aria-label="{{primary_author.name}} {{t "page link"}}">
                    {{#if primary_author.profile_image}}
                    <picture>
                        <source srcset="{{img_url primary_author.profile_image size="200" format="webp"}} 200w, {{img_url primary_author.profile_image size="112" format="webp"}} 112w" sizes="40px"  type="image/webp">
                        <img class="gh-article-page-header__author-image" srcset="{{img_url primary_author.profile_image size="200"}} 200w, {{img_url primary_author.profile_image size="112"}} 112w" sizes="40px" src="{{img_url primary_author.profile_image}}"
                        alt="{{primary_author.name}} {{t "profile image"}}">
                    </picture>
                    {{else}}
                    <img class="gh-article-page-header__author-image" src="{{asset "imagesAndIcons/AuthorAvatarDefault.jpg"}}"
                        alt="{{primary_author.name}} {{t "profile image"}}">
                    {{/if}}
                    <span class="gh-article-page-footer__author-name">{{primary_author.name}}</span>
                </a>
                {{#if primary_author.bio}}
                <div class="gh-article-page-footer__author-bio">
                    {{primary_author.bio}}
                </div>
                {{/if}}
            </div>
            <hr>
        </footer>
        <section class="gh-read-next">
            <h3 class="gh-read-next__heading">{{t "Read Next"}}</h3>
            <div class="gh-read-next__posts">
                {{#get "posts" include="tags" limit="4" filter="id:-{{id}}"}}
                    {{#foreach posts}}
                        {{> 'post-card'}}
                    {{/foreach}}
                {{/get}}
            </div>
        </section>
</main>
{{/post}}