
<admin-page-header [title]="'Social Logins'" ></admin-page-header>

<div class="row">
  <div class="col-md-12">
    <div class="card overflow-hidden">
      <div class="card-body p-0">
        <div class="d-lg-flex main-settings-layout settings-layout-2">
          <div class="border-end mn-wd-20p  border-bottom overflow-hidden">
            <ul ngbNav #nav4="ngbNav" [(activeId)]="active3" class="nav nav-pills nav-settings p-3" orientation="vertical">
              <li [ngbNavItem]="1" class="ms-sm-0 mb-sm-1">
                <a class="nav-link"  ngbNavLink>
                  <span class="nav-setting-icon">
                    <svg class="env-icon" style="enable-background:new 0 0 512 512; width: 14px; height: 14px;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x38_5-envato"><g><g><g><path d="M401.225,19.381c-17.059-8.406-103.613,1.196-166.01,61.218      c-98.304,98.418-95.947,228.089-95.947,228.089s-3.248,13.335-17.086-6.011c-30.305-38.727-14.438-127.817-12.651-140.23      c2.508-17.494-8.615-17.999-13.243-12.229c-109.514,152.46-10.616,277.288,54.136,316.912c75.817,46.386,225.358,46.354,284.922-85.231C509.547,218.042,422.609,29.875,401.225,19.381L401.225,19.381z M401.225,19.381"></path></g></g></g></g><g id="Layer_1"></g></svg>
                  </span>
                  <span class="nav-setting-txt">{{'Envato' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <form #FormData="ngForm" (ngSubmit)="EnvatoSettings(FormData, 'emailSetting')">
                    <div class="tab-pane active" id="countryTab">
                      <div class="px-5 py-4 border-bottom d-flex align-items-center">
                        <h5 class="mb-0">{{'Envato Settings' | translate}}</h5>
                        <div class="ms-auto">
                          <div class="switch_section p-0 m-0">
                            <div class="switch-toggle float-end d-flex">
                              <span class="onoffswitch2 switch-lg">
                                <input ngModel type="checkbox" id="myonoffswitch18789" name="envato_status" class=" toggle-class onoffswitch2-checkbox"
                                  [checked]="Response?.envato_status == 'enable' ? true : false"
                                  [ngModel]="Response?.envato_status == 'enable' ? true : false"
                                  >
                                <label for="myonoffswitch18789" class="mb-0 toggle-class onoffswitch2-label"></label>
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="p-5 main-settings-content" id="envatoSettings">
                        <div class="form-group ">
                          <label class="form-label">{{'Envato App ID' | translate}}</label>
                          <input type="text" ngModel="{{Response?.envato_client_id}}" name="envato_client_id" id="envato_client_id" class="form-control  " value="" autocomplete="off">

                        </div>
                        <div class="form-group ">
                          <label class="form-label">{{'Envato Secret' | translate}}</label>
                          <input type="password" ngModel="{{Response?.envato_secret_id}}" name="envato_secret_id" id="envato_secret_id" class="form-control  " value="" autocomplete="off">

                        </div>
                        <div class="form-group">
                          <label>{{'Callback/Redirect URL' | translate}}</label>
                          <p class="text-bold p-2 bg-light br-7 mb-1">{{href}}{{base}}detail/customer/login/envato/callback</p>
                          <small class="text-muted"><i>(A{{'dd this callback URL to your "Envato" App settings.' | translate}})</i></small>
                        </div>
                      </div>
                      <div class="px-5 py-4 mt-auto border-top">
                        <div class="text-end btn-list">
                          <button [disabled]="FormData.invalid || sendingResponse['emailSetting']" type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}@if (sendingResponse['emailSetting']) {
                            <i class="fa fa-spinner fa-spin mx-1"></i>
                          }</button>
                        </div>
                      </div>
                    </div>
                  </form>
                </ng-template>
              </li>
              <li [ngbNavItem]="2" class="ms-sm-0 mb-sm-1">
                <a class="nav-link" ngbNavLink  >
                  <span class="nav-setting-icon">
                    <i class="fa fa-google"></i>
                  </span>
                  <span class="nav-setting-txt">{{'Google' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <form #FormData2="ngForm" (ngSubmit)="GoogleSettings(FormData2, 'google')">
                    <div class="tab-pane active" id="adminTab">
                      <div class="px-5 py-4 border-bottom d-flex align-items-center">
                        <h5 class="mb-0">{{'Google Settings' | translate}}</h5>
                        <div class="ms-auto">
                          <div class="switch_section p-0 m-0">
                            <div class="switch-toggle float-end d-flex">
                              <span class="onoffswitch2 switch-lg">
                                <input ngModel type="checkbox" id="myonoffswitch18" name="google_status" class=" toggle-class onoffswitch2-checkbox"
                                  [checked]="Response?.google_status == 'enable' ? true : false"
                                  [ngModel]="Response?.google_status == 'enable' ? true : false"
                                  [value]="Response?.google_status == 'enable' ? true : false"
                                  >
                                <label for="myonoffswitch18" class="mb-0 toggle-class onoffswitch2-label switch-lg-label"></label>
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="p-5 main-settings-content" id="googleSettings">

                        <div class="form-group ">
                          <label class="form-label">{{'Google App ID' | translate}}</label>
                          <input type="text" name="google_client_id" id="google_client_id" class="form-control" value="" autocomplete="off"
                            ngModel="{{Response?.google_client_id}}"
                            >
                        </div>
                        <div class="form-group ">
                          <label class="form-label">{{'Google Secret' | translate}}</label>
                          <input ngModel="{{Response?.google_secret_id}}" type="password" name="google_secret_id" id="google_secret_id" class="form-control  " value="" autocomplete="off">
                        </div>
                        <div class="form-group">
                          <label>{{'Callback/Redirect URL' | translate}}</label>
                          <p class="text-bold p-2 bg-light br-7 mb-1">{{href}}{{base}}detail/customer/login/google/callback</p>
                          <small class="text-muted"><i>({{'Add this callback URL to your "Google" App settings.' | translate}})</i></small>
                        </div>
                      </div>
                      <div class="px-5 py-4 mt-auto border-top">
                        <div class="text-end btn-list">
                          <button [disabled]="FormData2.invalid || sendingResponse['google']" type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}@if (sendingResponse['google']) {
                            <i class="fa fa-spinner fa-spin mx-1"></i>
                          }</button>
                        </div>
                      </div>
                    </div>
                  </form>
                </ng-template>
              </li>
              <li [ngbNavItem]="3" class="ms-sm-0 mb-sm-1">
                <a class="nav-link" ngbNavLink  >
                  <span class="nav-setting-icon">
                    <i class="fa fa-windows"></i>
                  </span>
                  <span class="nav-setting-txt">{{'Microsoft' | translate}}</span>
                </a>
                <ng-template ngbNavContent>
                  <form #FormData3="ngForm" (ngSubmit)="microSoftSettings(FormData3, 'google')">
                    <div class="tab-pane active" id="adminTab">
                      <div class="px-5 py-4 border-bottom d-flex align-items-center">
                        <h5 class="mb-0">{{'Microsoft Settings' | translate}}</h5>
                        <div class="ms-auto">
                          <div class="switch_section p-0 m-0">
                            <div class="switch-toggle float-end d-flex">
                              <span class="onoffswitch2 switch-lg">
                                <input ngModel type="checkbox" id="myonoffswitch19" name="microsoft_status" class=" toggle-class onoffswitch2-checkbox"
                                  [checked]="Response?.microsoft_status == 'enable' ? true : false"
                                  [ngModel]="Response?.microsoft_status == 'enable' ? true : false"
                                  [value]="Response?.microsoft_status == 'enable' ? true : false"
                                  >
                                <label for="myonoffswitch19" class="mb-0 toggle-class onoffswitch2-label switch-lg-label"></label>
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="p-5 main-settings-content" id="googleSettings">

                        <div class="form-group ">
                          <label class="form-label">{{'Microsoft App ID' | translate}}</label>
                          <input type="text" name="microsoft_app_id" id="microsoft_app_id" class="form-control" value="" autocomplete="off"
                            ngModel="{{Response?.microsoft_app_id}}"
                            >
                        </div>
                        <div class="form-group ">
                          <label class="form-label">{{'Microsoft Secret' | translate}}</label>
                          <input ngModel="{{Response?.microsoft_secret_id}}" type="password" name="microsoft_secret_id" id="microsoft_secret_id" class="form-control  " value="" autocomplete="off">
                        </div>
                        <div class="form-group">
                          <label>{{'Callback/Redirect URL' | translate}}</label>
                          <p class="text-bold p-2 bg-light br-7 mb-1">{{href}}{{base}}detail/customer/login/microsoft/callback</p>
                          <small class="text-muted"><i>({{'Add this callback URL to your "Microsoft" App settings.' | translate}})</i></small>
                        </div>
                      </div>
                      <div class="px-5 py-4 mt-auto border-top">
                        <div class="text-end btn-list">
                          <button [disabled]="FormData3.invalid || sendingResponse['microsoft']" type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}@if (sendingResponse['microsoft']) {
                            <i class="fa fa-spinner fa-spin mx-1"></i>
                          }</button>
                        </div>
                      </div>
                    </div>
                  </form>
                </ng-template>
              </li>
            </ul>
            <div  class="ml-4"></div>
          </div>
          <div class="flex-1">
            <div class="tab-content">
              <div [ngbNavOutlet]="nav4"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

