<!-- Faraday Penetration Test IDE -->
<!-- Copyright (C) 2013  Infobyte LLC (http://www.infobytesec.com/) -->
<!-- See the file 'doc/LICENSE' for the license information -->

<div class='col-lg-2' ng-controller="topServicesCtrl">
    <article id='treemap' class='panel panel-default'>
        <header>
            <h2>
                <a class="treemap-view" href="" ng-disabled="{{nodata}}" ng-click="treemap(topServices)">Top Services</a>
                <span class="glyphicon glyphicon-info-sign" uib-tooltip="Top 5 services with the largest quantity of hosts"></span>
            </h2>
        </header>
        <span id="treemapText"></span>
        <div ng-if="topServices == undefined || topServices.length < 5" class="alert alert-info alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">
                <span aria-hidden="true">&times;</span>
                <span class="sr-only">Close</span>
            </button>
            <p>At least 5 services needed to show this visualization</p>
        </div>
        <d3-treemap data="topServices"></d3-treemap>
    </article>
</div>