<rd-header>
  <rd-header-title title-text="Roles">
    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.roles" ui-sref-opts="{reload: true}">
      <i class="fa fa-sync" aria-hidden="true"></i>
    </a>
  </rd-header-title>
  <rd-header-content>Role management</rd-header-content>
</rd-header>

<information-panel title-text="Information">
  <span class="small">
    <p class="text-muted">
      <i class="fa fa-user" aria-hidden="true" style="margin-right: 2px;"></i>
      This feature is available in <a href="https://www.portainer.io/business-upsell?from=k8s-rbac-roles" target="_blank">Portainer Business Edition</a>.
    </p>
  </span>
</information-panel>

<div class="row">
  <div class="col-sm-12">
    <roles-datatable title-text="Roles" title-icon="fa-file-code" table-key="roles" order-by="Name"></roles-datatable>
  </div>
</div>

<div class="row">
  <div class="col-sm-12" style="margin-bottom: 0px;">
    <rd-widget>
      <rd-widget-header icon="fa-user-lock" title-text="Effective access viewer"></rd-widget-header>
      <rd-widget-body>
        <form class="form-horizontal">
          <div class="col-sm-12 form-section-title">
            User
          </div>
          <div class="form-group">
            <div class="col-sm-12">
              <span class="small text-muted">
                No user available
              </span>
            </div>
          </div>

          <div class="col-sm-12 form-section-title">
            Access
          </div>
          <div>
            <div class="small text-muted" style="margin-bottom: 15px;">
              <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
              Effective role for each endpoint will be displayed for the selected user
            </div>
          </div>
          <access-viewer-datatable table-key="access_viewer" order-by="EndpointName"> </access-viewer-datatable>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
