{{!< default}}

<link rel="stylesheet" type="text/css" href="{{asset "css/slider.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/column-layout.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/cards.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/simple-hero.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/author.css"}}" />

<main class="main">
    {{#author}}
        {{#match slug "katarina-smith-demo"}}
            {{> "components/simple-author-hero"}}
        {{else}}
            {{#unless profile_image}}
                {{> "components/simple-author-hero"}}
            {{else}} 
                {{^match @custom.author_page_layout "Simple"}}
                    <section class="column-layout{{#match @custom.author_page_layout "Author Image Left"}} author-image-layout{{/match}}{{#match @custom.author_page_layout "Author Image Right"}} author-image-layout author-image-right{{/match}}">
                        <div class="column-layout-grid">
                            <div class="left-column">
                                <div class="text-card">
                                    <h1 class="text-card-heading">{{name}}</h1>

                                    <div class="text-card-paragraph">
                                        <p>
                                            {{bio}}
                                        </p>
                                    </div> 
                                </div> 

                                <div id="author-mobile-image" class="small-card-image-link hover-image-opacity">                   
                                    <figure class="small-card-image-wrapper">
                                        <img             
                                            srcset="{{img_url profile_image size="s" format="webp"}} 320w,
                                                    {{img_url profile_image size="xm" format="webp"}} 440w,
                                                    {{img_url profile_image size="m" format="webp"}} 600w,
                                                    {{img_url profile_image size="l" format="webp"}} 960w"
                                            src="{{img_url profile_image size="m"}}"
                                            alt="{{name}}"
                                        >
                                    </figure> 
                                </div> 

                                {{#if location}}
                                    <div class="section-heading author-row">
                                        <span>
                                            {{t "Location"}}
                                        </span>

                                        <span>
                                            {{location}}
                                        </span>
                                    </div>
                                {{/if}}

                                <div id="number-of-articles" class="section-heading author-row">
                                    <span>
                                        {{t "Number of Articles"}}
                                    </span>

                                    <span>
                                        {{#get "posts" filter="authors:{{slug}}+id:-{{id}}" limit="all"}}
                                            {{pagination.total}}
                                        {{/get}}
                                    </span>
                                </div>

                                <div id="author-socials" class="section-heading author-row">
                                    <span>
                                        {{t "Socials"}}
                                    </span>

                                    <div class="socials">
                                        {{#if facebook}}
                                            <a href="{{facebook_url}}" target="_blank" class="social" aria-label="Facebook">
                                                <div class="social-inner social-inner-smaller">
                                                    {{> "icons/facebook-icon"}}
                                                </div>
                                            </a>
                                        {{/if}}   

                                        {{#if twitter}}
                                            <a href="{{twitter_url}}" target="_blank" class="social" aria-label="Twitter">
                                                <div class="social-inner social-inner-smaller">
                                                    {{> "icons/twitter-icon"}}
                                                </div>
                                            </a>
                                        {{/if}}   

                                        {{#if website}}
                                            <a href="{{website}}" target="_blank" class="social" aria-label="Website URL">
                                                <div class="social-inner social-inner-smaller">
                                                    {{> "icons/link-icon"}}
                                                </div>
                                            </a>
                                        {{/if}}
                                    </div>       
                                </div> 
                            </div>

                            <div class="center-column author-center-column">
                                <div class="big-card-image-link big-card-author-image hover-image-opacity">                   
                                    <figure class="big-card-image-wrapper">
                                        <img             
                                            srcset="{{img_url profile_image size="s" format="webp"}} 320w,
                                                    {{img_url profile_image size="xm" format="webp"}} 440w,
                                                    {{img_url profile_image size="m" format="webp"}} 600w,
                                                    {{img_url profile_image size="l" format="webp"}} 960w"
                                            src="{{img_url profile_image size="m"}}"
                                            alt="{{name}}"
                                        >
                                    </figure> 
                                </div> 
                            </div>

                            <div id="author-sidebar" class="right-column">                                                 
                                {{#get "authors" include="count.posts" filter="slug:-{{slug}}" limit="2"}}
                                    {{#if authors}}
                                        <div id="other-authors">
                                            <div class="section-heading">
                                                <span>
                                                    {{t "Other Authors"}}
                                                </span>
                                            </div>

                                            {{#foreach authors}}
                                                {{> "components/extra-small-side-card" feature_image=profile_image }}
                                            {{/foreach}}
                                        </div>
                                    {{/if}}
                                {{/get}}
                                
                                <div id="latest-work">
                                    <div class="section-heading">
                                        <span class="latest-work-author-name">
                                            {{name}}{{t "'s Latest Work"}}
                                        </span>
                                    </div>
                                    {{#get "posts" filter="authors:{{slug}}" limit="2"}}
                                        {{#foreach posts}}
                                            {{> "components/extra-small-side-card" isPost=true name=title}}
                                        {{/foreach}}
                                    {{/get}}
                                </div>                        
                            </div>
                        </div>
                    </section>
                {{else}}
                    {{> "components/simple-author-hero"}}
                {{/match}}
            {{/unless}}
        {{/match}} 
    {{/author}}

    <section class="author-work-grid-section">
        <div class="wide-container">
            <div class="section-heading">
                <span class="section-heading-title">
                    {{#author}}{{name}}{{/author}}{{t "'s Work"}}
                </span>
                
                <span class="section-heading-article-number">
                    {{plural pagination.total empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
                </span>         
            </div>

            <div id="pagination-grid" class="grid pagination-grid">
                {{#foreach posts}}
                    {{> "components/small-card" isForGrid=true }}
                {{/foreach}}
            </div>

            {{pagination}}
        </div>
    </section>
</main>

<script>
    if(!document.querySelector('#author-socials .social')){
        document.querySelector('#author-socials')?.remove();
    }
</script>