{{!< default}}

<main class="gh-container gh-author-page">
    {{#author}}
    <div class="gh-author-page__bread-header-wrapper">
        <div class="gh-author-page__bread-header-background"></div>
        {{> "breadcrumbs"}}
        <div class="gh-author-page__header{{#if cover_image}} gh-author-page__header-with-image{{/if}}">
            <div class="gh-author-page__header-content">
                {{#if profile_image}}
                    <picture>
                        <source srcset="{{img_url profile_image size="200" format="webp"}} 200w, {{img_url profile_image size="112" format="webp"}} 112w" sizes="112px"  type="image/webp">
                        <img class="gh-author-page__author-image" srcset="{{img_url profile_image size="200"}} 200w, {{img_url profile_image size="112"}} 112w" sizes="112px" src="{{img_url profile_image size="112"}}" alt="{{name}} {{t "profile image"}}" />
                    </picture>
                {{else}}
                <img class="gh-author-page__author-image" src="{{asset "imagesAndIcons/AuthorAvatarDefault.jpg"}}" alt="{{name}} {{t "profile image"}}">
                {{/if}}
                <div class="gh-author-page__author-data">
                    <h1 class="gh-author-page__name">{{name}}</h1>
                    {{#has any="facebook, twitter, website, linkedin, bluesky, threads, mastodon, tiktok, youtube, instagram"}}
                        <div class="gh-author-page__links">
                            {{#if website}}
                            <a class="gh-author-page__link" href="{{social_url type="website"}}" target="_blank" rel="noopener"
                                aria-label="{{name}}'s {{t "Website"}}">
                                {{>icons/globe}}
                            </a>
                            {{/if}}
                            {{#if twitter}}
                            <a class="gh-author-page__link" href="{{social_url type="twitter"}}" target="_blank" rel="noopener"
                                aria-label="{{name}}'s {{t "Twitter"}}">
                                {{>icons/twitter}}
                            </a>
                            {{/if}}
                            {{#if facebook}}
                            <a class="gh-author-page__link gh-author-page__link--facebook" href="{{social_url type="facebook"}}" target="_blank" rel="noopener"
                                aria-label="{{name}}'s {{t "Facebook"}}">
                                {{>icons/facebook}}
                            </a>
                            {{/if}}
                            {{#if linkedin}}
                            <a class="gh-author-page__link" href="{{social_url type="linkedin"}}" target="_blank" rel="noopener"
                                aria-label="{{name}}'s {{t "linkedin link"}}">
                                {{>icons/linkedin-icon}}
                            </a>
                            {{/if}}
                            {{#if bluesky}}
                            <a class="gh-author-page__link" href="{{social_url type="bluesky"}}" target="_blank" rel="noopener"
                                aria-label="{{name}}'s {{t "bluesky link"}}">
                                {{>icons/bluesky-icon}}
                            </a>
                            {{/if}}
                            {{#if threads}}
                            <a class="gh-author-page__link" href="{{social_url type="threads"}}" target="_blank" rel="noopener"
                                aria-label="{{name}}'s {{t "threads link"}}">
                                {{>icons/threads-icon}}
                            </a>
                            {{/if}}
                            {{#if mastodon}}
                            <a class="gh-author-page__link" href="{{social_url type="mastodon"}}" target="_blank" rel="noopener"
                                aria-label="{{name}}'s {{t "mastodon link"}}">
                                {{>icons/mastodon-icon}}
                            </a>
                            {{/if}}
                            {{#if tiktok}}
                            <a class="gh-author-page__link" href="{{social_url type="tiktok"}}" target="_blank" rel="noopener"
                                aria-label="{{name}}'s {{t "tiktok link"}}">
                                {{>icons/tiktok-icon}}
                            </a>
                            {{/if}}
                            {{#if youtube}}
                            <a class="gh-author-page__link" href="{{social_url type="youtube"}}" target="_blank" rel="noopener"
                                aria-label="{{name}}'s {{t "youtube link"}}">
                                {{>icons/youtube-icon}}
                            </a>
                            {{/if}}
                            {{#if instagram}}
                            <a class="gh-author-page__link" href="{{social_url type="instagram"}}" target="_blank" rel="noopener"
                                aria-label="{{name}}'s {{t "instagram link"}}">
                                {{>icons/instagram-icon}}
                            </a>
                            {{/if}}
                        </div>
                    {{/has}}
                </div>
                {{#if bio}}
                <p class="gh-author-page__bio">{{bio}}</p>
                {{/if}}
                <div class="gh-author-page__meta {{#match @custom.background_color "#ffffff"}}gh-author-page__meta--on-white{{/match}}">
                    <span class="gh-author-page__posts">
                        {{plural ../pagination.total empty=(t "No Posts") singular=(t "% Post") plural=(t "% Posts")}}
                    </span>
                    {{#if location}}
                    <div class="gh-author-page__location">
                        {{> "icons/location-marker"}}
                        {{location}}
                    </div>
                    {{/if}}
                </div>
            </div>
            {{#if cover_image}}
            <div class="gh-auhor-page__cover-image-wrapper">
                <picture>
                    <source srcset="{{img_url cover_image size="1600" format="webp"}} 1600w, {{img_url cover_image size="1200" format="webp"}} 1200w, {{img_url cover_image size="1000" format="webp"}} 1000w, {{img_url cover_image size="800" format="webp"}} 800w, {{img_url cover_image size="500" format="webp"}} 500w" sizes="(min-width: 1584px) 702px, 30vw, (max-width: 900px) 90vw" type="image/webp">
                    <img class="gh-auhor-page__cover-image" srcset="{{img_url cover_image size="1600"}} 1600w, {{img_url cover_image size="1200"}} 1200w, {{img_url cover_image size="1000"}} 1000w, {{img_url cover_image size="800"}} 800w, {{img_url cover_image size="500"}} 500w" sizes="(min-width: 1584px) 702px, 30vw, (max-width: 900px) 90vw" src="{{img_url cover_image size="1600"}}" alt="{{name}} {{t "page cover image"}}" />
                </picture>
            </div>
            {{/if}}
        </div>
    </div>
    {{/author}}
    <section class="gh-author-page__post-feed-wrapper gh-grid-section">
        <div class="gh-posts-feed">
            {{#foreach posts}}
            {{> "post-card"}}
            {{/foreach}}
        </div>
        <a rel="next" class="gh-secondary-button gh-load-more-button" tabindex="0" aria-label="{{t "Load more posts"}}">{{t "Load More"}}</a>
    </section>
</main>