{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

<PageHeader as |p|>
  <p.top>
    <Hds::Breadcrumb>
      {{#if @model.isNew}}
        <Hds::Breadcrumb::Item @text="Scopes" @route="vault.cluster.access.oidc.scopes" />
      {{else}}
        <Hds::Breadcrumb::Item
          @text="Details"
          @route="vault.cluster.access.oidc.scopes.scope.details"
          @model={{@model.name}}
        />
      {{/if}}
      <Hds::Breadcrumb::Item @text="{{if @model.isNew 'Create' 'Edit'}} Scope" @current={{true}} />
    </Hds::Breadcrumb>
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3" data-test-oidc-scope-title>
      {{if @model.isNew "Create" "Edit"}}
      Scope
    </h1>
  </p.levelLeft>
  <p.levelRight>
    <Hds::Button
      @text="How to write JSON template for scopes"
      @icon="bulb"
      @color="tertiary"
      {{on "click" (fn (mut this.showTemplateModal))}}
      data-test-oidc-scope-example
    />
  </p.levelRight>
</PageHeader>

<form {{on "submit" (perform this.save)}}>
  <div class="box is-sideless is-fullwidth is-marginless">
    <p class="has-bottom-margin-l">
      Providers may reference a set of scopes to make specific identity information available as claims
    </p>
    <MessageError @errorMessage={{this.errorBanner}} />
    {{#each @model.formFields as |field|}}
      <FormField @attr={{field}} @model={{@model}} @modelValidations={{this.modelValidations}} />
    {{/each}}
  </div>
  <div class="has-top-margin-l has-bottom-margin-l">
    <Hds::Button
      @text={{if @model.isNew "Create" "Update"}}
      @icon={{if this.save.isRunning "loading"}}
      type="submit"
      disabled={{this.save.isRunning}}
      data-test-oidc-scope-save
    />
    <Hds::Button
      @text="Cancel"
      @color="secondary"
      class="has-left-margin-s"
      disabled={{this.save.isRunning}}
      {{on "click" this.cancel}}
      data-test-oidc-scope-cancel
    />
  </div>
  {{#if this.invalidFormAlert}}
    <div class="control">
      <AlertInline @type="danger" class="has-top-padding-s" @message={{this.invalidFormAlert}} />
    </div>
  {{/if}}
</form>

{{#if this.showTemplateModal}}
  <Hds::Modal id="scope-template-modal" @size="large" @onClose={{fn (mut this.showTemplateModal) false}} as |M|>
    <M.Header data-test-scope-modal="title">
      Scope template
    </M.Header>
    <M.Body>
      <p data-test-scope-modal="text">
        Example of a JSON template for scopes:
      </p>
      <Hds::CodeBlock @value={{this.exampleTemplate}} @language="ruby" @hasCopyButton={{true}} />
      <p class="has-top-margin-m">
        The full list of template parameters can be found
        <DocLink @path="/vault/docs/concepts/oidc-provider#scopes">
          here.
        </DocLink>
      </p>
    </M.Body>
    <M.Footer as |F|>
      <Hds::Button @text="Close" {{on "click" F.close}} data-test-close-modal />
    </M.Footer>
  </Hds::Modal>
{{/if}}