{{!< default}}

{{#post}}
<main class="content-area content-area--post">
    <article class="post-article {{post_class}}">
        <header class="post-header">
            <div class="post-header__inner">
                {{#if primary_tag}}
                    <a class="post-tag" href="{{primary_tag.url}}"{{#if primary_tag.accent_color}} style="--tag-accent: {{primary_tag.accent_color}};"{{/if}}>{{primary_tag.name}}</a>
                {{/if}}
                <h1 class="post-title">{{title}}</h1>
                <div class="post-meta">
                    <time class="meta-item" datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time>
                    {{#primary_author}}
                        <span class="meta-divider">/</span>
                        <span class="meta-item">{{name}}</span>
                    {{/primary_author}}
                    {{#if primary_tag}}
                        <span class="meta-divider">/</span>
                        <a class="meta-pill" href="{{primary_tag.url}}"{{#if primary_tag.accent_color}} style="--tag-accent: {{primary_tag.accent_color}};"{{/if}}>{{primary_tag.name}}</a>
                    {{/if}}
                    <span class="meta-divider">/</span>
                    <span class="meta-item">{{reading_time}}</span>
                </div>
            </div>
            {{#if feature_image}}
                <figure class="post-feature-image">
                    <img
                        srcset="{{img_url feature_image size="s"}} 300w, {{img_url feature_image size="m"}} 600w, {{img_url feature_image size="l"}} 1000w"
                        sizes="(max-width: 900px) 100vw, 760px"
                        src="{{img_url feature_image size="l"}}"
                        alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                    >
                </figure>
            {{/if}}
        </header>

        <div class="post-body">
            <section class="post-content kg-content">
                {{content}}
            </section>

            {{#unless access}}
                <section class="membership-cta">
                    <h2>This post is for paying subscribers only</h2>
                    <a class="button button--light" href="#/portal/signup">Subscribe Now</a>
                    <p>Already have an account? <a href="#/portal/signin">Sign in</a></p>
                </section>
            {{/unless}}

            <footer class="post-footer">
                {{#primary_author}}
                    <div class="author-inline-card">
                        {{#if profile_image}}
                            <img class="avatar" src="{{img_url profile_image size="xs"}}" alt="{{name}}">
                        {{else}}
                            <div class="avatar avatar--fallback">A</div>
                        {{/if}}
                        <div>
                            <h3>{{name}}</h3>
                            {{#if bio}}<p>{{bio}}</p>{{/if}}
                        </div>
                    </div>
                {{/primary_author}}
            </footer>
        </div>
    </article>

    {{> "post/post-navigation"}}

    <section class="discussion-panel">
        {{#if comments}}
            {{comments title="Comments" count=true}}
        {{else}}
            <div class="comments-empty">
                <h3>Join the discussion</h3>
                <p>Become a member of {{@site.title}} to start commenting.</p>
                <a class="button" href="#/portal/signup">Sign up now</a>
                <p>Already a member? <a href="#/portal/signin">Sign in</a></p>
            </div>
        {{/if}}
    </section>
</main>
{{/post}}
