<div class="tag-operations-dialog-element">
  <!-- Add Tag Dialog -->
  <div class="modal fade" id="createOrMoveTagModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"
                  aria-hidden="true" ng-show="!addingTag">&times;</button>
          <h4 class="modal-title">{{ isAnotherImageTag(toTagImage, tagToCreate) ? 'Move' : 'Add' }} Tag to Image {{ toTagImage.substr(0, 12) }}</h4>
        </div>
        <form name="addTagForm" ng-submit="createOrMoveTag(toTagImage, tagToCreate);">
          <div class="modal-body">
            <div class="cor-loader" ng-show="addingTag"></div>
            <div ng-show="!addingTag">
              <input type="text" class="form-control" id="tagName"
                     placeholder="Enter tag name"
                     ng-model="tagToCreate" ng-pattern="/^([a-z0-9_\.-]){3,30}$/"
                     ng-disabled="creatingTag" autofocus required>

              <div style="margin: 10px; margin-top: 20px;"
                   ng-show="isOwnedTag(toTagImage, tagToCreate)">
                Note: <span class="label tag label-default">{{ tagToCreate }}</span> is already applied to this image.
              </div>

              <div style="margin: 10px; margin-top: 20px;"
                   ng-show="isAnotherImageTag(toTagImage, tagToCreate)">
                Note: <span class="label tag label-default">{{ tagToCreate }}</span> is already applied to another image. This will <b>move</b> the tag.
              </div>

              <div class="tag-specific-images-view"
                   tag="tagToCreate"
                   repository="repo"
                   images="images"
                   image-cutoff="toTagImage"
                   style="margin: 10px; margin-top: 20px; margin-bottom: -10px;"
                   ng-show="isAnotherImageTag(toTagImage, tagToCreate)">
                This will also delete any unattach images and delete the following images:
              </div>
            </div>
          </div>
          <div class="modal-footer" ng-show="!addingTag">
            <button type="submit" class="btn btn-primary"
                    ng-disabled="addTagForm.$invalid || isOwnedTag(toTagImage, tagToCreate)"
                    ng-class="isAnotherImageTag(toTagImage, tagToCreate) ? 'btn-warning' : 'btn-primary'"
                    ng-show="!creatingTag">
              {{ isAnotherImageTag(toTagImage, tagToCreate) ? 'Move Tag' : 'Create Tag' }}
            </button>
            <button class="btn btn-default" data-dismiss="modal" ng-show="!addingTag">Cancel</button>
          </div>
        </form>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <!-- Delete Tags Confirm -->
  <div class="cor-confirm-dialog"
       dialog-context="deleteMultipleTagsInfo"
       dialog-action="deleteMultipleTags(info.tags, callback)"
       dialog-title="Delete Tags"
       dialog-action-title="Delete Tags">
    Are you sure you want to delete the following tags:
    <ul>
      <li ng-repeat="tag_info in deleteMultipleTagsInfo.tags">
        <span class="label label-default tag">{{ tag_info.name }}</span>
      </li>
    </ul>

    <div style="margin-top: 20px">
      <strong>Note: </strong>This operation can take several minutes.
    </div>
  </div>

  <!-- Delete Tag Confirm -->
  <div class="cor-confirm-dialog"
       dialog-context="deleteTagInfo"
       dialog-action="deleteTag(info.tag, callback)"
       dialog-title="Delete Tag"
       dialog-action-title="Delete Tag">
    Are you sure you want to delete tag
    <span class="label label-default tag">{{ deleteTagInfo.tag }}</span>?

    <div class="tag-specific-images-view" tag="deleteTagInfo.tag" repository="repository"
         images="images" style="margin-top: 20px">
      The following images and any other images not referenced by a tag will be deleted:
    </div>
  </div>
</div>