<admin-page-header [title]="'Banner'" ></admin-page-header>
<!--Banner Section-->
<div class="col-xl-12 col-lg-12 col-md-12 px-0">
  <div class="card ">
    <div class="card-header border-0">
      <h4 class="card-title">{{'Banner Section' | translate}}</h4>
    </div>
    <form #updateBanner="ngForm" (ngSubmit)="bannerUpdate(updateBanner, 'bannerUpdate')">
      <div class="card-body">
        <input type="hidden" class="form-control" name="id" value="{{banner?.id}}" [ngModel]="banner?.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="searchtitle" value="{{banner?.searchtitle}}" [ngModel]="banner?.searchtitle">
              }
              @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="searchsub" value="{{banner?.searchsub}}"  [ngModel]="banner?.searchsub" >
              }
              @if (loading) {
                <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer ">
        <div class="form-group float-end">
          <button type="submit" [disabled]="updateBanner.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>
<!--EndBanner Section-->