{{#content.componentStats}}
    <div role="heading" class="atlas-welcome">
        <div class="atlas-welcome__column">
            <div role="heading" aria-level="1" class="atlas-welcome__title">
                Wel&shy;come to <strong>{{projectName}}</strong> atlas
            </div>
            <div class="atlas-coverage">
                {{#coverage}}
                    <div class="atlas-coverage__line">
                        <span class="atlas-coverage__digit">{{coveredPercent}}%</span> of project is covered
                    </div>
                    <div class="atlas-coverage__graph-container">
                        <svg class="atlas-coverage__graph" viewBox="0 0 {{graph.all}} 6">
                            <rect class="atlas-coverage__all" width="{{graph.all}}" height="6" fill="#a7c6ed" rx="3" ry="3"></rect>
                            <rect class="atlas-coverage__covered" width="{{graph.covered}}" height="6" fill="#307fe2" rx="3" ry="3"></rect>
                        </svg>
                    </div>
                    <div class="atlas-coverage__line">{{covered}} from {{all}} components</div>
                {{/coverage}}
            </div>
        </div>
    </div>
{{/content.componentStats}}