<pa-modal-dialog>
  <pa-modal-title>
    <div class="title-with-button">
      {{ modal.config.data?.['modalTitle'] || 'account.new_token' | translate }}
      <pa-button
        icon="cross"
        aspect="basic"
        data-cy="close-token-dialog"
        (click)="close()">
        {{ 'generic.close' | translate }}
      </pa-button>
    </div>
  </pa-modal-title>
  <pa-modal-content>
    <p [innerHTML]="modal.config.data?.['modalDescription'] || 'account.token_description' | translate"></p>
    <div class="token-container">
      <div class="token-dialog-value">{{ modal.config.data?.['token'] | slice: 1 : 30 }}…</div>
      @if (clipboardSupported) {
        <pa-button
          data-cy="copy-token"
          (click)="copy()">
          {{ (successMessage ? 'generic.copied' : 'generic.copy') | translate }}
        </pa-button>
      }
    </div>
  </pa-modal-content>
</pa-modal-dialog>
