<ng-template #newsletterModal let-modal>
  <div class="modal-header p-0">
    <app-button
      [class]="'btn btn-close'"
      [spinner]="false"
      [id]="'profile_modal_close_btn'"
      (click)="modal.dismiss('Cross click')"
    >
      <i class="ri-close-line"></i>
    </app-button>
  </div>
  <div class="modal-box">
    <div class="modal-image">
      <img
        [src]="themeOption.popup.news_letter.image_url ? (storageURL + themeOption.popup.news_letter.image_url) : 'assets/images/newsletter/dummy.png'"
        class="img-fluid"
        alt="newsletter"
      />
    </div>
    <div class="modal-content content-padding">
      <div>
        @if(themeOption.logo.header_logo){
        <img [src]="themeOption.logo.header_logo.original_url" class="modal-logo" alt="logo" />
        }@else {
        <h4>{{ themeOption.general.site_title ? themeOption.general.site_title : 'Logo' }}</h4>
        }
        <h2>{{ themeOption.popup.news_letter.offer }}</h2>
        <h5>{{ themeOption.popup.news_letter.title }}</h5>
        <p>{{ themeOption.popup.news_letter.description }}</p>
        <form class="modal-form">
          <div class="input-group modal-form-box">
            <input
              type="email"
              class="form-control"
              placeholder="{{'your_email_here' | translate}}"
              [formControl]="email"
            />
            <app-button
              [class]="'input-group-text'"
              [id]="'submit_newsletter_btn'"
              [spinner]="true"
              (click)="submit()"
              >{{ 'submit' | translate }}</app-button
            >
          </div>
          <div class="input-box mt-1">
            @if(isSubmit && email.errors?.['email']){
            <div class="invalid-feedback mt-1">{{ 'invalid_email' | translate }}</div>
            }
          </div>
        </form>
      </div>
    </div>
  </div>
</ng-template>
