<section>
    <h3 id="index">{{t "index" }}</h3>
    <table class="table table-sm table-bordered index-table">
        <tbody>
            {{#if properties}}
                {{#compare properties.length ">" 0}}
                <tr>
                    <td class="col-md-4">
                        <h6><b>{{t "properties" }}</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                        {{#each properties}}
                            <li>
                                {{#each modifierKind}}
                                    <span class="modifier">{{modifKind this}}</span>
                                {{/each}}
                                {{#if optional}}
                                    <span class="modifier">{{t "optional" }}</span>
                                {{/if}}
                                <a href="#{{name}}">{{name}}</a>
                            </li>
                        {{/each}}
                        </ul>
                    </td>
                </tr>
                {{/compare}}
            {{/if}}

            {{#if methods}}
                {{#compare methods.length ">" 0}}
                <tr>
                    <td class="col-md-4">
                        <h6><b>{{t "methods" }}</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                        {{#each methods}}
                            <li>
                                {{#each modifierKind}}
                                    <span class="modifier">{{modifKind this}}</span>
                                {{/each}}
                                {{#if optional}}
                                    <span class="modifier">{{t "optional" }}</span>
                                {{/if}}
                                <a href="#{{name}}">{{name}}</a>
                            </li>
                        {{/each}}
                        </ul>
                    </td>
                </tr>
                {{/compare}}
            {{/if}}

            {{#if inputs}}
                {{#compare inputs.length ">" 0}}
                <tr>
                    <td class="col-md-4">
                        <h6><b>{{t "inputs" }}</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                        {{#each inputs}}
                            <li>
                                <a href="#{{name}}">{{name}}</a>
                            </li>
                        {{/each}}
                        </ul>
                    </td>
                </tr>
                {{/compare}}
            {{/if}}

            {{#if outputs}}
                {{#compare outputs.length ">" 0}}
                <tr>
                    <td class="col-md-4">
                        <h6><b>{{t "outputs" }}</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                        {{#each outputs}}
                            <li>
                                <a href="#{{name}}">{{name}}</a>
                            </li>
                        {{/each}}
                        </ul>
                    </td>
                </tr>
                {{/compare}}
            {{/if}}

            {{#if hostBindings}}
                {{#compare hostBindings.length ">" 0}}
                <tr>
                    <td class="col-md-4">
                        <h6><b>{{t "hostbindings"}}</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                        {{#each hostBindings}}
                            <li>
                                <a href="#{{name}}">{{name}}</a>
                            </li>
                        {{/each}}
                        </ul>
                    </td>
                </tr>
                {{/compare}}
            {{/if}}

            {{#if hostListeners}}
                {{#compare hostListeners.length ">" 0}}
                <tr>
                    <td class="col-md-4">
                        <h6><b>{{t "hostlisteners"}}</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                        {{#each hostListeners}}
                            <li>
                                <a href="#{{name}}">{{name}}</a>
                            </li>
                        {{/each}}
                        </ul>
                    </td>
                </tr>
                {{/compare}}
            {{/if}}

            {{#if accessors}}
                {{#objectLength accessors ">" 0}}
                    <tr>
                        <td class="col-md-4">
                            <h6><b>{{t "accessors" }}</b></h6>
                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-4">
                            <ul class="index-list">
                            {{#each accessors}}
                                <li>
                                    {{#each modifierKind}}
                                        <span class="modifier">{{modifKind this}}</span>
                                    {{/each}}
                                    <a href="#{{@key}}">{{@key}}</a>
                                </li>
                            {{/each}}
                            </ul>
                        </td>
                    </tr>
                {{/objectLength}}
            {{/if}}
        </tbody>
    </table>
</section>
