<app-breadcrumb [breadcrumb]="breadcrumb" />
<section class="log-in-section section-b-space">
  <div class="container-fluid-lg w-100">
    <div class="row">
      <div class="col-xxl-6 col-xl-5 col-lg-6 d-lg-block d-none ms-auto">
        <div class="image-contain">
          <img src="assets/images/inner-page/sign-up.png" class="img-fluid" alt="register" />
        </div>
      </div>
      <div class="col-xxl-4 col-xl-5 col-lg-6 col-sm-8 mx-auto">
        <div class="log-in-box">
          <div class="log-in-title">
            <h3>{{ 'welcome_to' | translate }} {{ (setting$ | async)?.general?.site_name }}</h3>
            <h4>{{ 'create_new_account' | translate }}</h4>
          </div>
          <div class="input-box">
            <form class="row g-4" [formGroup]="form" (ngSubmit)="submit()">
              <div class="col-12">
                <div class="form-floating log-in-form">
                  <input
                    type="name"
                    class="form-control"
                    id="name"
                    id="name"
                    formControlName="name"
                    placeholder="{{ 'name' | translate }}"
                  />
                  <label for="name">{{ 'full_name' | translate }}</label>

                  @if(form.controls['name'].touched && form.controls['name'].errors?.['required']){
                  <div class="invalid-feedback">{{ 'name_is_required' | translate }}</div>
                  }
                </div>
              </div>
              <div class="col-12">
                <div class="form-floating log-in-form">
                  <input
                    type="email"
                    class="form-control"
                    id="email"
                    id="email"
                    formControlName="email"
                    placeholder="{{ 'email_address' | translate}}"
                  />
                  <label for="email">{{ 'email_address' | translate}}</label>
                  @if(form.controls['email'].touched &&
                  form.controls['email'].errors?.['required']){
                  <div class="invalid-feedback">{{ 'email_is_required' | translate }}</div>
                  } @if(form.controls['email'].touched && form.controls['email'].errors?.['email']){
                  <div class="invalid-feedback">{{ 'invalid_email' | translate }}</div>
                  }
                </div>
              </div>
              <div class="col-12 phone-field">
                <div class="form-floating log-in-form">
                  <input
                    type="number"
                    class="form-control"
                    id="phone"
                    id="phone"
                    formControlName="phone"
                    placeholder="{{ 'phone' | translate }}"
                  />
                  <label for="phone">{{ 'phone_number' | translate }}</label>

                  @if(form.controls['phone'].touched &&
                  form.controls['phone'].errors?.['required']){
                  <div class="invalid-feedback">{{ 'phone_number_is_required' | translate }}</div>
                  }
                  <select2
                    class="custom-select intl-tel-input"
                    [data]="codes"
                    [templates]="template"
                    formControlName="country_code"
                  >
                    <ng-template #template let-data="data">
                      <div class="country">
                        <div class="flag-box">
                          <div class="iti-flag {{data?.class}}"></div>
                        </div>
                        <span class="dial-code">{{data.code}}</span>
                      </div>
                    </ng-template>
                  </select2>
                </div>
              </div>
              <div class="col-12">
                <div class="form-floating log-in-form">
                  <input
                    type="password"
                    class="form-control"
                    id="password"
                    formControlName="password"
                    placeholder="{{ 'password' | translate }}"
                  />
                  <label for="password">{{ 'password' | translate }}</label>

                  @if(form.controls['password'].touched &&
                  form.controls['password'].errors?.['required']){
                  <div class="invalid-feedback">{{ 'password_is_required' | translate }}</div>
                  }
                </div>
              </div>
              <div class="col-12">
                <div class="form-floating log-in-form">
                  <input
                    type="password"
                    class="form-control"
                    id="password_confirmation"
                    formControlName="password_confirmation"
                    placeholder="{{ 'password_confirmation' | translate }}"
                  />
                  <label for="password_confirmation"
                    >{{ 'password_confirmation' | translate }}</label
                  >

                  @if(form.controls['password_confirmation'].touched &&
                  form.controls['password_confirmation'].errors?.['required']){
                  <div autocomplete="false" class="invalid-feedback">
                    {{ 'confirm_password_is_required' | translate }}
                  </div>
                  }@else if(passwordMatchError){
                  <div class="invalid-feedback">
                    {{ 'confirm_password_does_not_matched' | translate }}
                  </div>
                  }
                </div>
              </div>
              <div class="col-12">
                <div class="forgot-box">
                  <div class="form-check ps-0 m-0 remember-box">
                    <input
                      class="checkbox_animated check-box"
                      type="checkbox"
                      id="flexCheckDefault"
                      [formControl]="tnc"
                    />
                    <label
                      class="form-check-label"
                      for="flexCheckDefault"
                      [class.text-red]="this.tnc.errors?.['required']"
                      >{{ 'i_agree_with' | translate }} <span>{{ 'terms' | translate }}</span> {{
                      'and' | translate }} <span>{{ 'privacy' | translate }}</span></label
                    >
                  </div>
                </div>
              </div>

              @if(reCaptcha){
              <div class="col-12">
                <re-captcha formControlName="recaptcha" />

                @if(form.controls['recaptcha'].touched &&
                form.controls['recaptcha'].errors?.['required']){
                <div class="invalid-feedback">{{ 'reCaptcha is required' | translate }}</div>
                }
              </div>
              }
              <div class="col-12">
                <app-button [id]="'sign_up_btn'" [disabled]="tnc.invalid || form.invalid"
                  >{{ 'sign_up' | translate }}</app-button
                >
              </div>
            </form>
          </div>

          <div class="other-log-in">
            <h6>{{ 'or' | translate }}</h6>
          </div>

          <div class="sign-up-box">
            <h4>{{ 'already_have_an_account' | translate }}?</h4>
            <a [routerLink]="['/auth/login']">{{ 'log_in' | translate }}</a>
          </div>
        </div>
      </div>
      <div class="col-xxl-7 col-xl-6 col-lg-6"></div>
    </div>
  </div>
</section>
