{{!< default}}

{{#post}}
<main class="flex-2 max-w-content">
    <section class="px-4 sm:px-[max(2vmin,20px)] mt-6 mb-8">
            <div class="max-w-content mx-auto flex flex-col gap-2.5">
                <h1 class="font-semibold text-xl sm:text-2xl leading-[1.125]">{{title}}</h1>

                <div class="relative border-b border-brd pb-4">
                    <div class="flex flex-wrap gap-2 sm:gap-1.5 items-center text-xs text-typ-tone [&>*:not(:last-child)]:after:content-['/'] [&>*:not(:last-child)]:after:ml-2 sm:[&>*:not(:last-child)]:after:ml-1.5 [&>*:not(:last-child)]:after:text-brd" data-post-card-info>
                        <time data-post-card-date datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time>
                        {{#primary_author}}
                            <a data-post-card-author href="{{url}}" class="hover:opacity-75">{{name}}</a>
                        {{/primary_author}}
                        {{#if primary_tag}}
                            <ul class="flex flex-wrap items-center font-medium" data-post-card-tags>
                                <li{{#if primary_tag.accent_color}} style="--color-accent: {{primary_tag.accent_color}};"{{/if}}>
                                    <a href="{{primary_tag.url}}" class="bg-accent/10 px-1.5 py-px rounded-sm text-typ hover:bg-accent/5 hover:text-accent">{{primary_tag.name}}</a>
                                </li>
                            </ul>
                        {{/if}}
                        {{!-- {{#if comments}} --}}
                            <a data-post-card-comments class="flex gap-1 items-center hover:opacity-75" href="#comments">
                                <i class="icon icon-comments size-3.5 stroke-2 -mt-px pointer-events-none" role="presentation">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-message-circle"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1"></path></svg>
                                </i>
                                <span class="pointer-events-none">0</span>
                            </a>
                        {{!-- {{/if}} --}}
                    </div>

                    <button data-post-share-toggle class="absolute bottom-4 right-0 flex gap-1 items-center hover:opacity-75 cursor-pointer" type="button" aria-label="Share this post">
                        <i class="icon icon-share size-4 stroke-2 pointer-events-none" role="presentation">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-share-3"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M13 4v4c-6.575 1.028 -9.02 6.788 -10 12c-.037 .206 5.384 -5.962 10 -6v4l8 -7l-8 -7"></path></svg>
                        </i>
                        {{!-- <img class="size-4 pointer-events-none" src="{{asset "icons/arrow_outward.svg"}}" alt=""> --}}
                    </button>
                </div>

                {{#if feature_image}}
                    <figure class="w-full h-full relative max-w-content mt-2.5">
                        <img
                            class="w-full object-cover rounded-theme aspect-[16/9] bg-bgr-tone"
                            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: 767px) 90vw, 720px"
                            src="{{img_url feature_image size="l"}}"
                            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                        >
                    </figure>
                {{/if}}
            </div>
    </section>
    <article class="post-article pt-4 px-5 sm:px-[max(2vmin,20px)] mb-12 {{post_class}}">

        {{!-- <div class="post-body px-4 sm:px-[max(2vmin,20px)]"> --}}
            <section class="post-content kg-content ghost-content prose prose-theme">
                {{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}}

        {{!-- </div> --}}
    </article>

    <section class="px-5 sm:px-6 mb-6 border-y py-5 border-brd scroll-mt-14 bg-bgr-tone">
        {{#if comments}}
            {{comments title="Comments" count=true}}
        {{else if @member}}
            <div class="flex flex-col items-center py-6 sm:px-8 sm:py-10">
                <h3 class="mb-[8px] text-center font-sans text-2xl tracking-tight text-typ font-bold">댓글 기능 비활성화</h3>
                <p class="w-full px-0 text-center font-sans text-lg leading-normal text-typ-tone sm:max-w-screen-sm sm:px-8">현재 사이트 설정에서 댓글 기능이 비활성화되어 있습니다.</p>
            </div>
        {{else}}
            <div class="flex flex-col items-center py-6 sm:px-8 sm:py-10">
                <h3 class="mb-[8px] text-center font-sans text-2xl tracking-tight text-typ font-bold">댓글 참여하기</h3>
                <p class="mb-[28px] w-full px-0 text-center font-sans text-lg leading-normal text-typ-tone sm:max-w-screen-sm sm:px-8">멤버가 되어 댓글을 남겨보세요</p>
                <a class="text-md mb-[12px] inline-block rounded px-5 py-[14px] font-sans font-medium leading-none text-white transition-all hover:opacity-90 bg-orange-600" href="#/portal/signup">회원가입하기</a>
                <p class="text-md text-center font-sans text-typ-tone"><span class="mr-1 inline-block text-[15px]">이미 가입하셨나요?</span> 
                <a href="#/portal/signin" class="rounded-md text-sm text-orange-600 font-semibold transition-all hover:opacity-90">로그인하기</a></p>
            </div>
        {{/if}}
    </section>

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

</main>
{{/post}}
