<div class="instance-detail">
  <section class="header">
    <h3>
      {{action-menu model=model classNames="pull-right"}}
      <div class="state {{model.stateColor}}">
        <i class="{{model.stateIcon}}"></i> {{model.displayState}}
      </div>
      <span>
        {{#if model.primaryHost}}
          {{#link-to "hosts"}}Hosts:{{/link-to}}
          {{#link-to "host" model.primaryHost.id}}{{model.primaryHost.displayName}}:{{/link-to}}
        {{else}}
          {{#link-to "containers"}}Containers:{{/link-to}}
        {{/if}}
        {{model.displayName}}
      </span>
    </h3>
    {{partial "description"}}
  </section>

  <section>
    {{#info-multi-stats model=model linkName="containerStats" single=true}}
      <ul class="list-lines">
        {{#if model.showTransitioningMessage}}
          <li>
            <label>Message</label>
            <span class="force-wrap {{model.stateColor}}">
              {{model.transitioningMessage}}
            </span>
          </li>
        {{/if}}

        <li>
          <label>Host IP</label>
          {{#if model.primaryHost}}
            {{model.primaryHost.displayIp}} {{zero-clipboard text=model.primaryHost.displayIp}}
          {{else}}
            <span class="text-muted">(No host)</span>
          {{/if}}
        </li>

        <li>
          <label>Container IP</label>
          {{model.displayIp}} {{zero-clipboard text=model.displayIp}}
        </li>

        <li>
          <label>Image</label>
          <span class="force-wrap">
            {{display-image model.imageUuid}} {{zero-clipboard text=model.imageUuid}}
          </span>
        </li>

        <li>
          <label>Entrypoint</label>
          <span class="force-wrap">
            {{#if model.entryPoint}}
              {{model.entryPoint}}
            {{else}}
              <span class="text-muted">None</span>
            {{/if}}
          </span>
        </li>
        <li>
          <label>Command</label>
          <span class="force-wrap">
            {{#if model.command}}
              {{model.command}}
            {{else}}
              <span class="text-muted">None</span>
            {{/if}}
          </span>
        </li>

      </ul>
    {{/info-multi-stats}}
  </section>

  <section class="well" style="margin-bottom: 0;">
    <label class="section">Labels</label>
    {{labels-section model=model}}
  </section>

  <section>
    <div class="well">
      <label>Ports</label>
      <table class="grid fixed">
        <thead>
          <tr>
            <th width="90">State</th>
            <th width="150">IP Address</th>
            <th>Public (on Host)</th>
            <th>Private (in Container)</th>
            <th width="90" class="text-right">Protocol</th>
          </tr>
        </thead>
        <tbody>
          {{#each ports as |port|}}
            <tr>
              <td>
                <span class="badge state {{port.stateBackground}}">
                  {{port.displayState}}
                </span>
              </td>
              <td>
                {{port.displayPublicIp}}
              </td>
              <td>
                {{#if port.publicPort}}
                  {{port.publicPort}}
                {{else}}
                  <span class="text-muted">None</span>
                {{/if}}
              </td>
              <td>
                {{#if port.privatePort}}
                  {{port.privatePort}}
                {{else}}
                  <span class="text-muted">None</span>
                {{/if}}
              </td>
              <td class="text-right">
                {{upper-case port.protocol}}
              </td>
            </tr>
          {{else}}
            <tr>
              <td colspan="5">
                <div class="text-muted text-center">This container has no ports.</div>
              </td>
            </tr>
          {{/each}}
        </tbody>
      </table>
    </div>

    <div class="well">
      <label>Volumes</label>
      <table class="grid fixed">
        <thead>
          <tr>
            <th width="90">State</th>
            <th>Mount Point</th>
            <th>Shared With</th>
            <th class="text-right" width="80">Writable</th>
          </tr>
        </thead>
        <tbody>
          {{#each model.mounts as |mount|}}
            <tr>
              <td>
                <span class="badge state {{mount.stateBackground}}">
                  {{mount.displayState}}
                </span>
              </td>
              <td>
                {{mount.path}}
              </td>
              <td>
                <ul class="list-unstyled">
                {{#each mount.volume.sharedWith as |container|}}
                  <li>
                    {{#link-to "container" container.id}}{{container.displayName}}{{/link-to}}
                  </li>
                {{else}}
                  <li class="text-muted">No other containers</li>
                {{/each}}
                </ul>
              </td>
              <td class="text-right">
                <i class="icon {{if mount.isReadWrite 'icon-check' 'icon-x text-muted'}}"></i>
              </td>
            </tr>
          {{else}}
            <tr>
              <td colspan="4">
                {{#if model.mountError}}
                  <div class="text-danger text-center">Error: {{model.mountError.message}}</div>
                {{else}}
                  <div class="text-muted text-center">This container has no volumes.</div>
                {{/if}}
              </td>
            </tr>
          {{/each}}
        </tbody>
      </table>
    </div>
  </section>
</div>
