{{#content.componentStats}}
    <div role="complementary" class="atlas-component-footer">
        <div class="atlas-component-footer__item">
            <div role="region" class="atlas-component-footer__section" aria-label="Ruleset sizes">
                <figure class="atlas-info-digit _primary">
                    <div class="atlas-info-digit__digit">
                        {{totalDeclarations}}
                    </div>
                    <figcaption class="atlas-info-digit__details">
                        <div role="heading" aria-level="3" class="atlas-info-digit__title">
                            Total declarations
                        </div>
                    </figcaption>
                </figure>
                <svg width="300" height="80" viewBox="0 0 300 80" class="atlas-info-digit atlas-sparkline" aria-labelledby="component-graph-title">
                    <title id="component-graph-title">Declaration sets size through the file</title>
                    <g class="atlas-sparkline__line">
                        <g class="atlas-sparkline__shadow">
                            <path d="{{ruleSetsLine}}" stroke="currentColor" fill="none" filter="url(#blur-filter)"/>
                        </g>
                        <path d="{{ruleSetsLine}}" stroke="currentColor" fill="none"/>
                    </g>
                </svg>
            </div>
        {{#stats}}
            <div role="region" class="atlas-component-footer__section" aria-label="Health check">
                {{#important}}
                    <figure class="atlas-info-digit">
                        <div class="atlas-info-digit__digit">
                            {{total}}
                        </div>
                        <figcaption class="atlas-info-digit__details">
                            <div role="heading" aria-level="3" class="atlas-info-digit__title">
                                {{#pluralize}}{{values.length}},Important<br>declaration,Important<br>declarations{{/pluralize}}
                            </div>
                            {{#values.length}}
                            <div role="list" class="atlas-info-digit__popup">
                                {{#values}}
                                    <div role="listitem" class="atlas-info-digit__item">{{prop}}</div>
                                {{/values}}
                            </div>
                            {{/values.length}}
                        </figcaption>
                    </figure>
                {{/important}}
                {{#vendorPrefix}}
                    <figure class="atlas-info-digit">
                        <div class="atlas-info-digit__digit">
                            {{total}}
                        </div>
                        <figcaption class="atlas-info-digit__details">
                            <div role="heading" aria-level="3" class="atlas-info-digit__title">
                                {{#pluralize}}{{values.length}},Vendor<br>prefix,Vendor<br>prefixes{{/pluralize}}
                            </div>
                            {{#values.length}}
                                <div role="list" class="atlas-info-digit__popup">
                                    {{#values}}
                                        <div role="listitem" class="atlas-info-digit__item">{{prop}}{{value}}</div>
                                    {{/values}}
                                </div>
                            {{/values.length}}
                        </figcaption>
                    </figure>
                {{/vendorPrefix}}
                {{#float}}
                    <figure class="atlas-info-digit">
                        <div class="atlas-info-digit__digit">
                            {{total}}
                        </div>
                        <figcaption class="atlas-info-digit__details">
                            <div role="heading" aria-level="3" class="atlas-info-digit__title">
                                {{#pluralize}}{{values.length}},Float<br>declared,Floats<br>declared{{/pluralize}}
                            </div>
                            {{#values.length}}
                                <div role="list" class="atlas-info-digit__popup">
                                    {{#values}}
                                        <div role="listitem" class="atlas-info-digit__item">{{.}}</div>
                                    {{/values}}
                                </div>
                            {{/values.length}}
                        </figcaption>
                    </figure>
                {{/float}}
            </div>
        {{/stats}}
            <div role="region" class="atlas-component-footer__section" aria-label="Most used properties">
                <div role="list" class="atlas-info-list">
                {{#mostProps}}
                    <div role="listitem" class="atlas-info-list__item">
                        <span class="atlas-info-list__total">{{total}}</span>
                        <span class="atlas-info-list__name">{{name}}</span>
                    </div>
                {{/mostProps}}
                </div>
            </div>
            {{#usedConstants.length}}
                <div role="region" class="atlas-component-footer__section" aria-label="Used constants">
                    <div role="list" class="atlas-constant">
                    {{#usedConstants}}
                        {{#consistency}}
                            <div role="listitem" class="atlas-constant__item">
                                <div class="atlas-constant__caption">
                                    <div class="atlas-constant__name">{{name}}</div>
                                </div>
                                <div role="list" class="atlas-constant__details">
                                    {{#allOk}}
                                        <span class="atlas-constant__status _success">
                                            <svg role="img" width="16" height="16">
                                                <use xlink:href="#icon-good"></use>
                                            </svg>
                                            Consistent
                                        </span>
                                    {{/allOk}}
                                    {{#notInConstants.count}}
                                        <div class="atlas-constant__status _error">
                                            {{notInConstants.count}}
                                            {{#pluralize}}{{notInConstants.count}},issue,issues{{/pluralize}}
                                        </div>
                                        {{#notInConstants.values}}
                                            <div role="listitem" class="atlas-constant__list">
                                                <span class="atlas-constant__counter _{{count}} _error">
                                                    <svg role="img" width="16" height="16">
                                                        <use xlink:href="#icon-circle"></use>
                                                    </svg>
                                                    <span class="atlas-constant__counter-digit">
                                                        {{count}}
                                                    </span>
                                                </span>
                                                <code>{{value}}</code>&ensp;
                                            </div>
                                        {{/notInConstants.values}}
                                    {{/notInConstants.count}}
                                    {{#consider}}
                                        <div role="listitem" class="atlas-constant__list">
                                            <span class="atlas-constant__counter _{{count}} _warn">
                                                <svg role="img" width="16" height="16">
                                                    <use xlink:href="#icon-triangle"></use>
                                                </svg>
                                                <span class="atlas-constant__counter-digit">
                                                    {{count}}
                                                </span>
                                            </span>
                                            <code>{{from}}</code> could be changed to <code>{{to}}</code>
                                        </div>
                                    {{/consider}}
                                </div>
                            </div>
                        {{/consistency}}
                    {{/usedConstants}}
                    </div>
                </div>
            {{/usedConstants.length}}
        </div>

        <div class="atlas-component-footer__item">
            <div role="region" class="atlas-component-structure" aria-labelledby="atlas-component-structure">
                <div role="heading" aria-level="3" class="atlas-component-structure__title" id="atlas-component-structure">
                    Component structure
                </div>
                <div class="atlas-component-structure__nodes" role="list">
                    {{>componentstructure}}
                </div>
            </div>
        </div>
    </div>
{{/content.componentStats}}