<div class="content">
  <project-page>
    <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
    <alerts alerts="alerts"></alerts>
    <div ng-if="!loaded">Loading...</div>
    <div ng-if="service">
      <div class="row">
        <div class="col-md-12">
          <div class="tile">
            <h1>
              {{service.metadata.name}}
              <div class="pull-right dropdown">
                <a href="" class="dropdown-toggle resource-actions-dropdown" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
                <ul class="dropdown-menu actions action-link">
                  <li>
                    <edit-link
                      resource="service"
                      kind="services"
                      alerts="alerts">
                    </edit-link>
                  </li>
                  <li>
                    <delete-link
                      resource-type="service"
                      resource-name="{{service.metadata.name}}"
                      project-name="{{service.metadata.namespace}}"
                      alerts="alerts">
                    </delete-link>
                  </li>
                </ul>
              </div>
              <small class="meta">created <relative-timestamp timestamp="service.metadata.creationTimestamp"></relative-timestamp></small>
            </h1>
            <labels labels="service.metadata.labels" clickable="true" kind="services" project-name="{{service.metadata.namespace}}" limit="3"></labels>
            <div class="resource-details">
              <dl class="dl-horizontal left">
                <dt>Selectors:</dt>
                <dd>
                  <span ng-if="!service.spec.selector"><em>none</em></span>
                  <span ng-repeat="(selectorLabel, selectorValue) in service.spec.selector"> {{selectorLabel}}={{selectorValue}}<span ng-show="!$last">, </span></span>
                </dd>
                <dt>Type:</dt>
                <dd>{{service.spec.type}}</dd>
                <dt>IP:</dt>
                <dd>{{service.spec.clusterIP}}</dd>
                <dt>Session affinity:</dt>
                <dd>{{service.spec.sessionAffinity}}</dd>
                <dt ng-if="resource.status.loadBalancer.ingress.length">Ingress points</dt>
                <dd ng-if="resource.status.loadBalancer.ingress.length">
                  <span ng-repeat="ingress in resource.status.loadBalancer.ingress"
                    >{{ingress.ip}}<span ng-if="!$last">, </span></span>
                </dd>
              </dl>
              <div class="service-table table-responsive">
                <table ng-if="service.spec.ports.length" style="max-width: 650px;">
                  <thead>
                    <tr>
                      <th>Node Port</th>
                      <th role="presentation"></th>
                      <th>
                        Service Port
                        <!-- Show cluster IP in column header instead of table body at small screen widths to save space. -->
                        <span class="visible-xs">({{service.spec.clusterIP}})</span>
                      </th>
                      <th role="presentation"></th>
                      <th>Target Port</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="portMapping in service.spec.ports | orderBy:'port'">
                      <td>
                        <span ng-if="portMapping.nodePort">{{portMapping.nodePort}}</span>
                        <span ng-if="!portMapping.nodePort" class="text-muted">none</span>
                      </td>
                      <td role="presentation" class="text-muted">&#8594;</td>
                      <td>{{portMapping.port}}/{{portMapping.protocol}}
                          <span ng-if="portMapping.name">({{portMapping.name}})</span></td>
                      <td role="presentation" class="text-muted">&#8594;</td>
                      <td>{{portMapping.targetPort}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!-- No bottom margin so Create Route link is close to content. -->
              <dl class="dl-horizontal left" style="margin-bottom: 0;">
                <dt>Routes:</dt>
                <dd>
                  <span ng-if="!routesForService.length"><em>none</em></span>
                  <span ng-repeat="route in routesForService">
                      <span ng-if="route | isWebRoute"><a ng-href="{{route | routeWebURL}}">{{route | routeLabel}}</a></span>
                      <span ng-if="!(route | isWebRoute)">{{route | routeLabel}}</span>
                      <span ng-show="!$last">, </span>
                  </span>
                </dd>
              </dl>
              <div class="gutter-bottom">
                <a ng-href="project/{{project.metadata.name}}/createRoute?service={{service.metadata.name}}">Create route</a>
              </div>
              <annotations annotations="service.metadata.annotations"></annotations>
            </div>
          </div> <!-- /tile -->
        </div> <!-- /col -->
      </div> <!-- /row -->
    </div>
  </project-page>
</div>
