<div class="repo-panel-tags-element">
  <div class="tab-header-controls">
    <div class="btn-group btn-group-sm" ng-show="repository.can_write">
      <button class="btn" ng-class="!showingHistory ? 'btn-primary active' : 'btn-default'" ng-click="showHistory(false)">
        <i class="fa fa-tags"></i>Current Tags
      </button>
      <button class="btn" ng-class="showingHistory ? 'btn-info active' : 'btn-default'" ng-click="showHistory(true)">
        <i class="fa fa-history"></i>History
      </button>
    </div>
  </div>

 <h3 class="tab-header"><span class="hidden-xs">Repository </span>Tags</h3>

 <!-- History view -->
 <div class="repo-tag-history" repository="repository" filter="options.historyFilter"
      is-enabled="showingHistory" ng-show="showingHistory"></div>

 <!-- Normal View -->
 <div ng-show="!showingHistory">
   <div class="co-check-bar">
     <span class="cor-checkable-menu" controller="checkedTags">
       <div class="cor-checkable-menu-item" item-filter="allTagFilter">
        <i class="fa fa-check-square-o"></i>All Tags
       </div>
       <div class="cor-checkable-menu-item" item-filter="noTagFilter(tag)">
        <i class="fa fa-square-o"></i>No Tags
       </div>
       <div class="cor-checkable-menu-item" item-filter="commitTagFilter(tag)">
        <i class="fa fa-git"></i>Commit SHAs
       </div>

       <div class="cor-checkable-menu-item" item-filter="imageIDFilter(it.image_id, tag)"
            ng-repeat="it in imageTracks">
        <i class="fa fa-circle-o" ng-style="{'color': it.color}"></i> {{ it.image_id.substr(0, 12) }}
       </div>
     </span>

     <span class="co-checked-actions" ng-if="checkedTags.checked.length">
       <a href="javascript:void(0)" class="btn btn-default" ng-click="setTab('changes')">
         <i class="fa fa-code-fork"></i><span class="text">Visualize</span>
       </a>
       <a href="javascript:void(0)" class="btn btn-default"
          ng-click="showHistory(true, getTagNames(checkedTags.checked))"
          ng-if="repository.can_write">
         <i class="fa fa-history"></i><span class="text">View History</span>
       </a>
       <button class="btn btn-primary"
               ng-click="askDeleteMultipleTags(checkedTags.checked)"
               ng-if="repository.can_write">
         <i class="fa fa-times"></i><span class="text">Delete</span>
       </button>
     </span>

     <span class="co-filter-box">
      <span class="page-controls" total-count="tags.length" current-page="options.page" page-size="50"></span>
      <input class="form-control" type="text" ng-model="options.tagFilter" placeholder="Filter Tags...">
     </span>
   </div>

   <div class="cor-loader" ng-show="!isEnabled"></div>

   <table class="co-table" id="tagsTable" ng-if="isEnabled">
     <thead>
      <td class="checkbox-col"></td>
      <td ng-class="tablePredicateClass('name', options.predicate, options.reverse)">
        <a href="javascript:void(0)" ng-click="orderBy('name')">Tag</a>
      </td>
      <td class="hidden-xs"
          ng-class="tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)"
          style="min-width: 120px;">
        <a href="javascript:void(0)" ng-click="orderBy('last_modified_datetime')">Last Modified</a>
      </td>
      <td class="hidden-xs"
          ng-class="tablePredicateClass('size', options.predicate, options.reverse)"
          style="min-width: 62px;">
        <a href="javascript:void(0)" ng-click="orderBy('size')">Size</a>
      </td>
      <td class="hidden-xs"
          ng-class="tablePredicateClass('image_id', options.predicate, options.reverse)"
          colspan="{{ imageTracks.length + 1 }}"
          style="min-width: 120px;">
        <a href="javascript:void(0)" ng-click="orderBy('image_id')">Image</a>
      </td>
      <td class="options-col" ng-if="repository.can_write"></td>
      <td class="options-col"></td>
      <td class="options-col"></td>
     </thead>

     <tr class="co-checkable-row"
         ng-repeat="tag in tags | slice:(50 * options.page):(50 * (options.page + 1))"
         ng-class="checkedTags.isChecked(tag, checkedTags.checked) ? 'checked' : ''"
         bindonce>
      <td><span class="cor-checkable-item" controller="checkedTags" item="tag"></span></td>
      <td><span class="tag-span"><i class="fa fa-tag"></i><span bo-text="tag.name"></span></span></td>
      <td class="hidden-xs">
        <span am-time-ago="tag.last_modified" bo-if="tag.last_modified"></span>
        <span bo-if="!tag.last_modified">Unknown</span>
      </td>
      <td class="hidden-xs" bo-text="tag.size | bytes"></td>
      <td class="hidden-xs image-id-col">
        <span class="image-link" repository="repository" image-id="tag.image_id"></span>
      </td>
      <td class="hidden-xs image-track" ng-repeat="it in imageTracks" bindonce>
        <span class="image-track-dot" bo-if="it.image_id == tag.image_id"
              bo-style="{'borderColor': it.color}" ng-click="selectTrack(it)"></span>
        <span class="image-track-line" bo-class="trackLineClass($parent.$index, it)"
              bo-style="{'borderColor': it.color}"></span>
      </td>
      <td class="options-col">
        <i class="fa fa-download" data-title="Fetch Tag" bs-tooltip
           ng-click="fetchTagActionHandler.askFetchTag(tag)">
        </i>
      </td>
      <td class="options-col" bo-if="repository.can_write">
        <div class="dropdown" style="text-align: left;">
          <i class="fa fa-history dropdown-toggle" data-toggle="dropdown" data-title="Tag History"
             ng-click="loadTagHistory(tag)"
             bs-tooltip></i>
          <ul class="dropdown-menu pull-right">
            <li ng-if="!tagHistory[tag.name]"><div class="cor-loader"></div></li>
            <li class="tag-image-history-item" ng-repeat="entry in tagHistory[tag.name]" bindonce>
              <a href="javascript:void(0)" ng-click="askRevertTag(tag, entry.docker_image_id)">
                <div class="image-id">
                  <i class="fa fa-circle-o"
                     bo-style="{'color': imageMap[entry.docker_image_id].color || '#eee'}"></i>
                  {{ entry.docker_image_id.substr(0, 12) }}
                </div>
                <div class="image-apply-time">
                  {{ entry.start_ts * 1000 | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}
                </div>
              </a>
            </li>
          </ul>
        </div>
      </td>
      <td class="options-col">
        <span bo-if="repository.can_write">
          <span class="cor-options-menu">
            <span class="cor-option" option-click="askAddTag(tag)">
              <i class="fa fa-plus"></i> Add New Tag
            </span>
            <span class="cor-option" option-click="askDeleteTag(tag.name)">
              <i class="fa fa-times"></i> Delete Tag
            </span>
          </span>
        </span>
      </td>
     </tr>
   </table>

   <div class="empty" ng-if="allTags.length && !tags.length">
    <div class="empty-primary-msg">No matching tags found.</div>
    <div class="empty-secondary-msg">Try expanding your filtering terms.</div>
   </div>

   <div class="empty" ng-if="!allTags.length">
    <div class="empty-primary-msg">This repository is empty.</div>
    <div class="empty-secondary-msg">Push a tag or initiate a build to populate this repository.</div>
   </div>
  </div>
</div>

<div class="tag-operations-dialog" repository="repository"
     get-images="getImages({'callback': callback})"
     action-handler="tagActionHandler"></div>

<div class="fetch-tag-dialog" repository="repository" action-handler="fetchTagActionHandler"></div>