<div class="image-info-sidebar-element">
  <!-- Comment -->
  <div class="image-comment" ng-if="imageData.comment">
    <blockquote style="margin-top: 10px;">
      <span class="markdown-view" content="imageData.comment"></span>
    </blockquote>
  </div>

  <!-- Image ID -->
  <div class="image-section">
    <i class="fa fa-code section-icon" bs-tooltip="tooltip.title" data-title="Full Image ID"></i>
    <span class="section-info">
      <a class="current-image-link" ng-href="{{ tracker.imageLink(image) }}">
        {{ imageData.id }}
      </a>
    </span>
  </div>

  <!-- Tags -->
  <div class="image-section">
    <i class="fa fa-tag section-icon" data-title="Current Tags" bs-tooltip></i>
    <span class="section-info section-info-with-dropdown">
      <a class="label tag label-default" ng-repeat="tag in getTags(imageData)"
         ng-click="tagSelected({'tag': tag})">
        {{ tag }}
      </a>
      <span style="color: #ccc;" ng-if="!getTags(imageData).length">(No Tags)</span>

      <div class="dropdown" data-placement="top"
           ng-if="tracker.repository.can_write || getTags(imageData)">
        <a class="dropdown-button" data-toggle="dropdown"
           bs-tooltip="tooltip.title" data-title="Manage Tags"
           data-container="body">
          <b class="caret"></b>
        </a>

        <ul class="dropdown-menu pull-right">
          <li ng-repeat="tag in getTags(imageData)">
            <a ng-click="tagSelected({'tag': tag})">
              <i class="fa fa-tag"></i>{{ tag }}
            </a>
          </li>
          <li class="divider" role="presentation"
              ng-if="tracker.repository.can_write && imageData.tags"></li>
          <li>
            <a
               ng-click="addTagRequested({'image': image})"
               ng-if="tracker.repository.can_write">
              <i class="fa fa-plus"></i>Add New Tag
            </a>
          </li>
        </ul>
      </div>
    </span>
  </div>

  <!-- Command -->
  <div class="image-section" ng-if="imageData.command && imageData.command.length">
    <i class="fa fa-terminal section-icon" data-title="Image Command" bs-tooltip></i>
    <span class="section-info">
      <span class="formatted-command trimmed"
         data-html="true"
         data-title="{{ getTooltipCommand(imageData) }}"
         data-placement="top" bs-tooltip>{{ getFormattedCommand(imageData) }}</span>
    </span>
  </div>

  <!-- Created -->
  <div class="image-section">
    <i class="fa fa-calendar section-icon" data-title="Created" bs-tooltip></i>
    <span class="section-info">
      <dd am-time-ago="parseDate(imageData.created)"></dd>
    </span>
  </div>

  <!-- Size -->
  <div class="image-section">
    <i class="fa fa-cloud-upload section-icon"
       data-title="The amount of data sent between Docker and the registry when pushing/pulling"
       bs-tooltip></i>
    <span class="section-info">{{ imageData.size | bytes }}</span>
  </div>

  <!-- Locations -->
  <div class="image-section" ng-if="imageData.locations">
    <i class="fa fa-map-marker section-icon"
       data-title="The geographic region(s) in which this image data is located"
       bs-tooltip></i>
    <span class="section-info">
      <span class="location-view" location="location"
            ng-repeat="location in imageData.locations"></span>
    </span>
  </div>
</div>