<aside class="sidebar sidebar--right h-full flex flex-col">
        {{#is "post"}}
            {{#post}}
                {{#primary_author}}
                    <section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-1.5 border-b border-brd">
                        <a class="flex gap-2 hover:opacity-80">{{#if profile_image}}
                            <img class="object-cover size-10 sm:size-12 aspect-square" src="{{img_url profile_image size="s"}}" alt="{{name}}">
                        {{else}}
                            <div class="object-cover size-10 sm:size-12 aspect-square avatar--fallback">A</div>
                        {{/if}}
                        <div class="flex-1 flex flex-col gap-1">
                            <h3 class="text-sm font-medium leading-tight flex items-center justify-between gap-1">{{name}}</h3>
                            {{#if bio}}<p class="text-xs text-typ-tone leading-tight line-clamp-3 text-overflow-ellipsis">{{bio}}</p>{{/if}}
                        </div>
                        <span class="author-feature__action">↗</span>
                        </a>
                    </section>
                {{/primary_author}}
            {{/post}}
        {{/is}}

        <section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-3 border-b border-brd ">
            <div class="flex items-center gap-2.5">
                {{#if @site.icon}}
                    <img class="w-12 min-h-12 rounded-md h-full relative" src="{{@site.icon}}" alt="{{@site.title}}">
                {{else}}
                    <div class="w-12 min-h-12 rounded-md h-full relative site-icon--fallback">T</div>
                {{/if}}
                <div class="flex flex-col gap-0.5">
                    <h2 class="text-sm md:text-base font-medium leading-tight">{{@site.title}}</h2>
                    {{#if @site.description}}
                        <p class="text-sm text-typ-tone leading-tight">{{@site.description}}</p>
                    {{/if}}
                </div>
            </div>
            
        </section>

        {{subscribe_form
            placeholder="Your email"
            button_class="button button--subscribe"
            form_class="subscribe-form"
        }}
        

        <section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-wrap items-center justify-between gap-1.5 border-b border-brd">
                <h2 class="uppercase font-medium text-xs text-typ-tone">Follow</h2>
            <nav class="relative flex flex-wrap items-center gap-1 text-typ text-sm z-10">
                {{!-- {{#if @site.facebook}}<a href="{{social_url type="facebook"}}" class="hover:opacity-75 p-0.5" aria-label="Facebook">f</a>{{/if}} --}}
                {{#if @site.twitter}}
                <a href="https://x.com/ghost" class="hover:opacity-75 p-0.5" aria-label="Twitter">
                    <i class="icon icon-brand-x size-4 stroke-2" role="presentation">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-x" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
                            <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
                        </svg>
                </i><span class="hidden">Twitter</span></a>
                {{/if}}
                
                <a href="{{@site.url}}/rss/" class="hover:w-5 h-5 opacity-75 p-0.5" aria-label="RSS">
                    <i class="icon icon-rss size-4 stroke-2" role="presentation">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rss" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <circle cx="5" cy="19" r="1"></circle>
                            <path d="M4 4a16 16 0 0 1 16 16"></path>
                            <path d="M4 11a9 9 0 0 1 9 9"></path>
                        </svg>
                    </i>
                </a>
            </nav>
        </section>

        <section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-1.5 border-b border-brd">
            <div class="flex items-center justify-between gap-2 mb-2">
                <h2 class="uppercase font-bold text-xs text-typ-tone">발견하기</h2>
                <button data-portal="recommendations" data-portal-title="발견하기" data-portal-description="회원님이 좋아하실 만한 다른 사이트들이에요." class="text-sm font-medium flex items-center gap-1 rounded-btn group bg-bgr text-typ hover:text-typ-tone cursor-pointer gh-portal-close">
                    <span class="sr-only">모두 보기</span>
                    <i class="icon icon-arrow-up-right size-4 stroke-2" 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">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M17 7l-10 10"></path>
                            <path d="M8 7l9 0l0 9"></path>
                        </svg>
                    </i>
                </button>
            </div>
            {{#match @site.recommendations_enabled}}
                {{recommendations limit="4"}}
            {{else}}
                <ul class="flex flex-col gap-1 rounded-theme overflow-hidden">
                    <li>
                        <a href="{{@site.url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75">
                            <h3 class="font-medium line-clamp-1 text-ellipsis overflow-hidden">{{@site.title}}</h3>
                        </a>
                    </li>
                </ul>
            {{/match}}
        </section>

        {{#is "post"}}
            {{#post}}
                <section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-1.5 border-b border-brd">
                    <div class="flex items-center justify-between gap-2 mb-1">
                        <h2 class="uppercase font-bold text-xs text-typ-tone">Read next</h2>
                    </div>
                    <ul class="flex flex-col gap-0.5 rounded-theme overflow-hidden">
                        {{#if primary_tag}}
                            {{#get "posts" filter=(concat "id:-" id "+tag:" primary_tag.slug) limit="4"}}
                                {{#foreach posts}}
                                    <li class="style-none"><a href="{{url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75"><h3 class="font-medium line-clamp-1 text-ellipsis overflow-hidden">{{title}}</h3></a></li>
                                {{/foreach}}
                            {{else}}
                                {{#get "posts" filter=(concat "id:-" id) limit="4"}}
                                    {{#foreach posts}}
                                        <li class="style-none"><a href="{{url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75"><h3 class="font-medium line-clamp-1 text-ellipsis overflow-hidden">{{title}}</h3></a></li>
                                    {{/foreach}}
                                {{/get}}
                            {{/get}}
                        {{else}}
                            {{#get "posts" filter=(concat "id:-" id) limit="4"}}
                                {{#foreach posts}}
                                    <li class="style-none"><a href="{{url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75"><h3 class="font-medium line-clamp-1 text-ellipsis overflow-hidden">{{title}}</h3></a></li>
                                {{/foreach}}
                            {{/get}}
                        {{/if}}
                    </ul>
                </section>
            {{/post}}
        {{/is}}
        <span class="flex-1"></span>
        <footer class="px-5 sm:px-6 xl:pr-1">
            <div class="py-3 flex flex-col items-start justify-start text-typ-tone text-xs">
                ©{{date format="YYYY"}} {{@site.title}}. Published with Ghost.
            </div>
        </footer>
</aside>
