<ol class="breadcrumb">
    <li>{{t "overview" }}</li>
</ol>
{{#unless disableGraph}} {{#unless disableMainGraph}} {{#if modules}}
<div class="text-center module-graph-container">
    <div id="module-graph-svg">
        {{{ mainGraph }}}
    </div>
    <i id="fullscreen" class="icon ion-ios-resize module-graph-fullscreen-btn" aria-hidden="true"></i>
    <div class="btn-group">
        <button id="zoom-in" class="btn btn-default btn-sm">{{t "zoomin" }}</button>
        <button id="reset" class="btn btn-default btn-sm">{{t "reset" }}</button>
        <button id="zoom-out" class="btn btn-default btn-sm">{{t "zoomout" }}</button>
    </div>
</div>
{{/if}} {{/unless}} {{/unless}}
<div class="container-fluid overview">
    <div class="row">
        {{#if modules}}
        <div class="col-sm-3">
            <div class="card text-center">
                <div class="card-block">
                    <h4 class="card-title"><span class="icon ion-ios-archive"></span></h4>
                    <p class="card-text">
                        <a href="./modules.html">{{ modules.length }} {{#compare modules.length "===" 1}}{{t "module" }}{{/compare}}{{#compare
                            modules.length ">" 1}}{{t "modules" }}{{/compare}}</a>
                    </p>
                </div>
            </div>
        </div>
        {{/if}}
        {{#if components}}
        <div class="col-sm-3">
            <div class="card text-center">
                <div class="card-block">
                    <h4 class="card-title"><span class="icon ion-md-cog"></span></h4>
                    <p class="card-text">{{ components.length }} {{#compare components.length "===" 1}}{{t "component" }}{{/compare}}{{#compare
                        components.length ">" 1}}{{t "components" }}{{/compare}}</p>
                </div>
            </div>
        </div>
        {{/if}}
        {{#if controllers}}
        <div class="col-sm-3">
            <div class="card text-center">
                <div class="card-block">
                    <h4 class="card-title"><span class="icon ion-md-swap"></span></h4>
                    <p class="card-text">{{ controllers.length }} {{#compare controllers.length "===" 1}}{{t "controller" }}{{/compare}}{{#compare
                        controllers.length ">" 1}}{{t "controllers" }}{{/compare}}</p>
                </div>
            </div>
        </div>
        {{/if}}
        {{#if directives}}
        <div class="col-sm-3">
            <div class="card text-center">
                <div class="card-block">
                    <h4 class="card-title"><span class="icon ion-md-code-working"></span></h4>
                    <p class="card-text">{{ directives.length }} {{#compare directives.length "===" 1}}{{t "directive" }}{{/compare}}{{#compare
                        directives.length ">" 1}}{{t "directives" }}{{/compare}}</p>
                </div>
            </div>
        </div>
        {{/if}}
        {{#if injectables}}
        <div class="col-sm-3">
            <div class="card text-center">
                <div class="card-block">
                    <h4 class="card-title"><span class="icon ion-md-arrow-round-down"></span></h4>
                    <p class="card-text">{{ injectables.length }} {{#compare injectables.length "===" 1}}{{t "injectable"
                        }}{{/compare}}{{#compare injectables.length ">" 1}}{{t "injectables" }}{{/compare}}</p>
                </div>
            </div>
        </div>
        {{/if}}
        {{#if pipes}}
        <div class="col-sm-3">
            <div class="card text-center">
                <div class="card-block">
                    <h4 class="card-title"><span class="icon ion-md-add"></span></h4>
                    <p class="card-text">{{ pipes.length }} {{#compare pipes.length "===" 1}}{{t "pipe" }}{{/compare}}{{#compare
                        pipes.length ">" 1}}{{t "pipes" }}{{/compare}}</p>
                </div>
            </div>
        </div>
        {{/if}}
        {{#if classes}}
        <div class="col-sm-3">
            <div class="card text-center">
                <div class="card-block">
                    <h4 class="card-title"><span class="icon ion-ios-paper"></span></h4>
                    <p class="card-text">{{ classes.length }} {{#compare classes.length "===" 1}}{{t "classe" }}{{/compare}}{{#compare
                        classes.length ">" 1}}{{t "classes" }}{{/compare}}</p>
                </div>
            </div>
        </div>
        {{/if}}
        {{#if guards}}
        <div class="col-sm-3">
            <div class="card text-center">
                <div class="card-block">
                    <h4 class="card-title"><span class="icon ion-ios-lock"></span></h4>
                    <p class="card-text">{{ guards.length }} {{#compare guards.length "===" 1}}{{t "guard" }}{{/compare}}{{#compare
                        guards.length ">" 1}}{{t "guards" }}{{/compare}}</p>
                </div>
            </div>
        </div>
        {{/if}}
        {{#if interfaces}}
        <div class="col-sm-3">
            <div class="card text-center">
                <div class="card-block">
                    <h4 class="card-title"><span class="icon ion-md-information-circle-outline"></span></h4>
                    <p class="card-text">{{ interfaces.length }} {{#compare interfaces.length "===" 1}}{{t "interface" }}{{/compare}}{{#compare
                        interfaces.length ">" 1}}{{t "interfaces" }}{{/compare}}</p>
                </div>
            </div>
        </div>
        {{/if}}
        {{#if routes}}
        <div class="col-sm-3">
            <div class="card text-center">
                <div class="card-block">
                    <h4 class="card-title"><span class="icon ion-ios-git-branch"></span></h4>
                    <p class="card-text">
                        <a href="./routes.html">{{ routesLength }} {{#compare routesLength "===" 1}}{{t "route" }}{{/compare}}{{#compare
                            routesLength ">" 1}}{{t "routes" }}{{/compare}}</a>
                    </p>
                </div>
            </div>
        </div>
        {{/if}}
    </div>
</div>
{{#unless disableGraph}}
<script src="js/libs/svg-pan-zoom.min.js"></script>
<script src="js/svg-pan-zoom.controls.js"></script> {{/unless}}