portainer/app/components/common/accessControlForm/accessControlForm.html

<div ng-controller="AccessControlFormController">
  <div class="col-sm-12 form-section-title">
    Access control
  </div>
  <!-- access-control-switch -->
  <div class="form-group">
    <div class="col-sm-12">
      <label for="ownership" class="control-label text-left">
        Enable access control
        <portainer-tooltip position="bottom" message="When enabled, you can restrict the access and management of this resource."></portainer-tooltip>
      </label>
      <label class="switch" style="margin-left: 20px;">
        <input name="ownership" type="checkbox" ng-model="formValues.enableAccessControl" ng-click="synchronizeFormData()"><i></i>
      </label>
    </div>
  </div>
  <!-- !access-control-switch -->
  <!-- restricted-access -->
  <div class="form-group" ng-if="formValues.enableAccessControl" style="margin-bottom: 0">
    <div class="ownership_wrapper">
      <div ng-if="isAdmin">
        <input type="radio" id="access_administrators" ng-model="formValues.Ownership" ng-click="synchronizeFormData()" value="administrators">
        <label for="access_administrators">
          <div class="ownership_header">
            <i ng-class="'administrators' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
            Administrators
          </div>
          <p>I want to restrict the management of this resource to administrators only</p>
        </label>
      </div>
      <div ng-if="isAdmin">
        <input type="radio" id="access_restricted" ng-model="formValues.Ownership" ng-click="synchronizeFormData()" value="restricted">
        <label for="access_restricted">
          <div class="ownership_header">
            <i ng-class="'restricted' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
            Restricted
          </div>
          <p>
            I want to restrict the management of this resource to a set of users and/or teams
          </p>
        </label>
      </div>
      <div ng-if="!isAdmin">
        <input type="radio" id="access_private" ng-model="formValues.Ownership" ng-click="synchronizeFormData()" value="private">
        <label for="access_private">
          <div class="ownership_header">
            <i ng-class="'private' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
            Private
          </div>
          <p>
            I want to this resource to be manageable by myself only
          </p>
        </label>
      </div>
      <div ng-if="!isAdmin && availableTeams.length > 0">
        <input type="radio" id="access_restricted" ng-model="formValues.Ownership" ng-click="synchronizeFormData()" value="restricted">
        <label for="access_restricted">
          <div class="ownership_header">
            <i ng-class="'restricted' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
            Restricted
          </div>
          <p ng-if="availableTeams.length === 1">
            I want any member of my team (<b>{{ availableTeams[0].Name }}</b>) to be able to manage this resource
          </p>
          <p ng-if="availableTeams.length > 1">
            I want to restrict the management of this resource to one or more of my teams
          </p>
        </label>
      </div>
    </div>
  </div>
  <!-- restricted-access -->
  <!-- authorized-teams -->
  <div class="form-group" ng-if="formValues.enableAccessControl && formValues.Ownership === 'restricted' && (isAdmin || (!isAdmin && availableTeams.length > 1))" >
    <div class="col-sm-12">
      <label for="group-access" class="control-label text-left">
        Authorized teams
        <portainer-tooltip ng-if="isAdmin && availableTeams.length > 0" position="bottom" message="You can select which teams(s) will be able to manage this resource."></portainer-tooltip>
        <portainer-tooltip ng-if="!isAdmin && availableTeams.length > 1" position="bottom" message="As you are a member of multiple teams, you can select which teams(s) will be able to manage this resource."></portainer-tooltip>
      </label>
      <span ng-if="isAdmin && availableTeams.length === 0" class="small text-muted" style="margin-left: 20px;">
        You have not yet created any team. Head over the <a ui-sref="teams">teams view</a> to manage user teams.</span>
      </span>
      <span isteven-multi-select
      ng-if="(isAdmin && availableTeams.length > 0) || (!isAdmin && availableTeams.length > 1)"
      input-model="availableTeams"
      output-model="formValues.Ownership_Teams"
      button-label="Name"
      item-label="Name"
      tick-property="ticked"
      helper-elements="filter"
      search-property="Name"
      on-item-click="synchronizeFormData()"
      translation="{nothingSelected: 'Select one or more teams', search: 'Search...'}"
      style="margin-left: 20px;"
    </span>
  </div>
</div>
<!-- !authorized-teams -->
<!-- authorized-users -->
<div class="form-group" ng-if="formValues.enableAccessControl && formValues.Ownership === 'restricted' && isAdmin">
  <div class="col-sm-12">
    <label for="group-access" class="control-label text-left">
      Authorized users
      <portainer-tooltip ng-if="isAdmin && availableUsers.length > 0" position="bottom" message="You can select which user(s) will be able to manage this resource."></portainer-tooltip>
    </label>
    <span ng-if="availableUsers.length === 0" class="small text-muted" style="margin-left: 20px;">
      You have not yet created any user. Head over the <a ui-sref="users">users view</a> to manage users.</span>
    </span>
    <span isteven-multi-select
    ng-if="availableUsers.length > 0"
    input-model="availableUsers"
    output-model="formValues.Ownership_Users"
    button-label="Username"
    item-label="Username"
    tick-property="ticked"
    helper-elements="filter"
    search-property="Username"
    on-item-click="synchronizeFormData()"
    translation="{nothingSelected: 'Select one or more users', search: 'Search...'}"
    style="margin-left: 20px;"
  </span>
</div>
</div>
<!-- !authorized-users -->
</div>