portainer/app/directives/accessControlForm/porAccessControlForm.html

<div>
  <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="$ctrl.formData.AccessControlEnabled"><i></i>
      </label>
    </div>
  </div>
  <!-- !access-control-switch -->
  <!-- restricted-access -->
  <div class="form-group" ng-if="$ctrl.formData.AccessControlEnabled" style="margin-bottom: 0">
    <div class="boxselector_wrapper">
      <div ng-if="$ctrl.isAdmin">
        <input type="radio" id="access_administrators" ng-model="$ctrl.formData.Ownership" value="administrators">
        <label for="access_administrators">
          <div class="boxselector_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="$ctrl.isAdmin">
        <input type="radio" id="access_restricted" ng-model="$ctrl.formData.Ownership" value="restricted">
        <label for="access_restricted">
          <div class="boxselector_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="!$ctrl.isAdmin">
        <input type="radio" id="access_private" ng-model="$ctrl.formData.Ownership" value="private">
        <label for="access_private">
          <div class="boxselector_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="!$ctrl.isAdmin && $ctrl.availableTeams.length > 0">
        <input type="radio" id="access_restricted" ng-model="$ctrl.formData.Ownership" value="restricted">
        <label for="access_restricted">
          <div class="boxselector_header">
            <i ng-class="'restricted' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
            Restricted
          </div>
          <p ng-if="$ctrl.availableTeams.length === 1">
            I want any member of my team (<b>{{ $ctrl.availableTeams[0].Name }}</b>) to be able to manage this resource
          </p>
          <p ng-if="$ctrl.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="$ctrl.formData.AccessControlEnabled && $ctrl.formData.Ownership === 'restricted' && ($ctrl.isAdmin || (!$ctrl.isAdmin && $ctrl.availableTeams.length > 1))" >
    <div class="col-sm-12">
      <label for="group-access" class="control-label text-left">
        Authorized teams
        <portainer-tooltip ng-if="$ctrl.isAdmin && $ctrl.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="!$ctrl.isAdmin && $ctrl.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="$ctrl.isAdmin && $ctrl.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 isteven-multi-select
        ng-if="($ctrl.isAdmin && $ctrl.availableTeams.length > 0) || (!$ctrl.isAdmin && $ctrl.availableTeams.length > 1)"
        input-model="$ctrl.availableTeams"
        output-model="$ctrl.formData.AuthorizedTeams"
        button-label="Name"
        item-label="Name"
        tick-property="selected"
        helper-elements="filter"
        search-property="Name"
        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="$ctrl.formData.AccessControlEnabled && $ctrl.formData.Ownership === 'restricted' && $ctrl.isAdmin">
    <div class="col-sm-12">
      <label for="group-access" class="control-label text-left">
        Authorized users
        <portainer-tooltip ng-if="$ctrl.isAdmin && $ctrl.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="$ctrl.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 isteven-multi-select
        ng-if="$ctrl.availableUsers.length > 0"
        input-model="$ctrl.availableUsers"
        output-model="$ctrl.formData.AuthorizedUsers"
        button-label="Username"
        item-label="Username"
        tick-property="selected"
        helper-elements="filter"
        search-property="Username"
        translation="{nothingSelected: 'Select one or more users', search: 'Search...'}"
        style="margin-left: 20px;">
      </span>
    </div>
  </div>
  <!-- !authorized-users -->
</div>