{{#unless emptyState}}
    <div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop'}}">
        <div class="header">
            <div class="title">Contents</div>
            {{#if canEdit}}
                <div id="tocToolbar" class="toc-controls {{if state.actionablePage 'current-page'}}">
                    <div id="toc-up-button" class="button-icon-green button-icon-small {{if state.upDisabled 'disabled'}}" {{action 'pageUp'}}>
                        <i class="material-icons">arrow_upward</i>
                    </div>
                    <div class="button-icon-gap" />
                    <div id="toc-down-button" class="button-icon-green button-icon-small {{if state.downDisabled 'disabled'}}" {{action 'pageDown'}}>
                        <i class="material-icons">arrow_downward</i>
                    </div>
                    <div class="button-icon-gap" />
                    <div id="toc-outdent-button" class="button-icon-green button-icon-small {{if state.outdentDisabled 'disabled'}}" {{action 'pageOutdent'}}>
                        <i class="material-icons">arrow_back</i>
                    </div>
                    <div class="button-icon-gap" />
                    <div id="toc-indent-button" class="button-icon-green button-icon-small {{if state.indentDisabled 'disabled'}}" {{action 'pageIndent'}}>
                        <i class="material-icons">arrow_forward</i>
                    </div>
                </div>
            {{/if}}
        </div>

        <ul class="index-list">
            {{#each pages key="id" as |item index|}}
                <li class="item">
                    <a id="index-{{item.page.id}}" {{action 'onGotoPage' item.page.id}}
                        class="link toc-index-item {{item.page.tocIndentCss}} {{if (eq item.page.id state.pageId) 'selected'}}">
                        <span class="numbering">{{item.page.numbering}}</span>
                        {{#if (or item.userHasChangePending userHasNewPagePending)}}
                            <span class="color-red" title="Pending approval" data-toggle="tooltip" data-placement="top">[*]&nbsp;</span>
                        {{/if}}
                        {{#if (or permissions.documentApprove roles.documentApprove)}}
                            {{#if item.changeAwaitingReview}}
                                <span class="color-green" title="Awaiting approval" data-toggle="tooltip" data-placement="top">[*]&nbsp;</span>
                            {{/if}}
                        {{/if}}
                        {{item.page.title}}
                    </a>
                </li>
            {{/each}}
        </ul>
    </div>
{{/unless}}