<aside class="sidebar sidebar--left">
    <div class="sidebar__inner">
        <nav class="menu-groups">
            <section class="menu-group is-open">
                <button class="menu-group__trigger" type="button" data-accordion aria-expanded="true">
                    <span class="menu-link">
                        <span class="menu-link__marker"></span>
                        <span class="menu-link__label">Home pages</span>
                    </span>
                    <span class="menu-group__chevron" aria-hidden="true">
                        <img class="menu-group__chevron-icon menu-group__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
                        <img class="menu-group__chevron-icon menu-group__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
                    </span>
                </button>
                <div class="menu-group__content" data-accordion-content>
                    {{navigation}}
                </div>
            </section>

            <section class="menu-group menu-group--link">
                <a class="menu-group__link px-3 py-2 flex items-center rounded-[15px] transition-[padding,background-color,color] hover:bg-[var(--surface-muted)] hover:px-4" href="/tags/">
                    <span class="menu-link">
                        <span class="menu-link__marker"></span>
                        <span class="menu-link__label">Tags</span>
                    </span>
                </a>
            </section>

            <section class="menu-group menu-group--link">
                <a class="menu-group__link px-3 py-2 flex items-center rounded-[15px] transition-[padding,background-color,color] hover:bg-[var(--surface-muted)] hover:px-4" href="/authors/">
                    <span class="menu-link">
                        <span class="menu-link__marker"></span>
                        <span class="menu-link__label">Authors</span>
                    </span>
                </a>
            </section>

            <section class="menu-group">
                <button class="menu-group__trigger" type="button" data-accordion aria-expanded="false">
                    <span class="menu-link">
                        <span class="menu-link__marker"></span>
                        <span class="menu-link__label">Members</span>
                    </span>
                    <span class="menu-group__chevron" aria-hidden="true">
                        <img class="menu-group__chevron-icon menu-group__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
                        <img class="menu-group__chevron-icon menu-group__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
                    </span>
                </button>
                <div class="menu-group__content" data-accordion-content>
                    <ul class="link-list">
                        <li><a class="menu-sub-link" href="#/portal/signup">Sign up</a></li>
                        <li><a class="menu-sub-link" href="#/portal/signin">Sign in</a></li>
                        <li><a class="menu-sub-link" href="#/portal/account">Account</a></li>
                    </ul>
                </div>
            </section>
        </nav>

        <section class="sidebar-card sidebar-card--categories border-b border-brd px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex flex-col gap-1.5" x-data="{ categoriesOpen: window.innerWidth >= 1024 }" x-init="window.addEventListener('resize', () => { categoriesOpen = window.innerWidth >= 1024 })" data-sidebar-categories>
            <button class="sidebar-card__trigger flex items-center gap-1 justify-between cursor-pointer pr-2 hover:opacity-75" type="button" @click="categoriesOpen = !categoriesOpen" :aria-expanded="categoriesOpen.toString()">
                <span class="sidebar-card__eyebrow uppercase font-medium text-xs">Categories</span>
                <span class="sidebar-card__chevron" aria-hidden="true">
                    <img x-show="!categoriesOpen" x-cloak class="sidebar-card__chevron-icon sidebar-card__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
                    <img x-show="categoriesOpen" x-cloak class="sidebar-card__chevron-icon sidebar-card__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
                </span>
            </button>
            <div class="sidebar-card__content sidebar-card__content--categories" x-cloak x-show="categoriesOpen">
                <ul class="category-grid grid sm:grid-cols-2 gap-x-2 gap-0.5 mt-1 text-typ-tone font-medium text-[0.8rem] -mb-1.5">
                    {{#get "tags" limit="10" include="count.posts"}}
                        {{#foreach tags}}
                            <li>
                                <a class="category-chip group flex items-center gap-2 leading-tight pl-0 pr-3 py-2 rounded-theme hover:bg-bgr-tone hover:px-3 hover:text-typ transition-[padding]" href="{{url}}" aria-label="{{name}}"{{#if accent_color}} style="--color-accent: {{accent_color}};"{{/if}}>
                                    <span class="category-chip__dot w-1 h-4 bg-accent rounded-sm rounded-l-none group-hover:size-2 group-hover:rounded-full transition-all"></span>
                                    <span class="category-chip__label flex-1 line-clamp-1 text-ellipsis">{{name}}</span>
                                    <span class="category-chip__count text-xs opacity-0 invisible group-hover:opacity-100 group-hover:visible font-medium">{{count.posts}}</span>
                                </a>
                            </li>
                        {{/foreach}}
                    {{/get}}
                </ul>
            </div>
        </section>

        <section class="sidebar-card">
            <div class="sidebar-card__header">
                <h2>Authors</h2>
            </div>
            <div class="author-list">
                {{#get "authors" limit="4" include="count.posts"}}
                            {{#foreach authors}}
                                <a class="author-list__item" href="{{url}}">
                                    {{#if profile_image}}
                                        <img class="avatar" src="{{img_url profile_image size="xxs"}}" alt="{{name}}">
                                    {{else}}
                                        <span class="avatar avatar--fallback">A</span>
                                    {{/if}}
                                    <span class="author-list__body">
                                        <strong>{{name}}</strong>
                                        <small>{{plural count.posts empty="No posts" singular="% post" plural="% posts"}}</small>
                                    </span>
                        </a>
                    {{/foreach}}
                {{/get}}
            </div>
        </section>

        <footer class="sidebar-footer">
            <a href="{{@custom.footer_primary_url}}">{{@custom.footer_primary_link}}</a>
            <a href="{{@custom.footer_secondary_url}}">{{@custom.footer_secondary_link}}</a>
            <a href="{{@custom.footer_tertiary_url}}">{{@custom.footer_tertiary_link}}</a>
            <a href="{{@custom.footer_quaternary_url}}">{{@custom.footer_quaternary_link}}</a>
            <button class="icon-button icon-button--plain" type="button" data-theme-toggle aria-label="Toggle theme">◐</button>
        </footer>
    </div>
</aside>
