<div class="box is-fullwidth is-bottomless is-sideless">
  <MessageError @model={{this.model}} />
  <div class="control-group-header {{if this.isSuccess 'is-success'}}">
    <p>
      <Icon @name={{if this.isSuccess "check-circle-fill" "lock-fill"}} />
      <strong data-test-banner-prefix>{{this.bannerPrefix}}</strong>
      <span data-test-banner-text>{{this.bannerText}}</span>
    </p>
  </div>
  {{#if
    (and
      this.model.approved
      (not this.currentUserHasAuthorized)
      (or (not this.model.requestEntity) this.currentUserIsRequesting)
    )
  }}
    <ControlGroupSuccess
      data-test-control-group-success
      @model={{this.model}}
      @controlGroupResponse={{this.controlGroupResponse}}
    />
  {{else}}
    <div class="control-group">
      <div data-test-requestor-text>
        {{#if this.model.requestEntity.canRead}}
          <LinkTo
            @route="vault.cluster.access.identity.show"
            @models={{array "entities" this.model.requestEntity.id "details"}}
          >
            {{this.requestorName}}
          </LinkTo>
        {{else}}
          {{this.requestorName}}
        {{/if}}
        {{#if this.currentUserIsRequesting}}are{{else}}is{{/if}}
        {{#if this.model.approved}}
          authorized to access
          <code>{{this.model.requestPath}}</code>
        {{else}}
          requesting access to
          <code>{{this.model.requestPath}}</code>
        {{/if}}
      </div>

      {{#if (or (not this.model.requestEntity) this.currentUserIsRequesting)}}
        <div class="message is-list is-highlight has-copy-button" tabindex="-1" data-test-accessor-callout>
          <HoverCopyButton @alwaysShow={{true}} @copyValue={{this.model.id}} />
          <div class="message-body">
            <h4 class="title is-7 is-marginless">
              Accessor
            </h4>
            <code class="is-word-break" data-test-accessor-value>{{this.model.id}}</code>
          </div>
        </div>
      {{/if}}

      <div class="authorizations" data-test-authorizations>
        {{#if (gt this.model.authorizations.length 0)}}
          <span class="has-text-success">
            <Icon @name="check-circle" />
          </span>
          Already approved by
          {{#each this.model.authorizations as |authorization index|}}
            {{~#if authorization.canRead~}}
              <LinkTo @route="vault.cluster.access.identity.show" @models={{array "entities" authorization.id "details"}}>
                {{authorization.name}}
              </LinkTo>
            {{~else~}}
              {{authorization.name}}
            {{~/if~}}{{#if (lt (inc index) this.model.authorizations.length)}},{{/if}}
          {{/each}}
        {{else}}
          <span class="has-text-grey">
            <Icon @name="check-circle" />
          </span>
          Awaiting authorization.
        {{/if}}
      </div>
    </div>
  {{/if}}

  {{#if this.controlGroupResponse.token}}
    <p class="control-group-token-text" data-test-token>
      We’ve saved your request token, but you may want to copy it just in case:
      <span class="tag has-font-monospaced" data-test-token-value>{{this.controlGroupResponse.token}}</span>
      <HoverCopyButton @alwaysShow={{true}} @copyValue={{this.controlGroupResponse.token}} />
    </p>
  {{/if}}
  {{! template-lint-configure simple-unless "warn" }}
  {{#unless (and this.model.approved (or (not this.model.requestEntity) this.currentUserIsRequesting))}}
    <div class="field is-grouped box is-fullwidth is-bottomless">
      {{#if this.model.canAuthorize}}
        {{#if (or this.model.approved this.currentUserHasAuthorized)}}
          <LinkTo @route="vault.cluster.access.control-groups" class="button" data-test-back-link={{true}}>
            <Chevron @direction="left" />
            Back
          </LinkTo>
        {{else}}
          <button
            type="button"
            class="button is-primary {{if this.authorize.isRunning 'is-loading'}}"
            {{action (perform this.authorize)}}
            data-test-authorize-button
          >
            Authorize
          </button>
        {{/if}}
      {{else}}
        <button
          type="button"
          class="button is-primary {{if this.refresh.isRunning 'is-loading'}}"
          {{action (perform this.refresh)}}
          data-test-refresh-button
        >
          Refresh
        </button>
      {{/if}}
    </div>
  {{/unless}}
</div>