<p-dialog
  header="Terms Of Use"
  [modal]="true"
  [width]="800"
  [(visible)]="termsDisplay"
  [showHeader]="true"
  [closeOnEscape]="false">
  <of-member-terms (close)="termsDisplay = false"></of-member-terms>
</p-dialog>
<p-dialog
  header="Privacy Policy Info"
  [modal]="true"
  [width]="800"
  [(visible)]="policyDisplay"
  [showHeader]="true"
  [closeOnEscape]="false">
  <of-member-policy (close)="policyDisplay = false"></of-member-policy>
</p-dialog>

<ng-template #complete>
<div class="ui-g">
  <div class="ui-g-12">
    <form [formGroup]="signupForm" (ngSubmit)="signupFormSubmit()">
      <table class="login-table">
        <tr>
          <td>
            <div class="login-panel ui-fluid">
              <div class="ui-g">
                <div class="ui-g-12">
                  <img src="assets/layout/images/overFlow_CI_blue_185.png">
                </div>
                <div class="ui-g-12 ui-g-padding-15">
                  <span class="md-inputfield">
                      <input type="email"
                             id="email"
                             pInputText
                             class="input ng-dirty ng-invalid"
                             placeholder="Email"
                             formControlName="email"
                             required
                              />
                      <div
                        *ngIf="signupForm.get('email').hasError('required')"
                          class="ui-message ui-messages-error ui-corner-all">
                          Please provide email
                      </div>
                      <div *ngIf="signupForm.get('email').hasError('email')"
                           class="ui-message ui-messages-error ui-corner-all">
                          Please provide valid email
                      </div>
                  </span>
                </div>
                <!--<div class="ui-g-12 ui-nopad font-s">-->
                    <!--* 비밀번호는 8자 이상 이어야 하며,<br>-->
                    <!--특수문자, 영문 대·소문자, 숫자를 포함해야 합니다.-->
                <!--</div>-->
                <div class="ui-g-12 ui-g-padding-15">
                  <span class="md-inputfield">
                      <input type="password"
                             id="password"
                             pInputText
                             class="input ng-dirty ng-invalid"
                             placeholder="Password"
                             formControlName="password"
                             required>
                      <div *ngIf="password.touched && !password.valid" class="ui-message ui-messages-error ui-corner-all">
                          * Minimum 8-characters long, with at least one $pecial character 1 number and 1 lowercase letter.
                      </div>
                  </span>
                </div>
                <div class="ui-g-12 ui-g-padding-15">
                  <span class="md-inputfield">
                      <input
                        id="pwConfirm"
                        type="password"
                        pInputText
                        class="input ng-dirty ng-invalid"
                        placeholder="Retype your password"
                        formControlName="pwConfirm"
                        required>
                      <div *ngIf="pwConfirm.touched && !pwConfirm.valid" class="ui-message ui-messages-error ui-corner-all">
                          Not matched password
                      </div>
                  </span>
                </div>

                <div class="ui-g-12 ui-g-padding-15">
                  <span class="md-inputfield">
                      <input
                        id="name"
                        type="text"
                        pInputText
                        class="input ng-dirty ng-invalid"
                        placeholder="Name"
                        formControlName="name"
                        required>
                      <div *ngIf="name.touched && !name.valid" class="ui-message ui-messages-error ui-corner-all">
                          Invalid Name
                      </div>
                  </span>
                </div>

                <div class="ui-g-12 ui-g-padding-15">
                  <span class="md-inputfield">
                      <input
                        id="phone"
                        type="text"
                        pInputText
                        class="input ng-dirty ng-invalid"
                        placeholder="Phone"
                        formControlName="phone"
                        required>
                      <div *ngIf="phone.touched && !phone.valid" class="ui-message ui-messages-error ui-corner-all">
                          Invalid phone number
                      </div>
                  </span>
                </div>

                <div class="ui-g-12 ui-g-padding-15">
                  <span class="md-inputfield">
                      <input
                        id="company"
                        type="text"
                        pInputText
                        class="input ng-dirty ng-invalid"
                        placeholder="Company"
                        formControlName="company"
                        required>
                      <div *ngIf="company.touched && !company.valid" class="ui-message ui-messages-error ui-corner-all">
                          Invalid company name
                      </div>
                  </span>
                </div>

                <div class="ui-g-12 ui-g-padding-15">
                  <p class="font-s">
                    <p-checkbox
                      name="groupname"
                      label="이용약관과 개인정보 정책에 동의 합니다."
                      [formControl]="signupForm.controls['selectPolicy']"
                      binary="true"></p-checkbox>
                    <!--{{signupForm.get('selectPolicy').value}}-->
                  </p>
                  <div *ngIf="selectPolicy.touched && !selectPolicy.valid" class="ui-message ui-messages-error ui-corner-all">
                    please check
                  </div>
                  <a href="javascript:void(0)" (click)="termsDisplayOpen()">Terms Of Use</a>
                  |
                  <a href="javascript:void(0)" (click)="policyDisplayOpen()">Privacy Policy</a>
                </div>
                <div class="ui-g-12 ui-no-pad">
                  <div class="recaptcha-align" style="margin: 0 33px;">
                    <div class="content-section implementation">

                      <recaptcha
                        [formControl]="signupForm.controls['captcha']"
                        (scriptLoad)="onScriptLoad()"
                        (scriptError)="onScriptError()"
                      ></recaptcha>
                    </div>
                  </div>
                </div>
                <div class="ui-g-12 ui-g-padding-15">
                  <button type="submit" [disabled]="!signupForm.valid" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
                    <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
                    <span class="ui-button-text ui-c">Sign Up</span>
                  </button>

                  <a href="/auth/signin">Sign In</a>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </form>
  </div>
</div>
</ng-template>

<div class="ui-g"  *ngIf="member$ | async as member; else complete">
  <div class="ui-g-12">
    <table class="login-table">
      <tr>
        <td>
          <div class="login-panel ui-fluid">
            <div class="ui-g">
              <div class="ui-g-12">
                <img src="assets/layout/images/overFlow_CI_blue_185.png">
              </div>
              <div class="ui-g-12 ui-g-padding-15">
                <strong>회원 가입이 신청 되었습니다.</strong>
              </div>
              <div class="ui-g-12 ui-g-padding-15" style="text-align: left !important">
                <p>입력하신 이메일로 인증 메일이 발송 되었습니다.</p>
                <p>받으신 <strong>메일을 확인</strong> 하시고, <strong>인증을 완료</strong> 하시면 회원 가입이 완료 됩니다.</p>
                <p>신청하신 이메일 주소는 <strong>{{member.email}}</strong> 입니다.</p>
              </div>
              <div class="ui-g-12 ui-g-padding-15">
                <button
                  type="button"
                  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"
                  (click)="onSignin()">
                  <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-home"></span>
                  <span class="ui-button-text ui-c">Go to Sign In</span>
                </button>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>