<admin-page-header [title]="'External Chat'"></admin-page-header>

<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0">
      <h4 class="card-title">{{'External Chat Setting' | translate}}</h4>
    </div>
    <form #FormData="ngForm" (ngSubmit)="ExternalChatSetting(FormData, 'externalChat')">
      <div class="card-body">
        <div class="row">
          <div class="switch_section">
            <div class="switch-toggle d-flex ">
              <span class="onoffswitch2">
                <input type="checkbox" name="CUSTOMCHATENABLE" id="myonoffswitch18" class=" toggle-class onoffswitch2-checkbox" value="enable"
                  [checked]="Responce?.CUSTOMCHATENABLE == 'enable' ? true : false" [ngModel]="Responce?.CUSTOMCHATENABLE == 'enable' ? true : false">
                <label for="myonoffswitch18" class="toggle-class onoffswitch2-label"></label>
              </span>
              <div class="ps-3">
                <label class="form-label">{{'External Chat Enable/Disable' | translate}}</label>
                <small class="text-muted"><i>{{'If you enable this “External Chat” setting feature, it will appear on the "Application"' | translate}}.</i></small>
              </div>
            </div>
          </div>
          <div class="switch_section">
            <div class="switch-toggle d-flex ">
              <span class="onoffswitch2">
                <input type="radio" name="CUSTOMCHATUSER" id="myonoffswitch181" class=" toggle-class onoffswitch2-checkbox" value="public"
                  [checked]="Responce?.CUSTOMCHATUSER === 'public' ? true : false" [ngModel]="Responce?.CUSTOMCHATUSER">
                <label for="myonoffswitch181" class="toggle-class onoffswitch2-label"></label>
              </span>
              <div class="ps-3">
                <label class="form-label">{{'All Users' | translate}}</label>
                <small class="text-muted"><i>{{'If you enable this "All Users" setting feature, the "External Chat" will appear to both the users, i.e., for registered users as well as for guest users on the "Application.' | translate}}</i></small>
              </div>
            </div>
          </div>
          <div class="switch_section">
            <div class="switch-toggle d-flex ">
              <span class="onoffswitch2">
                <input type="radio" name="CUSTOMCHATUSER" id="myonoffswitch180" class=" toggle-class onoffswitch2-checkbox" value="user" [checked]="Responce?.CUSTOMCHATUSER === 'user' ? true : false"
                  [ngModel]="Responce?.CUSTOMCHATUSER">
                <label for="myonoffswitch180" class="toggle-class onoffswitch2-label"></label>
              </span>
              <div class="ps-3">
                <label class="form-label">{{'Only Registered users' | translate}}</label>
                <small class="text-muted"><i>{{'If you enable this "Only Registered Users" setting feature, the "External Chat" will appear only for the registered users on the "Application.' |
                    translate}}</i></small>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-12">
            <div class="form-group">
              <label class="form-label">{{'External Chat' | translate}}</label>
              <textarea [ngModel]="Responce?.CUSTOMCHAT" name="customchat" class="form-control " rows="10" [placeholder]="'External Chat' | translate"></textarea>
              <small class="text-muted">{{"Please make sure to add class='customexternalchart' for every individual tag" | translate}}</small>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <div class="form-group float-end">
          <button [disabled]="sendingResponse['externalChat']" type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}@if(sendingResponse['externalChat']){<i class="fa fa-spinner fa-spin mx-1"></i>}</button>
        </div>
      </div>
    </form>
  </div>
</div>