<PageHeader as |p|>
  <p.top>
    <nav class="breadcrumb" aria-label="breadcrumbs">
      <ul>
        <li>
          <span class="sep">&#x0002f;</span>
          <LinkTo @route="vault.cluster.access.oidc.scopes" data-test-breadcrumb-link="oidc-scopes">
            Scopes
          </LinkTo>
        </li>
      </ul>
    </nav>
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3" data-test-oidc-scope-header>
      {{this.model.name}}
    </h1>
  </p.levelLeft>
</PageHeader>

<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
  <nav class="tabs" aria-label="tabs">
    <ul>
      <LinkTo @route="vault.cluster.access.oidc.scopes.scope.details" @model={{this.model}} data-test-oidc-scope-details>
        Details
      </LinkTo>
    </ul>
  </nav>
</div>

<Toolbar>
  <ToolbarActions>
    {{#if this.model.canDelete}}
      <ConfirmAction
        data-test-oidc-scope-delete
        @buttonClasses="toolbar-link"
        @onConfirmAction={{this.delete}}
        @confirmTitle="Delete scope?"
        @confirmMessage="This scope will be permanently deleted. You will not be able to recover it."
        @confirmButtonText="Delete"
      >
        Delete scope
      </ConfirmAction>
      <div class="toolbar-separator"></div>
    {{/if}}
    {{#if this.model.canEdit}}
      <ToolbarLink @route="vault.cluster.access.oidc.scopes.scope.edit" @model={{this.model.name}} data-test-oidc-scope-edit>
        Edit scope
      </ToolbarLink>
    {{/if}}
  </ToolbarActions>
</Toolbar>

<div class="box is-fullwidth is-sideless is-paddingless is-marginless">
  <InfoTableRow @label="Name" @value={{this.model.name}} />
  <InfoTableRow @label="Description" @value={{this.model.description}} />
  <JsonEditor
    @title="JSON Template"
    @mode="ruby"
    @value={{this.model.template}}
    @readOnly={{true}}
    class="has-top-margin-xl has-bottom-margin-xl"
    data-test-oidc-scope-json
  />
</div>