<table st-table="trModel.displayedAvailable" st-safe-src="trModel.available"
  hz-table class="table-striped table-rsp table-detail modern">
  <thead>
    <tr>
      <th class="search-header" colspan="10">
        <search-bar group-classes="input-group-sm" icon-classes="fa-search">
        </search-bar>
      </th>
    </tr>
    <tr>
      <!-- <th class="reorder"></th> -->
      <th class="expander"></th>
      <th st-sort="name" st-sort-default class="rsp-p1">Name</th>
      <th st-sort="vcpus" class="rsp-p1">VCPUs</th>
      <th st-sort="ram" class="rsp-p1">RAM</th>
      <th st-sort="totalDisk" class="rsp-p2">Total Disk</th>
      <th st-sort="rootDisk" class="rsp-p2">Root Disk</th>
      <th st-sort="ephemeralDisk" class="rsp-p3">Ephemeral Disk</th>
      <th st-sort="isPublic" class="rsp-p3">Public</th>
      <th class="action-col"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-if="trCtrl.numDisplayedAvailable() === 0">
      <td colspan="10">
        <div class="no-rows-help">
          {$ ::trCtrl.helpText.noneAvailText $}
        </div>
      </td>
    </tr>
    <tr ng-repeat-start="row in trModel.displayedAvailable track by row.id" ng-if="!trCtrl.allocatedIds[row.id]">
      <!-- <td class="reorder"></td> -->
      <td class="expander">
        <span class="fa fa-chevron-right" hz-expand-detail
          title="{$ ::trCtrl.helpText.expandDetailsText $}"></span>
      </td>
      <td class="rsp-p1">{$ row.name $}</td>
      <td class="rsp-p1">
        <span class="invalid fa fa-exclamation-circle"
          ng-show="row.warnings && row.warnings.vcpus"
          popover="{$ row.warnings | warningText:'vcpus' $}"
          popover-trigger="mouseenter mouseleave" popover-placement="top"></span>
        {$ row.vcpus $}
      </td>
      <td class="rsp-p1">
        <span class="invalid fa fa-exclamation-circle"
          ng-show="row.warnings && row.warnings.ram"
          popover="{$ row.warnings | warningText:'ram' $}"
          popover-trigger="mouseenter mouseleave" popover-placement="top"></span>
        {$ row.ram $}
      </td>
      <td class="rsp-p2">{$ row.totalDisk $}</td>
      <td class="rsp-p2">{$ row.rootDisk $}</td>
      <td class="rsp-p3">{$ row.ephemeralDisk $}</td>
      <td class="rsp-p3">{$ row.isPublic $}</td>
      <td class="action-col">
        <action-list button-tooltip="row.warningMessage"
          bt-model="trCtrl.tooltipModel" bt-disabled="!row.disabled"
          warning-classes="'invalid'">
          <notifications>
            <span class="fa fa-exclamation-circle invalid" ng-show="row.disabled"></span>
          </notifications>
          <action action-classes="'btn btn-sm btn-default'"
            callback="trCtrl.allocate" item="row" disabled="row.disabled">
            <span class="fa fa-plus"></span>
          </action>
        </action-list>
      </td>
    </tr>
    <tr ng-repeat-end class="detail-row" ng-if="!trCtrl.allocatedIds[row.id]">
      <!-- <td class="reorder"></td> -->
      <td></td>
      <td colspan="8" class="detail">
        <ul>
          <li>Name: {$ row.name $}</li>
          <li>Name: {$ row.vcpus $}</li>
          <li>Name: {$ row.ram $}</li>
          <li>Name: {$ row.totalDisk $}</li>
          <li>Name: {$ row.rootDisk $}</li>
          <li>Name: {$ row.ephemeralDisk $}</li>
          <li>Name: {$ row.isPublic $}</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>