<project-header class="top-header"></project-header>
  <project-page>

  <!-- Middle section -->
  <div class="middle-section">
    <div id="scrollable-content" class="middle-container has-scroll">
      <div class="middle-header">
        <div class="container-fluid">
          <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
          <alerts alerts="alerts"></alerts>
          <div ng-if="!loaded">Loading...</div>
          <div ng-if="imageStream">
            <h1>
              {{imageStream.metadata.name}}
              <div class="pull-right dropdown">
                <button type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown">
                  Actions
                  <span class="caret" aria-hidden="true"></span>
                </button>
                <a href=""
                   class="dropdown-toggle actions-dropdown-kebab visible-xs-inline"
                   data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
                <ul class="dropdown-menu actions action-button">
                  <li>
                    <edit-link
                      resource="imageStream"
                      kind="ImageStream"
                      alerts="alerts">
                    </edit-link>
                  </li>
                  <li>
                    <delete-link
                      kind="ImageStream"
                      resource-name="{{imageStream.metadata.name}}"
                      project-name="{{imageStream.metadata.namespace}}"
                      alerts="alerts">
                    </delete-link>
                  </li>
                </ul>
              </div>
              <small class="meta">created <relative-timestamp timestamp="imageStream.metadata.creationTimestamp"></relative-timestamp></small>
            </h1>
            <labels labels="imageStream.metadata.labels" clickable="true" kind="images" project-name="{{imageStream.metadata.namespace}}" limit="3"></labels>
          </div>
        </div>
      </div><!-- /middle-header-->
      <div class="middle-content gutter-top">
        <div class="container-fluid">
          <div class="row" ng-if="imageStream">
            <div class="col-md-12">
              <div class="resource-details">
                <dl class="dl-horizontal left">
                  <dt ng-if-start="imageStream.spec.dockerImageRepository">Follows docker repo:</dt>
                  <dd ng-if-end>{{imageStream.spec.dockerImageRepository}}</dd>
                  <dt>Docker pull spec:</dt>
                  <dd>{{imageStream.status.dockerImageRepository}}</dd>
                </dl>
                <annotations annotations="imageStream.metadata.annotations"></annotations>
              </div>
              <table class="table table-bordered table-hover table-mobile">
                <thead>
                  <tr>
                    <th>Tag</th>
                    <th>From</th>
                    <th>Latest Image</th>
                    <th>Created</th>
                    <th>Pull Spec</th>
                  </tr>
                </thead>
                <tbody ng-if="(tagsByName | hashSize) == 0">
                  <tr><td colspan="5"><em>{{emptyMessage}}</em></td></tr>
                </tbody>
                <tbody ng-repeat-start="tag in tagsByName | orderBy : 'name'">
                  <tr>
                    <td data-title="Tag">{{tag.name}}</td>
                    <td data-title="From">
                      <!-- this value can get long when its an ImageStreamImage. Use max width and class truncate to elide some
                           of the SHA1 for long values. They can still be copied even when elided. -->
                      <div style="max-width: 400px;" class="truncate">
                        <span ng-if="!tag.spec.from"><em>pushed</em></span>
                        <span ng-if="tag.spec.from">
                          <span ng-if="!tag.spec.from._imageStreamName">
                            {{tag.spec.from.name}}
                          </span>
                          <span ng-if="tag.spec.from._imageStreamName">
                            <span ng-if="tag.spec.from._imageStreamName === imageStream.metadata.name">{{tag.spec.from._completeName}}</span>
                            <span ng-if="tag.spec.from._imageStreamName !== imageStream.metadata.name" >
                              <a ng-href="{{tag.spec.from._imageStreamName | navigateResourceURL : 'ImageStream' : (tag.spec.from.namespace || imageStream.metadata.namespace)}}"><span ng-if="tag.spec.from.namespace && tag.spec.from.namespace !== imageStream.metadata.namespace" >{{tag.spec.from.namespace}}/</span>{{tag.spec.from._imageStreamName}}</a>{{tag.spec.from._nameConnector}}{{tag.spec.from._idOrTag}}
                            </span>
                          </span>
                        </span>
                      </div>
                    </td>
                    <td data-title="Latest Image">
                      <div ng-if="!tag.status">
                        <div ng-if="imageStream | annotation : 'openshift.io/image.dockerRepositoryCheck'">
                          <span class="pficon pficon-warning-triangle-o" style="margin-right: 5px;"
                                ng-attr-title="{{imageStream | annotation : 'openshift.io/image.dockerRepositoryCheck'}}"></span>
                          <span>Unable to resolve</span>
                        </div>
                        <div ng-if="!(imageStream | annotation : 'openshift.io/image.dockerRepositoryCheck')">
                          <span ng-if="!tag.spec.from">Not yet synced</span>
                          <!-- We have no idea why in this case -->
                          <span ng-if="tag.spec.from">Unresolved</span>
                        </div>
                      </div>
                      <div ng-if="tag.status">
                        <span ng-if="tag.status.items.length && tag.status.items[0].image" class="nowrap">
                          <short-id id="{{tag.status.items[0].image | imageName}}"></short-id>
                          <a href="" ng-if="tag.status.items.length > 1" ng-click="tagShowOlder[tag.name] = !tagShowOlder[tag.name]" ng-attr-title="{{tagShowOlder[tag.name] ? 'Hide older images' : 'Show older images'}}"><span class="fa fa-clock-o"></span><span class="fa fa-caret-up" ng-if="tagShowOlder[tag.name]" style="margin-left: 3px;"></span></a>
                        </span>
                        <span ng-if="!tag.status.items.length"><em>none</em></span>
                      </div>
                    </td>
                    <td data-title="Created">
                      <span ng-if="tag.status.items.length && tag.status.items[0].image">
                        <relative-timestamp timestamp="tag.status.items[0].created"></relative-timestamp>
                      </span>
                    </td>
                    <td data-title="Pull Spec">
                      <!-- dockerImageReference values can get long. Use max width and class truncate to elide some of the SHA1 for long values.
                           They can still be copied even when elided. -->
                      <div ng-if="tag.status.items.length && tag.status.items[0].dockerImageReference">
                        <div ng-attr-title="{{tag.status.items[0].dockerImageReference}}" class="word-break visible-xs-block">
                          {{tag.status.items[0].dockerImageReference}}
                        </div>
                        <div class="pull-spec truncate hidden-xs"
                         ng-attr-title="{{tag.status.items[0].dockerImageReference}}">
                          {{tag.status.items[0].dockerImageReference}}
                        </div>                      
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody ng-repeat="item in tag.status.items" ng-if="tagShowOlder[tag.name] && !$first && item.image">
                  <tr>
                    <td data-title="Tag"><span class="hidden-xs">&nbsp;</span><span class="visible-xs">{{tag.name}}</span></td>
                    <td class="hidden-xs">&nbsp;</td>
                    <td data-title="Older Image">
                      <short-id id="{{item.image | imageName}}"></short-id>
                    </td>
                    <td data-title="Created">
                      <relative-timestamp timestamp="item.created"></relative-timestamp>
                    </td>
                    <td data-title="Pull Spec">
                      <div ng-if="item.dockerImageReference">
                        <div ng-attr-title="{{item.dockerImageReference}}" class="word-break visible-xs-block">
                          {{item.dockerImageReference}}
                        </div>
                        <div class="pull-spec truncate hidden-xs"
                         ng-attr-title="{{item.dockerImageReference}}">
                          {{item.dockerImageReference}}
                        </div>                      
                      </div>                      
                    </td>
                  </tr>
                </tbody>
                <tbody ng-repeat-end style="display: none;"></tbody>
              </table>
            </div><!-- /col-* -->
          </div>
        </div>
      </div><!-- /middle-content -->
    </div><!-- /middle-container -->
  </div><!-- /middle-section -->
  </project-page>
