<Toolbar>
  <ToolbarActions>
    <ToolbarLink @route="vault.cluster.access.oidc.scopes.create" @type="add" data-test-oidc-scope-create>
      Create scope
    </ToolbarLink>
  </ToolbarActions>
</Toolbar>

{{#if (gt this.model.length 0)}}
  {{#each this.model as |model|}}
    <LinkedBlock
      class="list-item-row"
      @params={{array "vault.cluster.access.oidc.scopes.scope.details" model.name}}
      data-test-oidc-scope-linked-block={{model.name}}
    >
      <div class="level is-mobile">
        <div class="level-left">
          <div>
            <Icon @name="file" class="has-text-grey-light" />
            <span class="has-text-weight-semibold is-underline">
              {{model.name}}
            </span>
          </div>
        </div>
        <div class="level-right is-flex is-paddingless is-marginless">
          <div class="level-item">
            <PopupMenu>
              <nav class="menu">
                <ul class="menu-list">
                  <li>
                    <LinkTo
                      @route="vault.cluster.access.oidc.scopes.scope.details"
                      @model={{model.name}}
                      @disabled={{eq model.canRead false}}
                      data-test-oidc-scope-menu-link="details"
                    >
                      Details
                    </LinkTo>
                  </li>
                  <li>
                    <LinkTo
                      @route="vault.cluster.access.oidc.scopes.scope.edit"
                      @model={{model.name}}
                      @disabled={{eq model.canEdit false}}
                      data-test-oidc-scope-menu-link="edit"
                    >
                      Edit
                    </LinkTo>
                  </li>
                </ul>
              </nav>
            </PopupMenu>
          </div>
        </div>
      </div>
    </LinkedBlock>
  {{/each}}
{{else}}
  <EmptyState @title="No scopes yet" data-test-oidc-scope-empty-state>
    <div>
      <p>Use scope to define identity information about the authenticated user.
        <DocLink @path="/docs/concepts/oidc-provider#scopes">
          Learn more.
        </DocLink>
      </p>
      <div class="has-top-margin-m">
        <LinkTo @route="vault.cluster.access.oidc.scopes.create" data-test-oidc-scope-create-empty-state>
          Create scope
        </LinkTo>
      </div>
    </div>
  </EmptyState>
{{/if}}