<ol class="breadcrumb">
  <li>
    <a class="badge badge-type" href="#">Master</a>
  </li>
  <li class="active">
    <span class="badge badge-type">Framework</span>
    {{framework.id}}
  </li>
</ol>

<div class="alert alert-error hidden" id="alert">
  <button class="close" data-dismiss="alert">×</button>
  <strong>{{alert_message}}</strong>
</div>

<div class="row" id="framework">
  <div class="col-md-3">
    <div class="well">
      <dl class="inline clearfix">
        <dt>Name:</dt>
        <dd>{{framework.name}}</dd>
        <dt ng-show="framework.webui_url">Web UI:</dt>
        <dd ng-show="framework.webui_url"><a href="{{framework.webui_url}}">{{framework.webui_url}}</a></dd>
        <dt>User:</dt>
        <dd>{{framework.user}}</dd>
        <!-- TODO(bmahler): Consider having a break between each role
             in order to increase readability. Also, this doesn't
             display well when there are a lot of roles (e.g. a large
             organization with a lot of teams & services, using roles
             like /engineering/frontend/webserver, etc). -->
        <dt>Roles:</dt>
        <dd>{{framework.roles.toString()}}</dd>
        <dt>Principal:</dt>
        <dd>{{framework.principal}}</dd>
        <dt>Registered:</dt>
        <dd>
          <m-timestamp value="{{framework.registered_time * 1000}}"></m-timestamp>
        </dd>
        <dt>Re-registered:</dt>
        <dd ng-if="!framework.reregistered_time">-</dd>
        <dd ng-if="framework.reregistered_time">
          <m-timestamp value="{{framework.reregistered_time * 1000}}"></m-timestamp>
        </dd>
        <dt>Active tasks:</dt>
        <dd>{{framework.tasks.length | number}}</dd>
      </dl>

      <h4>Resources</h4>
      <table class="table table-condensed">
        <thead>
          <tr>
            <td></td>
            <td class="text-right">Allocated</td>
            <td class="text-right">Offered</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>CPUs</td>
            <td class="text-right">
              {{framework.used_resources.cpus | number}}
            </td>
            <td class="text-right">
              {{framework.offered_resources.cpus | number}}
            </td>
          </tr>
          <tr>
            <td>GPUs</td>
            <td class="text-right">
              {{framework.used_resources.gpus | number}}
            </td>
            <td class="text-right">
              {{framework.offered_resources.gpus | number}}
            </td>
          </tr>
          <tr>
            <td>Memory</td>
            <td class="text-right">
              {{framework.used_resources.mem * (1024 * 1024) | dataSize}}
            </td>
            <td class="text-right">
              {{framework.offered_resources.mem * (1024 * 1024) | dataSize}}
            </td>
          </tr>
          <tr>
            <td>Disk</td>
            <td class="text-right">
              {{framework.used_resources.mem * (1024 * 1024) | dataSize}}
            </td>
            <td class="text-right">
              {{framework.offered_resources.mem * (1024 * 1024) | dataSize}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="col-md-9">
    <table m-table table-content="framework.tasks" title="Active Tasks"
      class="table table-striped table-bordered table-condensed">
      <thead>
        <tr>
          <th data-key="id">ID</th>
          <th data-key="name">Name</th>
          <th data-key="role">Role</th>
          <th data-key="state">State</th>
          <th data-key="start_time">Started</th>
          <th data-key="host">Host</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="task in $data">
          <td>
            <a href="#/agents/{{task.slave_id}}/frameworks/{{task.framework_id}}/executors/{{task.executor_id}}">
              {{task.id}}
            </a>
          </td>
          <td>{{task.name}}</td>
          <td>{{task.role}}</td>
          <td>{{task.state | truncateMesosState}}</td>
          <td>
            <m-timestamp value="{{task.start_time}}"></m-timestamp>
          </td>
          <td>
            <span data-ng-show="agents[task.slave_id]">
              {{agents[task.slave_id].hostname}}
            </span>
            <span class="text-muted" data-ng-show="!agents[task.slave_id]">
              Agent offline
            </span>
          </td>
          <td>
            <a data-ng-show="agents[task.slave_id]" href="#/agents/{{task.slave_id}}/frameworks/{{task.framework_id}}/executors/{{task.executor_id}}/tasks/{{task.id}}/browse">
              Sandbox
            </a>
            <span class="text-muted" data-ng-show="!agents[task.slave_id]">
              Agent offline
            </span>
          </td>
        </tr>
      </tbody>
    </table>

    <table m-table table-content="framework.unreachable_tasks" title="Unreachable Tasks"
      class="table table-striped table-bordered table-condensed">
      <thead>
        <tr>
          <th data-key="id">ID</th>
          <th data-key="name">Name</th>
          <th data-key="role">Role</th>
          <th data-key="start_time">Started</th>
          <th data-key="agent_id">Agent ID</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="task in $data">
          <td>{{task.id}}</td>
          <td>{{task.name}}</td>
          <td>{{task.role}}</td>
          <td>
            <m-timestamp value="{{task.start_time}}"></m-timestamp>
          </td>
          <td>{{task.slave_id}}</td>
        </tr>
      </tbody>
    </table>

    <table m-table table-content="framework.completed_tasks" title="Completed Tasks"
      class="table table-striped table-bordered table-condensed">
      <thead>
        <tr>
          <th data-key="id">ID</th>
          <th data-key="name">Name</th>
          <th data-key="role">Role</th>
          <th data-key="state">State</th>
          <th data-key="start_time">Started</th>
          <th data-key="finish_time">Stopped</th>
          <th data-key="host">Host</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="task in $data">
          <td>{{task.id}}</td>
          <td>{{task.name}}</td>
          <td>{{task.role}}</td>
          <td>{{task.state | truncateMesosState}}</td>
          <td>
            <m-timestamp value="{{task.start_time}}"></m-timestamp>
          </td>
          <td>
            <m-timestamp value="{{task.finish_time}}"></m-timestamp>
          </td>
          <td>
            <a data-ng-show="agents[task.slave_id]"
                href="#/agents/{{task.slave_id}}/frameworks/{{task.framework_id}}/executors/{{task.executor_id}}">
              {{agents[task.slave_id].hostname}}
            </a>
            <span class="text-muted" data-ng-show="!agents[task.slave_id]">
              Agent offline
            </span>
          </td>
          <td>
            <a data-ng-show="agents[task.slave_id]" href="#/agents/{{task.slave_id}}/frameworks/{{task.framework_id}}/executors/{{task.executor_id}}/tasks/{{task.id}}/browse">
              Sandbox
            </a>
            <span class="text-muted" data-ng-show="!agents[task.slave_id]">
              Agent offline
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>