<h3>Overview</h3>
{{#unless disableGraph}}
<div class="text-center">
    <object id="demo-svg" type="image/svg+xml" data="graph/dependencies.svg" style="width: 100%; height: 250px;">
            Your browser does not support SVG
    </object>
    <div class="btn-group">
        <button id="zoom-in" class="btn btn-default btn-sm">Zoom in</button>
        <button id="reset" class="btn btn-default btn-sm">Reset</button>
        <button id="zoom-out" class="btn btn-default btn-sm">Zoom out</button>
    </div>
</div>
{{/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="fa fa-archive"></span></h4>
                        <p class="card-text">
                            <a href="./modules.html">{{ modules.length }} module{{#compare modules.length ">" 1}}s{{/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="fa fa-cogs"></span></h4>
                        <p class="card-text">{{ components.length }} component{{#compare components.length ">" 1}}s{{/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="fa fa-code"></span></h4>
                        <p class="card-text">{{ directives.length }} directive{{#compare directives.length ">" 1}}s{{/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="fa fa-code-fork"></span></h4>
                        <p class="card-text">{{ injectables.length }} injectable{{#compare injectables.length ">" 1}}s{{/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="fa fa-plus"></span></h4>
                        <p class="card-text">{{ pipes.length }} pipe{{#compare pipes.length ">" 1}}s{{/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="fa fa-file-code-o"></span></h4>
                        <p class="card-text">{{ classes.length }} class{{#compare classes.length ">" 1}}es{{/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="fa fa-info"></span></h4>
                        <p class="card-text">{{ interfaces.length }} interface{{#compare interfaces.length ">" 1}}s{{/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="fa fa-code-fork"></span></h4>
                        <p class="card-text">
                            <a href="./routes.html">{{ routes.length }} routes</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}}