<div
  fxLayout="row"
  class="sign-in-content wallpaper"
>
  <div
    fxFlex
    fxLayout="row"
    class="login-section"
  >
    <div class="section-container">
      <mat-accordion displayMode="flat">
        <mat-expansion-panel
          #googleLoginPanel
          hideToggle="true"
          [matTooltip]="googleLoginTooltip"
          matTooltipClass="tooltip"
          matTooltipPosition="above"
          (click)="loginWithGoogle()">
          <mat-expansion-panel-header>
            <mat-panel-title>
              Google Login
            </mat-panel-title>
          </mat-expansion-panel-header>
        </mat-expansion-panel>

        <mat-expansion-panel
          [matTooltip]="nonGoogleLoginTooltip"
          matTooltipClass="tooltip">
          <mat-expansion-panel-header>
            <mat-panel-title>
              Non-Google Login
            </mat-panel-title>
          </mat-expansion-panel-header>
            <mat-tab-group
              mat-stretch-tabs
              class="form-tabs"
              (selectedIndexChange)="onFormChange()"
              *ngIf="!showResetPasswordPanel"
            >
              <mat-tab label="Sign In">
                <app-widget>
                  <app-widget-content>
                    <div class="loading-shade" *ngIf="authIsLoading">
                        <mat-spinner></mat-spinner>
                    </div>

                    <div class="wrapper-content" *ngIf="!authIsLoading">
                      <form
                        *ngIf="signInForm"
                        autocomplete="off"
                        fxLayout="column"
                        fxLayoutGap="2em"
                        [formGroup]="signInForm"
                      >
                        <div fxLayout="column">
                          <div class="form-group">
                            <mat-form-field>
                              <input
                                type="text"
                                matInput
                                placeholder="Email"
                                formControlName="email"
                                maxlength="241"
                                required
                              >
                                <mat-error *ngIf="signInForm.get('email').hasError('required')">
                                  Email is
                                  <strong>required</strong>
                                </mat-error>
                                <mat-error *ngIf="signInForm.get('email').hasError('email')">
                                  Email is
                                  <strong>wrong</strong>
                                </mat-error>
                            </mat-form-field>
                          </div>
                          <div class="form-group">
                            <mat-form-field>
                              <input
                                type="password"
                                matInput
                                placeholder="Password"
                                formControlName="password"
                                maxlength="50"
                                (keydown.enter)="login()"
                                required
                              >
                              <mat-error *ngIf="signInForm.get('password').hasError('required')">
                                Password is
                                <strong>required</strong>
                              </mat-error>
                            </mat-form-field>
                          </div>
                          <p *ngIf="authError" class="error-form">
                            {{ authErrorDescription }}
                          </p>
                        </div>
                      </form>

                      <p class="forgot-password-link">
                        <a (click)="showResetPassword()">Forgot your password?</a>
                      </p>

                      <div>
                        <button
                          mat-raised-button
                          (click)="login()"
                          class="action-button"
                          [disabled]="!f.email.value || !f.password.value"
                        >Sign In</button>
                      </div>

                    </div>
                  </app-widget-content>
                </app-widget>
              </mat-tab>

              <mat-tab label="Sign Up">
                <app-widget>
                  <app-widget-content>
                    <div class="loading-shade" *ngIf="authIsLoading">
                        <mat-spinner></mat-spinner>
                    </div>

                    <div class="wrapper-content" *ngIf="!authIsLoading">
                      <form
                        *ngIf="signUpForm"
                        autocomplete="off"
                        fxLayout="column"
                        fxLayoutGap="2em"
                        [formGroup]="signUpForm"
                      >
                        <div fxLayout="column">
                          <div class="form-group">
                            <mat-form-field>
                              <input type="text" matInput placeholder="Email" formControlName="email" maxlength="241" required>
                                <mat-error *ngIf="signUpForm.get('email').hasError('required')">
                                  Email is
                                  <strong>required</strong>
                                </mat-error>
                                <mat-error *ngIf="signUpForm.get('email').hasError('email')">
                                  Email is
                                  <strong>wrong</strong>
                                </mat-error>
                                <mat-error *ngIf="signUpForm.get('email').hasError('isBrodieEmail')">
                                  If you are a broad user, please use the
                                  <strong>Google Login</strong> option above
                                </mat-error>
                            </mat-form-field>
                          </div>
                          <div class="form-group">
                            <mat-form-field>
                              <input type="password" matInput placeholder="Password" formControlName="password" maxlength="50" required>
                              <mat-error *ngIf="signUpForm.get('password').hasError('required')">
                                Password is
                                <strong>required</strong>
                              </mat-error>
                            </mat-form-field>
                          </div>
                          <p *ngIf="authError" class="error-form">
                            {{ authErrorDescription }}
                          </p>
                        </div>
                      </form>

                      <app-password-strength
                        [password]="r.password.value"
                        (passwordStrengthChange)="onPasswordChange($event)">
                      </app-password-strength>

                      <div>
                        <button
                          mat-raised-button
                          (click)="register()"
                          class="action-button"
                          [disabled]="!r.email.value || !r.password.value || !enableRegistration"
                        >Sign Up</button>
                      </div>

                    </div>
                  </app-widget-content>
                </app-widget>
              </mat-tab>
            </mat-tab-group>

            <div id="reset-password" *ngIf="showResetPasswordPanel">
              <app-widget>
                  <app-widget-content>
                    <div class="loading-shade" *ngIf="authIsLoading">
                      <mat-spinner></mat-spinner>
                    </div>

                    <div class="wrapper-content" *ngIf="!authIsLoading">
                      <form
                        *ngIf="resetPasswordForm"
                        autocomplete="off"
                        fxLayout="column"
                        fxLayoutGap="2em"
                        [formGroup]="resetPasswordForm"
                      >
                        <div fxLayout="column">
                          <div class="form-group">
                            <mat-form-field>
                              <input type="text" matInput placeholder="Email" formControlName="email" maxlength="241" required>
                                <mat-error *ngIf="resetPasswordForm.get('email').hasError('required')">
                                  Email is
                                  <strong>required</strong>
                                </mat-error>
                                <mat-error *ngIf="resetPasswordForm.get('email').hasError('email')">
                                    Email is
                                    <strong>wrong</strong>
                                  </mat-error>
                            </mat-form-field>
                          </div>
                          <p *ngIf="authError" class="error-form">
                            {{ authErrorDescription }}
                          </p>
                        </div>
                      </form>

                      <p>
                        {{ resetPasswordMessage }}
                      </p>

                      <div>
                        <button
                          mat-raised-button
                          (click)="resetPassword()"
                          class="action-button"
                          [disabled]="!p.email.value"
                        >Reset Password</button>

                        <button
                          mat-raised-button
                          (click)="cancelResetPassword()"
                          class="action-button cancel"
                        >Cancel</button>
                      </div>

                    </div>
                  </app-widget-content>
                </app-widget>
            </div>
        </mat-expansion-panel>
      </mat-accordion>
    </div>

  </div>
  <div
    fxFlex="50%"
    fxLayout="row"
    class="brand-section"
  >
    <div class="section-container">
      <app-widget>
        <app-widget-content>
            <div class="brand-logo">
                <img
                  width="149"
                  height="38"
                  src="../../../assets/images/broad_logo.png"
                  alt="Broad Institute">
            </div>
            <small>
              Welcome to the Broad Institute Quotes application. The Quotes application provides customers with
              visibility to their Quotes with the Broad SSF Platforms. The Quote application can also be used to
              review and approve new quotes as they are issued by Broad Platforms.
            </small>
        </app-widget-content>
      </app-widget>
    </div>
  </div>
</div>