<admin-page-header [title]="'AI setup'"></admin-page-header>

<div class="col-xl-12 col-lg-12 col-md-12">
    <div class="row">
        <div class="col-xl-6">
            <div class="card ">
                <form #FormData="ngForm" (ngSubmit)="GoogleAnalytics(FormData, 'googleAnalytics')">
                    <div class="card-header d-md-flex d-block">
                        <div class="card-title flex-grow-1">
                            {{'Gemini AI setup settings' | translate}}
                        </div>
                        <div class="custom-switch form-switch">
                            <input type="checkbox" id="myonoffswitch18" ngModel name="enableGemini"
                                class=" toggle-class onoffswitch2-checkbox"
                                [checked]="responce?.settings?.enableGeminiApi == 'on' ? true : false"
                                [ngModel]="responce?.settings?.enableGeminiApi == 'on' ? true : false">
                            <label for="myonoffswitch18" class="toggle-class onoffswitch2-label"></label>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="form-group ">
                            <label class="form-label">{{'GEMINI_API_KEY' | translate}} <span class="text-red">*</span>
                            </label>
                            <input type="text" class="form-control" [ngModel]="responce?.settings?.geminiApiKey" name="geminiKey" #geminiKey="ngModel" required>
                            @if((geminiKey.invalid && geminiKey.touched) || geminiKey.dirty){
                            <div>
                                @if(geminiKey.errors?.['required']){
                                <small class="text-danger">{{'GeminiKey is required' | translate}}</small>
                                }
                            </div>
                            }
                        </div>
                    </div>
                    <div class="col-md-12 card-footer ">
                        <div class="form-group float-end">
                            <button [disabled]="sendingResponse['googleAnalytics']" type="submit"
                                class="btn btn-secondary">{{'Save Changes' | translate}}
                                @if(sendingResponse['googleAnalytics']){
                                <i class="fa fa-spinner fa-spin mx-1"></i>
                                }</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>