<div class="repo-panel-changes-element">
  <div class="resource-view" resource="imagesResource"
       error-message="'Could not load repository images'">
    <h3 class="tab-header">
      Visualize Tags:
      <span class="multiselect-dropdown" items="tagNames" selected-items="selectedTags"
            item-name="tag" item-checked="updateState()">
        <span class="tag-span">{{ item }}</span>
      </span>
    </h3>

    <!-- No Tags Selected -->
    <div class="empty" ng-if="!selectedTags.length">
      <div class="empty-primary-msg">No tags selected to view</div>
      <div class="empty-secondary-msg">
        Please select one or more tags above.
      </div>
    </div>

    <!-- Tags Selected -->
    <div ng-show="selectedTags.length > 0">
      <div id="image-history row" class="resource-view" resource="imagesResource"
           error-message="'Cannot load repository images'">

        <!-- Tree View container -->
        <div  class="col-md-8">
          <div class="panel panel-default">
            <!-- Image history tree -->
            <div id="image-history-container" onresize="tree.notifyResized()"></div>
          </div>
        </div>

        <!-- Side Panel -->
        <div class="col-md-4">
          <div class="side-panel-title" ng-if="currentTag">
            <i class="fa fa-tag"></i>{{ currentTag }}
          </div>
          <div class="side-panel-title" ng-if="currentImage">
            <i class="fa fa-archive"></i>{{ currentImage.substr(0, 12) }}
          </div>

          <div class="side-panel">
            <!-- Tag Info -->
            <div class="tag-info-sidebar"
                 tracker="tracker"
                 tag="currentTag"
                 image-selected="setImage(image)"
                 delete-tag-requested="tagActionHandler.askDeleteTag(tag)"
                 ng-if="currentTag">
            </div>

            <!-- Image Info -->
            <div class="image-info-sidebar"
                 tracker="tracker"
                 image="currentImage"
                 tag-selected="setTag(tag)"
                 add-tag-requested="tagActionHandler.askAddTag(image)"
                 ng-if="currentImage">
            </div>
          </div>
        </div>
    </div>
  </div>
</div>

<div class="tag-operations-dialog" repository="repository" images="images"
     action-handler="tagActionHandler" tag-changed="handleTagChanged(data)"></div>