<admin-page-header [title]="'Call to Action'"></admin-page-header>
<!--Call Action Section -->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <form #callToaction="ngForm" (ngSubmit)="updateCallToAction(callToaction, 'bannerUpdate')">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Call Action Section' | translate}}</h4>
        <div class="card-options card-header-styles mt-sm-max-2 position-relative">
          <small class="me-1 mt-1">{{'Show Section' | translate}}</small>
          <div class="float-end mt-0">
            <div class="switch-toggle">
              <span class="onoffswitch2">
                <input type="checkbox" name="callcheck" id="callchecks" [checked]="callToAction?.callcheck == 'on' ? true : false" [value]="callToAction?.callcheck"
                  [ngModel]="callToAction?.callcheck == 'on'" class=" toggle-class onoffswitch2-checkbox">
                <label for="callchecks" class="toggle-class onoffswitch2-label"></label>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <input type="hidden" class="form-control" name="id" [value]="callToAction?.id" [ngModel]="callToAction?.id">
        <div class="row">
          <div class="col-sm-12 col-md-12">
            <div class="form-group">
              <label class="form-label">{{'Title' | translate}} <span class="text-red">*</span></label>
              @if (!loading) {
                <input required type="text" class="form-control" name="title" [value]="callToAction?.title" [ngModel]="callToAction?.title">
              }
              @if (loading) {
                <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </div>
          </div>
          <div class="col-sm-12 col-md-12">
            <div class="form-group">
              <label class="form-label">{{'Subtitle' | translate}}</label>
              @if (!loading) {
                <input type="text" class="form-control" name="subtitle" [value]="callToAction?.subtitle" [ngModel]="callToAction?.subtitle">
              }
              @if (loading) {
                <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </div>
          </div>
          <div class="col-sm-12 col-md-12">
            <div class="form-group">
              <label class="form-label">{{'Button-Text' | translate}} <span class="text-red">*</span></label>
              @if (!loading) {
                <input required type="text" class="form-control" name="buttonname" [value]="callToAction?.buttonname" [ngModel]="callToAction?.buttonname">
              }
              @if (loading) {
                <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </div>
          </div>
          <div class="col-sm-12 col-md-12">
            <div class="form-group">
              <label class="form-label">{{'Button-Url' | translate}} <span class="text-red">*</span></label>
              @if (!loading) {
                <input required type="url" class="form-control" name="buttonurl" placeholder="https://www.example.com" [value]="callToAction?.buttonurl"
                  [ngModel]="callToAction?.buttonurl">
              }
              @if (loading) {
                <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group ">
              <div>
                <label class="form-label">{{'Upload Image' | translate}}</label>
                <div class="file-browser">
                  <app-image-upload [directTypes]="setting?.USER_FILE_UPLOAD_TYPES" [directSize]="10" [setting]="setting" [maxLength]="1" (onImageUploaded)="onImageUploaded($event)" [media]="[callToAction]"></app-image-upload>
                </div>
                <small class="text-muted"><i>{{'Filesize should not be morethan 10MB' | translate}}</i></small>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12 card-footer ">
        <div class="form-group float-end">
          <button type="submit" [disabled]="callToaction.invalid || sendingResponse['bannerUpdate'] || loading" class="btn btn-secondary">{{'Save Changes' | translate}}
            @if (sendingResponse['bannerUpdate'] || loading) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
            }
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<!--End Call Action Section -->