<div class="user-background">
  <div class="consent-container">
    <img
      class="logo"
      [src]="logoPath"
      [alt]="brandName" />

    @if (error) {
      <div
        class="consent-error title-xxs">
        {{ error | translate }}
      </div>
    }

    <div class="consent-content">
      <div class="consent-subject">
        <pa-avatar
          [userName]="consentData?.user_name"
          [userId]="consentData?.user_email"
        size="small"></pa-avatar>
        <span>{{ consentData?.user_email }}</span>
      </div>
      <div class="consent-client">
        <strong>{{ consentData?.client_name }}</strong>
        {{ 'login.access_request' | translate }}
      </div>
      <ul class="consent-scopes">
        @for (scope of visibleScopes(); track scope) {
          <li
            class="consent-scopes-item"
            [attr.data-scope]="scope">
            <pa-icon name="check"></pa-icon>
            <span>{{ 'consent.scope.' + scopeKey(scope) | translate }}</span>
          </li>
        }
      </ul>
    </div>
    <div class="consent-buttons">
      <form
        #rejectForm
        method="POST"
        [action]="oAuthConsentUrl()">
        <input
          type="hidden"
          name="consent_challenge"
          [value]="consentChallenge" />
        <input
          type="hidden"
          name="reject"
          [value]="true" />
        <pa-button
          aspect="basic"
          (click)="rejectConsent()">
          {{ 'generic.cancel' | translate }}
        </pa-button>
      </form>
      <form
        #form
        method="POST"
        [action]="oAuthConsentUrl()">
        <input
          type="hidden"
          name="consent_challenge"
          [value]="consentChallenge" />
        @for (scope of consentData?.requested_scope || []; track scope) {
          <input
            type="hidden"
            name="grant_scope"
            [value]="scope" />
        }
        <pa-button
          kind="primary"
          (click)="acceptConsent()">
          {{ 'generic.allow' | translate }}
        </pa-button>
      </form>
    </div>
  </div>
</div>
