<pa-modal-advanced fitContentHeight>
  <pa-modal-title>{{ 'account.invite-collaborators.title' | translate }}</pa-modal-title>
  <pa-modal-content>
    <div class="password">
      <img src="assets/signup/check-email.png" />
      <p
        class="body-m"
        [innerHTML]="'account.invite-collaborators.set-password' | translate: { email: accountEmail | async }"></p>
    </div>
    <h3>{{ 'account.invite-collaborators.subtitle' | translate }}</h3>
    <pa-radio-group
      [(value)]="selectedRadio"
      [noBackground]="true">
      <pa-radio value="kb">
        <span class="title-s">{{ 'account.invite-collaborators.kb.title' | translate }}</span>
      </pa-radio>
      <pa-radio value="sso">
        <span class="title-s">{{ 'account.invite-collaborators.setup-sso.title' | translate }}</span>
      </pa-radio>
      <div class="radio-content">
        {{ 'account.invite-collaborators.setup-sso.description' | translate }}
        <a
          [routerLink]="accountSettingsUrl"
          (click)="modal.close()">
          {{ 'account.invite-collaborators.setup-sso.link' | translate }}
        </a>
      </div>
      <pa-radio value="invite">
        <span class="title-s">{{ 'account.invite-collaborators.add-users.title' | translate }}</span>
      </pa-radio>
      <div class="radio-content">
        {{ 'account.invite-collaborators.add-users.description' | translate }}
      </div>
    </pa-radio-group>

    @if (selectedRadio === 'invite') {
      <div class="adding-owners-field">
        <div class="title-m">Add account owners</div>
        <pa-input
          type="email"
          help="account.invite-collaborators.add-users.email.help"
          [formControl]="email"
          (enter)="addUser()"
          stfLowerCaseInput>
          {{ 'account.invite-collaborators.add-users.email.label' | translate }}
        </pa-input>
      </div>
      <ul class="owner-list">
        @for (email of toBeInvited; track email) {
          <li>
            {{ email }}
            <pa-button
              icon="trash"
              size="small"
              aspect="basic"
              (click)="removeUser(email)">
              {{ 'account.invite-collaborators.add-users.remove-user' | translate }}
            </pa-button>
          </li>
        }
      </ul>
    }
  </pa-modal-content>

  <pa-modal-footer>
    <pa-button
      kind="primary"
      [disabled]="selectedRadio === 'invite' && toBeInvited.length === 0"
      (click)="onDone()">
      {{
        (selectedRadio === 'kb'
          ? 'generic.go'
          : selectedRadio === 'sso'
            ? 'account.invite-collaborators.done'
            : 'account.invite-collaborators.add-users.invite-button'
        ) | translate
      }}
    </pa-button>
  </pa-modal-footer>
</pa-modal-advanced>
