{{#content.componentStats}}
    <div role="complementary" class="atlas-component-aside">
        <div role="region" class="atlas-component-aside__section" aria-labelledby="atlas-component-included-in">
            <div role="heading" aria-level="3" class="atlas-component-aside__title" id="atlas-component-included-in">
                Included in:
            </div>
            <div role="list" class="atlas-component-aside__list">
                {{^importedBy}}
                    <div role="listitem" class="atlas-component-aside__list-item">
                        <svg role="img" width="12" height="12" style="top:-1px">
                            <use xlink:href="#icon-bad"></use>
                        </svg>
                        Not included in any file!
                    </div>
                {{/importedBy}}
                {{#importedBy}}
                    <div role="listitem" class="atlas-component-aside__list-item">
                        <svg role="img" width="16" height="16">
                            <use xlink:href="#icon-out"></use>
                        </svg>
                        {{.}}
                    </div>
                {{/importedBy}}
            </div>
        </div>
        {{#includes.length}}
        <div role="region" class="atlas-component-aside__section" aria-labelledby="atlas-component-depends-from">
            <div role="heading" aria-level="3" class="atlas-component-aside__title" id="atlas-component-depends-from">
                Depends from:
            </div>
            <div role="list" class="atlas-component-aside__list">
                {{#includes}}
                    <div role="listitem" class="atlas-component-aside__list-item">
                        <svg role="img" width="16" height="16">
                            <use xlink:href="#icon-component"></use>
                        </svg>
                        {{.}}
                    </div>
                {{/includes}}
            </div>
        </div>
        {{/includes.length}}
        {{#variables.length}}
        <div role="region" class="atlas-component-aside__section" aria-labelledby="atlas-component-local-vars">
            <div role="heading" aria-level="3" class="atlas-component-aside__title" id="atlas-component-local-vars">
                Local variables:
            </div>
            <div role="list" class="atlas-component-aside__list">
                {{#variables}}
                    <div role="listitem" class="atlas-component-aside__list-item">
                        <svg role="img" width="16" height="16">
                            <use xlink:href="#icon-variable"></use>
                        </svg>
                        {{prop}}: {{value}}
                    </div>
                {{/variables}}
            </div>
        </div>
        {{/variables.length}}
        {{#imports.length}}
        <div role="region" class="atlas-component-aside__section" aria-labelledby="atlas-component-local-imports">
            <div role="heading" aria-level="3" class="atlas-component-aside__title" id="atlas-component-local-imports">
                Local imports:
            </div>
            <div role="list" class="atlas-component-aside__list">
                {{#imports}}
                    <div role="listitem" class="atlas-component-aside__list-item">
                        <svg role="img" width="16" height="16">
                            <use xlink:href="#icon-in"></use>
                        </svg>
                        {{.}}
                    </div>
                {{/imports}}
            </div>
        </div>
        {{/imports.length}}
    </div>
{{/content.componentStats}}