<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">
                <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">Tags</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">
                        {{#get "tags" limit="6" include="count.posts"}}
                            {{#foreach tags}}
                                <li><a class="menu-sub-link" href="{{url}}">{{name}}</a></li>
                            {{/foreach}}
                        {{/get}}
                    </ul>
                </div>
            </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">Authors</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">
                        {{#get "authors" limit="6" include="count.posts"}}
                            {{#foreach authors}}
                                <li><a class="menu-sub-link" href="{{url}}">{{name}}</a></li>
                            {{/foreach}}
                        {{/get}}
                    </ul>
                </div>
            </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">
            <div class="sidebar-card__header">
                <h2>Categories</h2>
            </div>
            <div class="category-grid">
                {{#get "tags" limit="10" include="count.posts"}}
                    {{#foreach tags}}
                        <a class="category-chip" href="{{url}}"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>
                            <span class="category-chip__dot"></span>
                            <span class="category-chip__label">{{name}}</span>
                        </a>
                    {{/foreach}}
                {{/get}}
            </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>
