<ol class="breadcrumb">
  <li>
    <a class="badge badge-type" href="#/">Master</a>
  </li>
  <li class="active">
    <span class="badge badge-type">Outstanding Offers</span>
  </li>
</ol>

<table m-table table-content="offers" title="Outstanding Offers"
  class="table table-striped table-bordered table-condensed">
  <thead>
    <tr>
      <th data-key="id">ID</th>
      <th data-key="allocation_info.role">Role</th>
      <th data-key="framework_name">Framework</th>
      <th data-key="hostname">Host</th>
      <th data-key="resources.cpus">CPUs</th>
      <th data-key="resources.gpus">GPUs</th>
      <th data-key="resources.mem">Mem</th>
      <th data-key="resources.disk">Disk</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="offer in $data">
      <td>
        <abbr title="{{offer.id}}">{{offer.id | truncateMesosID}}</abbr>
      </td>
      <!-- Make this a link to the role overview -->
      <td>{{offer.allocation_info.role}}</td>
      <td>
        <a href="{{'#/frameworks/' + offer.framework_id}}">
          {{offer.framework_name}}
        </a>
      </td>
      <td>
        <a href="#/agents/{{agents[offer.slave_id].id}}">
          {{offer.hostname}}
        </a>
      </td>
      <td>{{offer.resources.cpus | number}}</td>
      <td>{{offer.resources.gpus | number}}</td>
      <td>{{offer.resources.mem * (1024 * 1024) | dataSize}}</td>
      <td>{{offer.resources.disk * (1024 * 1024) | dataSize}}</td>
    </tr>
  </tbody>
</table>