<article class='panel' ng-controller="compoundCtrl">
    <header>
        <h2><a href="#/hosts/ws/{{workspace}}">Hosts</a>
            <span class="glyphicon glyphicon-info-sign" uib-tooltip="All hosts, each one showing its service count and operating system. By clicking on a host IP you can access a list with all of its services"></span>
        </h2>
    </header>
    <div ng-if="hosts.length === 0" class="no-info-overlay">
        <p class="no-info-text">No hosts found yet.</p>
    </div>
    <div class="ph-xl">
      <table id="hosts" ng-if="hosts.length > 0" class="tablesorter table table-striped text-left">
          <thead>
              <tr>
                  <th class="text-left"><span ng-click="toggleSort('name')">Host</span></th>
                  <th class="text-left"><span ng-click="toggleSort('services')">Services</span></th>
                  <th class="text-left"><span ng-click="toggleSort('os')">OS</span></th>
              </tr>
          </thead>
          <tbody>
              <tr ng-repeat="host in hosts | limitTo:5">
                  <td class="">
                      <a href="" class="host" ng-click="showServices(host)">{{host.name}}</a>
                      <a href="//www.shodan.io/search?query={{host.ip}}" uib-tooltip="Search in shodan" target="_blank">
                          <img ng-src="/images/shodan.png" height="15px" width="15px" />
                      </a>
                  </td>
                  <td class="">{{host.services}}</td>
                  <td class="">
                      <img ng-if="host.icon != undefined" ng-src="images/{{host.icon}}.png" uib-tooltip="{{host.os}}"/>
                      <span ng-if="host.icon == undefined" class="fa fa-laptop pl-xs" uib-tooltip="{{host.os}}"></span>
                  </td>
              </tr>
          </tbody>
      </table>
    </div>
</article>
