<div class="pod-state {{model.stateBackground}}"><span>{{model.displayState}}</span></div>

<div class="right">
  {{action-menu model=model}}
  &nbsp;
  <a href="{{dom-id model pound=true}}" data-toggle="collapse" class="btn btn-link collapser" aria-expanded="true"></a>
</div>

<h4>
  <span class="right-divider clip">{{#link-to "environment" model.id}}{{model.name}}{{/link-to}}</span>

  <div class="btn-group">
    {{#link-to "service.new" (query-params environmentId=model.id) classNames="btn btn-default btn-sm"}}Add Service{{/link-to}}
    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li>{{#link-to "service.new-balancer" (query-params environmentId=model.id)}}Add Load Balancer{{/link-to}}</li>
      <li>{{#link-to "service.new-alias" (query-params environmentId=model.id)}}Add Service Alias{{/link-to}}</li>
      <li>{{#link-to "service.new-external" (query-params environmentId=model.id)}}Add External Service{{/link-to}}</li>
    </ul>
  </div>

  {{upgrade-btn environmentResource=model}}
</h4>
<h6 style="margin-top: 3px;">
  <span class="right-divider" tooltip="Service Count"><i class="icon icon-layers"></i>&nbsp;{{model.services.length}}</span>
  <span class="right-divider-btn"><i class="icon icon-box" tooltip="Container Count"></i>&nbsp;{{instanceCount}}</span>
</h6>

