<div class="prototype-manager-element">
  <div class="quay-spinner" ng-show="loading"></div>

  <div class="container" ng-show="!loading">
    <div class="alert alert-info">
      Default permissions provide a means of specifying <span class="context-tooltip" title="By default, all repositories have the creating user added as an 'Admin'" bs-tooltip="tooltip.title">additional</span> permissions that should be granted automatically to a repository based on the user or robot creating the repository.
    </div>
    
    <div class="side-controls">
      <button class="btn btn-success" ng-click="showAddDialog()">
        <i class="fa fa-plus"></i>
        New Default Permission
      </button>
    </div>

    <table class="table">
      <thead>
        <th>
          <span class="context-tooltip" title="The user that is creating the repository" 
                bs-tooltip="tooltip.title" data-container="body">
            Creating User/Robot
          </span>
        </th>
        <th>
          <span class="context-tooltip" title="The user, robot or team that is being granted the permission"
                bs-tooltip="tooltip.title" data-container="body">
            Delegated User/Robot/Team
          </span>
        </th>
        <th>Permission</th>
        <th style="width: 150px"></th>
      </thead>
      
      <tr ng-repeat="prototype in prototypes">
        <td>
          <span class="entity-reference block-reference" entity="prototype.activating_user" namespace="organization.name"></span>
        </td>
        <td>
          <span class="entity-reference block-reference" entity="prototype.delegate" namespace="organization.name"></span>
        </td>
        <td>
          <span class="role-group" current-role="prototype.role" role-changed="setRole(role, prototype)" roles="roles"></span>
        </td>
        <td>
          <span class="delete-ui" tabindex="0">
            <span class="delete-ui-button" ng-click="deletePrototype(prototype)"><button class="btn btn-danger">Delete</button></span>
            <i class="fa fa-times" bs-tooltip="tooltip.title" data-placement="right" title="Delete Permission"></i>
          </span>
        </td>
      </tr>
    </table>
  </div>

  <!-- Modal message dialog -->
  <div class="modal fade" id="addPermissionDialogModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Create Default Permission</h4>
        </div>
        <div class="modal-body">
          <table>
            <tr>
              <td>Creating User/Robot:</td>
              <td>
                <span class="entity-search" namespace="organization.name" input-title="'Creating User/Robot'"
                      is-organization="true" include-teams="false" current-entity="activatingForNew" is-persistent="true"
                      clear-now="clearCounter">
                </span>
              </td>
            </tr>
            <tr>
              <td>Delegated User/Robot/Team:</td>
              <td>
                <span class="entity-search" namespace="organization.name" input-title="'Delegated User/Robot/Team'"
                      is-organization="true" include-teams="true" current-entity="delegateForNew" is-persistent="true"
                      clear-now="clearCounter">
                </span>
              </td>
            </tr>
            <tr>
              <td>Permission:</td>
              <td>
                <span class="role-group" current-role="newRole" role-changed="setRoleForNew(role)" roles="roles"></span>
              </td>
            </tr>
          </table>
        </div>
        <div class="modal-footer">         
          <button ype="button" class="btn btn-primary" ng-disabled="!activatingForNew || !delegateForNew" ng-click="createPrototype()">
            Create Permission
          </button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

</div>