<PageHeader as |p|>
  <p.top>
    <KeyValueHeader @path="vault.cluster.secrets.backend.show" @mode={{this.mode}} @root={{@root}} @showCurrent={{true}} />
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3" data-test-secret-header="true">
      {{#if (eq @mode "create")}}
        Create Role
      {{else if (eq @mode "edit")}}
        Edit Role
      {{else}}
        {{@model.id}}
      {{/if}}
    </h1>
  </p.levelLeft>
</PageHeader>

{{#if (eq @mode "show")}}
  <Toolbar>
    <ToolbarActions>
      {{#if @model.canDelete}}
        <ConfirmAction
          @buttonClasses="toolbar-link"
          @onConfirmAction={{action "delete"}}
          @confirmTitle="Delete role?"
          @confirmMessage="This role will be permanently deleted. You will need to recreate it to use it again."
          @confirmButtonText="Delete"
          data-test-database-role-delete
        >
          Delete role
        </ConfirmAction>
        <div class="toolbar-separator"></div>
      {{/if}}
      {{#if (and @model.canRotateRoleCredentials (eq @model.type "static"))}}
        <button type="button" class="toolbar-link" {{on "click" (fn this.rotateRoleCred @model.id)}}>
          Rotate credentials
        </button>
      {{/if}}
      {{#if
        (or
          (and (eq @model.type "static") @model.canGetCredentials)
          (and (eq @model.type "dynamic") @model.canGenerateCredentials)
        )
      }}
        <button
          type="button"
          class="toolbar-link"
          {{on "click" (fn this.generateCreds @model.id @model.type)}}
          data-test-database-role-creds={{@model.type}}
        >
          {{if (eq @model.type "static") "Get credentials" "Generate credentials"}}
        </button>
      {{/if}}
      {{#if @model.canEditRole}}
        <ToolbarSecretLink
          @secret={{concat "role/" @model.id}}
          @mode="edit"
          @replace={{true}}
          @queryParams={{hash itemType="role"}}
          data-test-edit-link={{true}}
        >
          Edit role
        </ToolbarSecretLink>
      {{/if}}
    </ToolbarActions>
  </Toolbar>
  {{#each @model.showFields as |attr|}}
    {{#let attr.options.defaultShown as |defaultDisplay|}}
      {{#if (eq attr.type "object")}}
        <InfoTableRow
          @alwaysRender={{true}}
          @defaultShown={{defaultDisplay}}
          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
          @value={{stringify (get @model attr.name)}}
        />
      {{else if (eq attr.options.editType "ttl")}}
        <InfoTableRow
          @alwaysRender={{true}}
          @defaultShown={{defaultDisplay}}
          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
          @value={{format-duration (get @model attr.name)}}
          @isLink={{eq attr.name "database"}}
        />
      {{else}}
        <InfoTableRow
          @alwaysRender={{true}}
          @defaultShown={{defaultDisplay}}
          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
          @value={{get @model attr.name}}
          @isLink={{eq attr.name "database"}}
        />
      {{/if}}
    {{/let}}
  {{/each}}
{{else}}
  {{! Edit or Create }}
  <div class="box is-sideless is-fullwidth is-marginless">
    <form {{on "submit" this.handleCreateEditRole}}>
      {{#each @model.fieldAttrs as |attr|}}
        {{#if (eq @mode "edit")}}
          <ReadonlyFormField @attr={{attr}} @value={{get @model attr.name}} />
        {{else if (not-eq attr.options.readOnly true)}}
          <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
          {{! TODO: If database && !updateDB show warning }}
          {{#if (get this.warningMessages attr.name)}}
            <AlertBanner @type="warning" @message={{get this.warningMessages attr.name}} />
          {{/if}}
        {{/if}}
      {{/each}}

      <DatabaseRoleSettingForm
        @attrs={{@model.roleSettingAttrs}}
        @roleType={{@model.type}}
        @model={{@model}}
        @mode={{@mode}}
        @dbType={{await this.databaseType}}
      />

      <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
        <div class="field is-grouped">
          <div class="control">
            {{#if (is-empty-value this.warningMessages)}}
              <button
                data-test-secret-save
                type="submit"
                disabled={{this.loading}}
                class="button is-primary {{if this.loading 'is-loading'}}"
              >
                {{#if (eq @mode "create")}}
                  Create role
                {{else}}
                  Save
                {{/if}}
              </button>
            {{else}}
              <ToolTip @horizontalPosition="left" as |T|>
                <T.Trigger>
                  <button data-test-secret-save type="submit" disabled={{true}} class="button is-primary">
                    Save
                  </button>
                </T.Trigger>
                <T.Content @defaultClass="tool-tip">
                  <div class="box">
                    You don't have permissions required to
                    {{if (eq @mode "create") "create" "update"}}
                    this role. See form for details.
                  </div>
                </T.Content>
              </ToolTip>
            {{/if}}
          </div>
          <div class="control">
            <SecretLink @mode="list" class="button">
              Cancel
            </SecretLink>
          </div>
        </div>
      </div>
    </form>
  </div>
{{/if}}