<form [formGroup]="formGroup" [bitSubmit]="submit">
  <bit-dialog dialogSize="large">
    <span bitDialogTitle class="tw-font-semibold">
      {{ "newClientOrganization" | i18n }}
    </span>
    <div bitDialogContent>
      <p>{{ "createNewClientToManageAsProvider" | i18n }}</p>
      <div class="tw-mb-3">
        <span class="tw-text-lg tw-pr-1">{{ "selectAPlan" | i18n }}</span>
        <span bitBadge variant="success">{{ "thirtyFivePercentDiscount" | i18n }}</span>
      </div>
      <ng-container>
        <div class="tw-grid tw-grid-flow-col tw-grid-cols-2 tw-gap-4 tw-mb-4">
          <div
            *ngFor="let planCard of planCards"
            [ngClass]="getPlanCardContainerClasses(planCard.selected)"
            (click)="selectPlan(planCard.name)"
          >
            <div class="tw-relative">
              <div
                *ngIf="planCard.selected"
                class="tw-bg-primary-600 tw-text-center !tw-text-contrast tw-text-sm tw-font-bold tw-py-1 group-hover:tw-bg-primary-700"
              >
                {{ "selected" | i18n }}
              </div>
              <div class="tw-p-5" [ngClass]="{ 'tw-pt-12': !planCard.selected }">
                <h3 class="tw-text-2xl tw-font-bold tw-uppercase">{{ planCard.name }}</h3>
                <span class="tw-text-2xl tw-font-semibold">{{
                  planCard.cost | currency: "$"
                }}</span>
                <span class="tw-text-sm tw-font-bold">/{{ "monthPerMember" | i18n }}</span>
              </div>
            </div>
          </div>
        </div>
      </ng-container>
      <div class="tw-grid tw-grid-flow-col tw-grid-cols-2 tw-gap-4">
        <bit-form-field>
          <bit-label>
            {{ "organizationName" | i18n }}
          </bit-label>
          <input type="text" bitInput formControlName="organizationName" />
        </bit-form-field>
        <bit-form-field>
          <bit-label>
            {{ "clientOwnerEmail" | i18n }}
          </bit-label>
          <input type="text" bitInput formControlName="clientOwnerEmail" />
        </bit-form-field>
      </div>
      <div class="tw-grid tw-grid-flow-col tw-grid-cols-2 tw-gap-4">
        <bit-form-field>
          <bit-label>
            {{ "seats" | i18n }}
          </bit-label>
          <input type="text" bitInput formControlName="seats" />
        </bit-form-field>
      </div>
    </div>
    <ng-container bitDialogFooter>
      <button bitButton bitFormButton buttonType="primary" type="submit">
        {{ "addOrganization" | i18n }}
      </button>
      <button bitButton buttonType="secondary" type="button" [bitDialogClose]="ResultType.Closed">
        {{ "close" | i18n }}
      </button>
    </ng-container>
  </bit-dialog>
</form>
