{{!
  Copyright IBM Corp. 2016, 2025
  SPDX-License-Identifier: BUSL-1.1
}}

<Page::Header @title={{@scope}}>
  <:breadcrumbs>
    <KmipBreadcrumb @showPath={{true}} @currentRoute={{@scope}} />
  </:breadcrumbs>
</Page::Header>

<Toolbar>
  {{#if @roles.meta.total}}
    <ToolbarFilters>
      <FilterInput
        aria-label="Filter roles by name"
        placeholder="Filter roles by name"
        @value={{@filterValue}}
        @wait={{200}}
        @onInput={{this.onFilterChange}}
      />
    </ToolbarFilters>
  {{/if}}
  <ToolbarActions>
    <ToolbarLink @route="scope.roles.create" @type="add" data-test-role-create>
      Create role
    </ToolbarLink>
  </ToolbarActions>
</Toolbar>

{{#if @roles}}
  <div class="has-bottom-margin-s">
    {{#each @roles as |role|}}
      <div data-test-list-item={{role}}>
        <ListItem @linkPrefix={{this.mountPoint}} @linkParams={{array "credentials" @scope role}} as |Item|>
          <Item.content>
            <Icon @name="user" class="has-text-grey-light" />{{role}}
          </Item.content>
          <Item.menu>
            <Hds::Dropdown @isInline={{true}} @listPosition="bottom-right" as |dd|>
              <dd.ToggleIcon
                @icon="more-horizontal"
                @text="More options"
                @hasChevron={{false}}
                data-test-popup-menu-trigger
              />
              <dd.Interactive @route="credentials" @models={{array @scope role}} data-test-popup-menu="View credentials">
                View credentials
              </dd.Interactive>
              <dd.Interactive @route="role" @models={{array @scope role}} data-test-popup-menu="View role">
                View role
              </dd.Interactive>
              {{#if
                (has-capability
                  @capabilities
                  "update"
                  pathKey="kmipRole"
                  params=(hash backend=this.secretMountPath.currentPath scope=@scope name=role)
                )
              }}
                <dd.Interactive @route="role.edit" @models={{array @scope role}} data-test-popup-menu="Edit role">
                  Edit role
                </dd.Interactive>
              {{/if}}
              {{#if
                (has-capability
                  @capabilities
                  "delete"
                  pathKey="kmipRole"
                  params=(hash backend=this.secretMountPath.currentPath scope=@scope name=role)
                )
              }}
                <dd.Interactive
                  @color="critical"
                  {{on "click" (fn (mut this.roleToDelete) role)}}
                  data-test-confirm-action-trigger
                >
                  Delete role
                </dd.Interactive>
              {{/if}}
            </Hds::Dropdown>

            {{#if (eq this.roleToDelete role)}}
              <ConfirmModal
                @color="critical"
                @confirmMessage="Are you sure you want to delete {{this.roleToDelete}}?"
                @onConfirm={{this.deleteRole}}
                @onClose={{fn (mut this.roleToDelete) null}}
              />
            {{/if}}
          </Item.menu>
        </ListItem>
      </div>
    {{/each}}

    <Hds::Pagination::Numbered
      @currentPage={{@roles.meta.currentPage}}
      @currentPageSize={{@roles.meta.pageSize}}
      @route="scope.roles"
      @models={{array @scope}}
      @showSizeSelector={{false}}
      @totalItems={{@roles.meta.filteredTotal}}
      @queryFunction={{this.paginationQueryParams}}
      data-test-pagination
    />
  </div>
{{else}}
  {{#if @filterValue}}
    <Hds::ApplicationState class="top-padding-32 is-marginless" as |A|>
      <A.Header
        @title="There are no roles matching &quot;{{@filterValue}}&quot;"
        @titleTag="h2"
        data-test-empty-state-title
      />
    </Hds::ApplicationState>
  {{else}}
    <Hds::ApplicationState class="top-padding-32 is-marginless" as |A|>
      <A.Header @title="No roles in this scope yet" @titleTag="h2" data-test-empty-state-title />
      <A.Body
        @text="Roles let you generate credentials with a specified set of KMIP operations permissions that clients are allowed to perform."
        data-test-empty-state-message
      />
      <A.Footer data-test-empty-state-actions as |F|>
        <F.LinkStandalone @icon="plus" @text="Create a role" @route="scope.roles.create" />
      </A.Footer>
    </Hds::ApplicationState>
  {{/if}}
{{/if}}