<div class="box is-sideless is-fullwidth is-marginless" data-test-role-settings-section>
  <h3 class="title is-5">Role Settings</h3>
  {{#if this.settingFields}}
    <div class="form-section">
      {{#each this.settingFields as |attr|}}
        {{#if (and (eq @mode "edit") (eq attr.name "username"))}}
          <ReadonlyFormField @attr={{attr}} @value={{get @model attr.name}} />
        {{else}}
          <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
        {{/if}}

      {{/each}}
    </div>
  {{else}}
    <EmptyState @title="No role type selected" @message="Select a type of role to be able to configure it" />
  {{/if}}
</div>
{{! template-lint-configure simple-unless "warn"  }}
{{#unless (and @roleType (not this.statementFields))}}
  <div class="box is-sideless is-fullwidth is-marginless" data-test-statements-section>
    <h3 class="title is-5">Statements</h3>
    {{#if this.statementFields}}
      <div class="form-section">
        {{#each this.statementFields as |attr|}}
          <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
        {{/each}}
      </div>
    {{else}}
      <EmptyState
        @title="No role type selected"
        @message="Select a type of role to be able to add statements for creation, revocation, and/or rotation."
      />
    {{/if}}
  </div>
{{/unless}}