<div class="content">
  <project-page>
    <div>
      <div class="page-header page-header-bleed-right">
        <h1>Pods</h1>
      </div>
      <alerts alerts="alerts"></alerts>
      <table class="table table-bordered table-hover table-mobile">
        <thead>
          <tr>
            <th>Name</th>
            <th>Status</th>
            <th>Containers Ready</th>
            <th>Container Restarts</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody ng-if="(pods | hashSize) == 0">
          <tr><td colspan="5"><em>{{emptyMessage}}</em></td></tr>
        </tbody>
        <tbody ng-repeat="pod in pods | orderObjectsByDate : true">
          <tr>
            <td data-title="Name">
              <a href="{{pod | navigateResourceURL}}">{{pod.metadata.name}}</a>
              <span ng-if="pod | isTroubledPod">
                <pod-warnings pod="pod" style="vertical-align: middle;"></pod-warnings>
              </span>
            </td>
            <td data-title="Status">
              <div row class="status">
                <status-icon status="pod.status.phase" disable-animation></status-icon>
                <span flex>{{pod.status.phase}}</span>
              </div>
            </td>
            <td data-title="Ready">{{pod | numContainersReady}}/{{pod.spec.containers.length}}</td>
            <td data-title="Restarts">{{pod | numContainerRestarts}}</td>
            <td data-title="Age"><relative-timestamp timestamp="pod.metadata.creationTimestamp" drop-suffix="true"></relative-timestamp></td>
          </tr>
        </tbody>
      </table>
    </div>
  </project-page>
</div>
