<kubernetes-view-header title="Namespace access management" state="kubernetes.resourcePools.resourcePool.access" view-ready="ctrl.state.viewReady">
  <a ui-sref="kubernetes.resourcePools">Namespaces</a> &gt;
  <a ui-sref="kubernetes.resourcePools.resourcePool({id: ctrl.pool.Namespace.Name})">{{ ctrl.pool.Namespace.Name }}</a> &gt; Access management
</kubernetes-view-header>

<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>

<div ng-if="ctrl.state.viewReady">
  <div class="row" ng-if="ctrl.pool">
    <div class="col-sm-12">
      <rd-widget>
        <rd-widget-header icon="fa-plug" title-text="Namespace"></rd-widget-header>
        <rd-widget-body classes="no-padding">
          <table class="table">
            <tbody>
              <tr>
                <td>Name</td>
                <td>
                  {{ ctrl.pool.Namespace.Name }}
                </td>
              </tr>
            </tbody>
          </table>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <rd-widget ng-if="ctrl.availableUsersAndTeams">
        <rd-widget-header icon="fa-user-lock" title-text="Create access"></rd-widget-header>
        <rd-widget-body>
          <form class="form-horizontal">
            <div class="form-group">
              <label class="col-sm-3 col-lg-2 control-label text-left">
                Select user(s) and/or team(s)
              </label>
              <div class="col-sm-9 col-lg-4">
                <span class="small text-muted" ng-if="ctrl.availableUsersAndTeams.length === 0">
                  No user nor team access has been set on the endpoint. Head over to the
                  <a ui-sref="portainer.endpoints.endpoint.access({id: ctrl.endpointId})">endpoint access view</a> to manage them.
                </span>
                <span
                  isteven-multi-select
                  ng-if="ctrl.availableUsersAndTeams.length > 0"
                  input-model="ctrl.availableUsersAndTeams"
                  output-model="ctrl.formValues.multiselectOutput"
                  button-label="icon '-' Name"
                  item-label="icon '-' Name"
                  tick-property="ticked"
                  helper-elements="filter"
                  search-property="Name"
                  translation="{nothingSelected: 'Select one or more users and/or teams', search: 'Search...'}"
                >
                </span>
              </div>
            </div>

            <!-- actions -->
            <div class="form-group">
              <div class="col-sm-12">
                <button
                  type="submit"
                  class="btn btn-primary btn-sm"
                  ng-disabled="(ctrl.availableUsersAndTeams | filter:{ticked:true}).length === 0 || ctrl.actionInProgress"
                  ng-click="ctrl.authorizeAccess()"
                  button-spinner="ctrl.actionInProgress"
                >
                  <span ng-hide="ctrl.state.actionInProgress"><i class="fa fa-plus" aria-hidden="true"></i> Create access</span>
                  <span ng-show="ctrl.state.actionInProgress">Creating access...</span>
                </button>
              </div>
            </div>
            <!-- !actions -->
          </form>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <access-datatable
        ng-if="ctrl.authorizedUsersAndTeams"
        title-text="Access"
        title-icon="fa-user-lock"
        table-key="kubernetes_resourcepool_access"
        order-by="Name"
        dataset="ctrl.authorizedUsersAndTeams"
        remove-action="ctrl.unauthorizeAccess"
      >
      </access-datatable>
    </div>
  </div>
</div>
