<div class="page-header">
    <h1>Dashboard / Statistics</h1>
</div>

<h2><a ui-sref="list({entity: 'nodes'})">Nodes</a></h2>

<div class="row">
    <div class="col-lg-3">
        <a ui-sref="list({entity: 'nodes'})">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-circle-o fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{ stats.nodes.registered }}</div>
                            <div>Total Registered</div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-3">
        <a ui-sref="list({entity: 'nodes', search: {hasKey: true}})">
            <div class="panel panel-yellow">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-lock fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{ stats.nodes.withVPN }}</div>
                            <div>With VPN-Key</div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-lg-3">
        <a ui-sref="list({entity: 'nodes', search: {hasCoords: true}})">
            <div class="panel panel-green">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-map-marker fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{ stats.nodes.withCoords }}</div>
                            <div>With Coordinates</div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

<div class="row">
    <a ui-sref="list({entity: 'nodes', search: {monitoringState: 'active'}})">
        <div class="col-lg-3">
            <div class="panel panel-green">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-heartbeat fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{ stats.nodes.monitoring.active }}</div>
                            <div>Monitoring active</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </a>
    <a ui-sref="list({entity: 'nodes', search: {monitoringState: 'pending'}})">
        <div class="col-lg-3">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-envelope fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{ stats.nodes.monitoring.pending }}</div>
                            <div>Monitoring pending</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </a>
</div>