<!-- Header-->
<div class="landingmain-header header custom-header-logo" [ngClass]="{'home-page' : homepage, 'header' : !homepage}">
  <div class="sticky-wrapper" [ngClass]="{'is-sticky' : scrolled}">
    <div class="horizontal-main landing-header clearfix sticky" >
      <div class="horizontal-mainwrapper container clearfix">
        <div class="d-flex">
          <a aria-label="toggle" href="javascript:void(0)" class="animated-arrow horizontal-navtoggle" (click)="toggleMenu()"><span></span></a>
          <div class="headerlanding-logo">
            @if (!headerDetails) {
              <span class="icon-skeleton rounded-circle mb-1 header-brand"></span>
            }
            @if (headerDetails?.title) {
              <a class="header-brand" routerLinkActive="active" routerLink="/">
                @if (headerDetails?.title?.logoimage != null) {
                  <img [src]="headerDetails?.title?.logoimage" class="header-brand-img desktop-lgo" alt="logo" loading="lazy" decoding="async">
                }
                @if (headerDetails?.title?.logoimage1 != null;) {
                  <img [src]="headerDetails?.title?.logoimage1" class="header-brand-img light-logo" alt="logo" loading="lazy" decoding="async">
                }
              </a>
            }
          </div>
          @if (headerDetails?.user?.email) {
            <div class="d-flex order-lg-2 my-auto ms-auto d-lg-none d-block">
              <button aria-label="menutoggle" class="navbar-toggler nav-link icon navresponsive-toggler vertical-icon ms-auto collapsed" type="button" (click)="isMenuCollapsed = !isMenuCollapsed">
                <i class="fe fe-more-vertical header-icons navbar-toggler-icon"></i> </button>
                <div class="mb-0 navbar navbar-expand-lg navbar-nav-right responsive-navbar navbar-dark p-0">
                  <div [ngbCollapse]="isMenuCollapsed" class="navbar-collapse collapse" id="navbarSupportedContent-4">
                    <ul class="d-flex ms-auto landing-header-right p-0 mb-0">
                      <li ngbDropdown class="me-3 header-message">
                        <a class="nav-link icon p-0 mt-1 badgecount no-caret p-0" ngbDropdownToggle>
                          @if (headerDetails?.unreadNotifications?.length == '0') {
                            <span class="badge badge-gray">0</span>
                          } @else {
                            <span class="badge badge-success badge-counter pulse-success side-badge">{{
                            headerDetails?.unreadNotifications?.length }}</span>
                          }
                          <i class="feather feather-bell header-icon"></i>
                        </a>
                        <div ngbDropdownMenu class="dropdown-menu-arrow p-0 notification-dropdown-container responsive-header-dropdown">
                          <div class="dropdown-header border-bottom d-flex justify-content-between">
                            <div class="markasreadcount">
                              @if (headerDetails?.unreadNotifications?.length == '0') {
                                <span class="mark-read-none fs-13">{{'Mark all as read' |
                                translate}}</span>
                              } @else {
                                <span class="mark-read text-primary fs-13">{{'Mark all as read'
                                  |
                                  translate}}</span><i class="feather feather-bell header-icon"></i>
                                }
                              </div>
                            </div>
                            <div class="notifyreading">
                              @if (headerDetails?.unreadNotifications?.length) {
                                @for (notification of (headerDetails?.unreadNotifications ? headerDetails?.unreadNotifications.slice(0,2): []); track notification; let i = $index) {
                                  
                                  
                              @if (notification?.data?.['reasonofinfo'] && notification?.data?.['reasonofinfo'] == 'adminreset2fa') {
                                <a ngbDropdownItem class="border-bottom mark-as-read" href="javascript:;">
                                  <div class="d-flex align-items-center">
                                    <div class="">
                                      <span class="bg-success-transparent brround fs-12 notifications"><i
                                      class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3 text-wrap">
                                        <h6 class="mb-1 text-break">{{
                                          notification?.data?.['title'].slice(0,30)
                                        }}</h6>
                                        <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'Your two factor authentication details are removed by admin' | translate}}
                                        </p>
                                        @if(notification?.created_at){
                                          <div class="small text-muted">
                                            {{ notification?.created_at | dateAgo : timezone }}
                                          </div>
                                        }
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }
                              @if (notification?.data?.['status'] == 'New') {
                                    <a ngbDropdownItem class="border-bottom mark-as-read" href="{{notification?.data?.['clink']}}">
                                      <div class="d-flex align-items-center">
                                        <div class="">
                                          <span class="bg-success-transparent brround fs-12 notifications"><i
                                          class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                        </div>
                                        <div class="d-flex">
                                          <div class="ps-3 text-wrap">
                                            <h6 class="mb-1 text-break">{{
                                              notification?.data?.['title'].slice(0,30)
                                            }}</h6>
                                            <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'Your new ticket has been created' | translate}}
                                              {{ notification?.data?.['ticket_id'] }}
                                            </p>
                                            <div class="small text-muted">
                                              {{ notification?.created_at | dateAgo : timezone }}
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </a>
                                  }
                                  @if (notification?.data?.['status'] == 'Closed') {
                                    <a ngbDropdownItem class="border-bottom mark-as-read" href="{{notification?.data?.['clink']}}">
                                      <div class="d-flex align-items-center">
                                        <div class="">
                                          <span class="bg-success-transparent brround fs-12 notifications"><i
                                          class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                        </div>
                                        <div class="d-flex">
                                          <div class="ps-3 text-wrap">
                                            <h6 class="mb-1 text-break">{{
                                              notification?.data?.['title'].slice(0,30)
                                            }}</h6>
                                            <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'Your ticket has been closed' | translate}} {{
                                            notification?.data?.['ticket_id'] }}</p>
                                            <div class="small text-muted">
                                              {{ notification?.created_at | dateAgo : timezone }}
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </a>
                                  }
                                  @if (notification?.data?.['status'] == 'On-Hold') {
                                    <a ngbDropdownItem class="border-bottom mark-as-read" href="{{notification?.data?.['clink']}}">
                                      <div class="d-flex align-items-center">
                                        <div class="">
                                          <span class="bg-success-transparent brround fs-12 notifications"><i
                                          class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                        </div>
                                        <div class="d-flex">
                                          <div class="ps-3 text-wrap">
                                            <h6 class="mb-1 text-break">{{
                                              notification?.data?.['title'].slice(0,30)
                                            }}</h6>
                                            <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'Your ticket status is On-Hold' | translate}}
                                              {{ notification?.data?.['ticket_id'] }}
                                            </p>
                                            <div class="small text-muted">
                                              {{ notification?.created_at | dateAgo : timezone }}
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </a>
                                  }
                                  @if (notification?.data?.['status'] == 'Re-Open') {
                                    <a ngbDropdownItem class="border-bottom mark-as-read" href="{{notification?.data?.['clink']}}">
                                      <div class="d-flex align-items-center">
                                        <div class="">
                                          <span class="bg-success-transparent brround fs-12 notifications"><i
                                          class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                        </div>
                                        <div class="d-flex">
                                          <div class="ps-3 text-wrap">
                                            <h6 class="mb-1 text-break">{{
                                              notification?.data?.['title'].slice(0,30)
                                            }}</h6>
                                            <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'Your ticket has been Reopened' | translate}}
                                              {{ notification?.data?.['ticket_id'] }}
                                            </p>
                                            <div class="small text-muted">
                                              {{ notification?.created_at | dateAgo : timezone }}
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </a>
                                  }
                                  @if (notification?.data?.['status'] == 'Inprogress') {
                                    <a ngbDropdownItem class="border-bottom mark-as-read" href="{{notification?.data?.['clink']}}">
                                      <div class="d-flex align-items-center">
                                        <div class="">
                                          <span class="bg-success-transparent brround fs-12 notifications"><i
                                          class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                        </div>
                                        <div class="d-flex">
                                          <div class="ps-3 text-wrap">
                                            <h6 class="mb-1 text-break">{{
                                              notification?.data?.['title'].slice(0,30)
                                            }}</h6>
                                            <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'You got a new reply on this ticket' |
                                              translate}} {{
                                            notification?.data?.['ticket_id'] }}</p>
                                            <div class="small text-muted">
                                              {{ notification?.created_at | dateAgo : timezone }}
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </a>
                                  }
                                  @if (notification?.data?.['status'] == 'overdue') {
                                    <a ngbDropdownItem class="border-bottom mark-as-read" href="{{notification?.data?.['clink']}}">
                                      <div class="d-flex align-items-center">
                                        <div class="">
                                          <span class="bg-success-transparent brround fs-12 notifications"><i
                                          class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                        </div>
                                        <div class="d-flex">
                                          <div class="ps-3 text-wrap">
                                            <h6 class="mb-1 text-break">{{
                                              notification?.data?.['title'].slice(0,30)
                                            }}</h6>
                                            <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'Your ticket status is Overdue' | translate}}
                                              {{ notification?.data?.['ticket_id'] }}
                                            </p>
                                            <div class="small text-muted">
                                              {{ notification?.created_at | dateAgo : timezone }}
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </a>
                                  }
                                  @if (notification?.data?.['status'] == 'Suspend') {
                                    <a ngbDropdownItem class="border-bottom mark-as-read" href="{{notification?.data?.['clink']}}">
                                      <div class="d-flex align-items-center">
                                        <div class="">
                                          <span class="bg-success-transparent brround fs-12 notifications"><i
                                          class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                        </div>
                                        <div class="d-flex">
                                          <div class="ps-3 text-wrap">
                                            <h6 class="mb-1 text-break">{{
                                              notification?.data?.['title'].slice(0,30)
                                            }}</h6>
                                            <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'Your ticket status is Suspend' | translate}}
                                              {{ notification?.data?.['ticket_id'] }}
                                            </p>
                                            <div class="small text-muted">
                                              {{ notification?.created_at | dateAgo : timezone }}
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </a>
                                  }
                                  @if (notification?.data?.['status'] == 'mail') {
                                    <a ngbDropdownItem class="border-bottom mark-as-read" routerLink="/customer/notification/{{notification?.id}}">
                                      <div class="d-flex ">
                                        <div class="">
                                          <span class="bg-success-transparent brround fs-12 notifications"><i
                                          class="feather feather-mail sidemenu_icon fs-20 text-success"></i></span>
                                        </div>
                                        <div class="d-flex">
                                          <div class="ps-3 text-wrap">
                                            <h6 class="mb-1 text-break">
                                              {{notification?.data?.['mailsubject']}}
                                            </h6>
                                            <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate" [innerHTML]="sanitizeHtml(notification?.data?.['mailtext'].slice(0,100))">
                                            </p>
                                            <div class="small text-muted">
                                              {{ notification?.created_at | dateAgo : timezone }}
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </a>
                                  }
                                  
                              @if((notification?.data['status'] == 'invoice') && (notification?.data['itemStatus'] == 'paid')) {
                                <a ngbDropdownItem class="border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}">
                                  <div class="d-flex align-items-center">
                                    <div class="">
                                      <span class="avatar avatar-md bg-success-transparent avatar-rounded"><i class="fe  fe-bell sidemenu_icon fs-20 text-success"></i></span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3">
                                        <h6 class="mb-1">{{'Invoice Marked as Paid.'| translate}}</h6>
                                        <p class="fs-13 mb-1 text-wrap">  {{'A custom invoice marked as Paid'| translate}}</p>
                                        <div class="small text-muted">
                                          {{ notification?.created_at | dateAgo : timezone }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                            }
                            @if(notification?.data['status'] === 'invoice' && notification?.data['itemStatus'] === 'pending'){
                              <a ngbDropdownItem class="border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}">
                                <div class="d-flex align-items-center">
                                  <div>
                                    <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                      <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                    </span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3">
                                      <h6 class="mb-1">{{'New custom invoice created.'| translate}}</h6>
                                      <p class="fs-13 mb-1 text-wrap">{{'A new custom invoice is created'| translate}}</p>
                                      <div class="small text-muted">
                                        {{ notification?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            }

                            @if(['refundRejected'].includes(notification?.data['itemStatus'])){
                              <a ngbDropdownItem class="border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}">
                                <div class="d-flex align-items-center">
                                  <div>
                                    <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                      <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                    </span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3">
                                      <h6 class="mb-1">{{'Your refund request rejected.'| translate}}</h6>
                                      <p class="fs-13 mb-1 text-wrap">{{'Your refund request is rejected.'| translate}}</p>
                                      <div class="small text-muted">
                                        {{ notification?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            }
                            @if(['refunded'].includes(notification?.data['itemStatus'])){
                              <a ngbDropdownItem class="border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}">
                                <div class="d-flex align-items-center">
                                  <div>
                                    <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                      <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                    </span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3">
                                      <h6 class="mb-1">{{'Your refund request is approved.'| translate}}</h6>
                                      <p class="fs-13 mb-1 text-wrap">{{'Your refund request has been approved.'| translate}}</p>
                                      <div class="small text-muted">
                                        {{ notification?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            }

                            @if(notification?.data['link'] === 'refunded'){
                              <a ngbDropdownItem class="border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}">
                                <div class="d-flex align-items-center">
                                  <div>
                                    <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                      <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                    </span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3">
                                      <h6 class="mb-1">{{'Your refund request approved.'| translate}}</h6>
                                      <p class="fs-13 mb-1 text-wrap">{{'Your refund request is approved.'| translate}}</p>
                                      <div class="small text-muted">
                                        {{ notification?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            }
                                }
                              } @else {
                                <a ngbDropdownItem class="border-bottom mark-as-read notification-dropdown" href="javascript:;">
                                  <div class="d-flex justify-content-center align-items-center">
                                    <div class="d-flex">
                                      <div class="ps-3 text-center">
                                        <img src="./assets/images/nonotification.png" alt="" loading="lazy" decoding="async">
                                        <p class="fs-13 mb-1 text-muted">{{'There are no new notifications to display' | translate}}</p>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }
                            </div>
                            <div class=" text-center p-2">
                              <a rourerLink="/customer/allnotifications" class="cmark-all">{{'See All Notifications' | translate}} </a>
                            </div>
                          </div>
                        </li>
                        <li ngbDropdown class="header-flags text-capitalize">
                          <a href="javascript:;" class="text-capitalize nav-link icon fs-16 p-0 bg-transparent text-dark mx-5" ngbDropdownToggle>
                            {{DropDownName}}
                          </a>
                          <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow animated text-capitalize responsive-header-dropdown">
                            <ng-container>
                              @for (data of languageDetails; track data) {
                                <a (click)="setLanCod(data.languagecode,data.id,data.languagename)" [ngClass]="data.languagename == DropDownName || data.languagecode == DropDownName ? 'active' : ''" ngbDropdownItem class="dropdown-item d-flex fs-13">
                                  <span class="">{{data.languagename}}</span>
                                </a>
                              }
                            </ng-container>
                          </div>
                        </li>
                        <li ngbDropdown class="profile-dropdown">
                          <a href="javascript:;" class="nav-link p-0 mt-1 leading-none user-img rounded-pill no-caret" ngbDropdownToggle>
                            <span>
                              <!-- @if (headerDetails?.user?.profileimage) { -->
                                <img [src]="headerDetails?.user?.profileimage || './assets/images/user-profile.png'" [alt]="headerDetails?.user?.profileimage"
                                  class="avatar avatar-md bradius rounded-circle" loading="lazy" decoding="async">
                              <!-- }
                              @else {
                                  <img  src="./assets/images/user-profile.png" class="avatar avatar-md bradius rounded-circle" alt="default" loading="lazy" decoding="async">
                              } -->
                            </span>
                          </a>
                          <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow responsive-header-dropdown">
                            <div class="p-3 text-center border-bottom">
                              <a href="javascript:;" class="text-center user pb-0 font-weight-bold">
                                {{ headerDetails?.user?.username }}
                              </a>
                              <p class="text-center user-semi-title mb-0">
                                {{ headerDetails?.user?.email }}
                              </p>
                            </div>
                            <a ngbDropdownItem class="d-flex" routerLinkActive="active" routerLink="/customer/dashboard">
                              <i class="feather feather-grid me-3 fs-16 my-auto"></i>
                              <div class="mt-1">{{ "Dashboard" | translate }}</div>
                            </a>
                            <a ngbDropdownItem class="d-flex" routerLinkActive="active" routerLink="/customer/edit-profile">
                              <i class="feather feather-user me-3 fs-16 my-auto"></i>
                              <div class="mt-1">{{ "Profile" | translate }}</div>
                            </a>
                            <a ngbDropdownItem class="d-flex" routerLinkActive="active" routerLink="/customer/active-tickets">
                              <i class="ri-ticket-2-line me-3 fs-16 my-auto"></i>
                              <div class="mt-1">{{ "Tickets" | translate }}</div>
                            </a>
                            <form id="logout-form" (ngSubmit)="logoutcustomer('logout')">
                              <button type="submit" [disabled]="sendingResponse['logout']" ngbDropdownItem class="d-flex">
                                <i class="feather feather-power me-3 fs-16 my-auto"></i>
                                <span class="mt-1">{{ "Logout" | translate }}@if (sendingResponse['logout']) {
                                  <i class="fa fa-spinner fa-spin mx-1"></i>
                                }
                              </span>
                            </button>
                          </form>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            }

            <nav class="horizontalMenu clearfix order-lg-2 my-auto ms-auto">
              <ul class="horizontalMenu-list custom-ul">
                @if (headerDetails?.setting?.original?.defaultlogin_on == 'off') {
                  <li>
                    <a routerLinkActive="active" routerLink="/" [routerLinkActiveOptions]="{exact: true}">{{"Home" | translate}}</a>
                  </li>
                }

                @if (headerDetails?.setting?.original?.KNOWLEDGE_ENABLE == 'yes') {
                  <li>
                    <a routerLinkActive="active" routerLink="/knowledge" class="sub-icon">{{ "Knowledge" |
                      translate }}
                    </a>
                  </li>
                }
                @if (headerDetails?.setting?.original?.FAQ_ENABLE == 'yes') {
                  <li>
                    <a routerLinkActive="active" routerLink="/faqs" class="sub-icon">{{ "FAQ’s" | translate
                      }}
                    </a>
                  </li>
                }

                @if (headerDetails?.setting?.original?.CONTACT_ENABLE == 'yes') {
                  <li>
                    <a routerLinkActive="active" routerLink="/contact-us">{{
                      "Contact Us" | translate
                    }}</a>
                  </li>
                }
                @if (headerDetails?.page) {
                  @for (pages of headerDetails?.page; track pages) {
                    @if (
                      pages?.status == '1' &&
                      (pages?.viewonpages == 'both' ||
                      pages?.viewonpages == 'header')
                      ) {
                      <li>
                        <a routerLinkActive="active" routerLink="page/{{ pages?.pageslug }}">{{
                        pages?.pagename }}</a>
                      </li>
                    }
                  }
                }

                @if (headerDetails?.user?.email) {
                  <li ngbDropdown class="me-3 header-message">
                    <a class="nav-link icon p-0 mt-1 badgecount no-caret" ngbDropdownToggle>
                      <i class="feather feather-bell header-icon"></i>
                      <!-- Counter - Alerts -->
                      <!-- Counter - Alerts -->
                      @if (notifications) {
                        <span class="badge " [ngClass]="Notificationlength != 0 ? 'badge-success badge-counter pulse-success side-badge':'badge-gray'">{{Notificationlength}}</span>
                      }
                    </a>
                    <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow animated p-0 notification-dropdown-container responsive-header-dropdown">
                      <div class="header-dropdown-list message-menu" id="message-menu">
                        <div class="dropdown-header border-bottom d-flex justify-content-between">
                          <div id="markasreadcount"><span class="mark-read text-primary fs-13" (click)="MarkAllRead()">{{'Mark all as read' | translate}}</span>
                        </div>
                      </div>
                      <div id="notifyreading">
                        @if (Notificationlength == 0 ) {
                          <a class="dropdown-item border-bottom mark-as-read notification-dropdown" href="javascript:;">
                            <div class="d-flex justify-content-center">
                              <div class="ps-3 text-center">
                                <img src="./assets/images/nonotification.png" alt="" loading="lazy" decoding="async">
                                <p class="fs-13 mb-1 text-muted">{{'There are no new notifications to display' | translate}}</p>
                              </div>
                            </div>
                          </a>
                        } @else {
                          @for (notify of notifications; track notify) {
                            @if (notify?.data?.reasonofinfo && notify.data.reasonofinfo === 'adminreset2fa' ) {
                              <a class="dropdown-item border-bottom mark-as-read" href="javascript:;">
                                <div class="d-flex align-items-center">
                                  <div class="">
                                    <span class="bg-success-transparent brround fs-12 notifications"><i
                                    class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3 text-wrap">
                                      <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                      <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate">{{ notify?.data?.['ticket_id'] }} {{'Your two factor authentication details are removed by admin.' | translate}} </p>
                                      <div class="small text-muted">
                                        {{ notify?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            }
                            @else if (notify?.data['ticketassign'] == 'yes') {
                              <a class="dropdown-item border-bottom mark-as-read" routerLink="/customer/ticket-view/{{notify?.['enc_ticket_id']}}">
                                <div class="d-flex align-items-center">
                                  <div class="">
                                    <span class="bg-success-transparent brround fs-12 notifications"><i
                                    class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3 text-wrap">
                                      <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                      <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate">{{ notify?.data?.['ticket_id'] }} {{'Ticket is assigned' | translate}} </p>
                                      <div class="small text-muted">
                                        {{ notify?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            }
                            @else if (notify?.data['status'] == 'New') {
                              <a class="dropdown-item border-bottom mark-as-read" routerLink="/customer/ticket-view/{{notify?.['enc_ticket_id']}}">
                                <div class="d-flex align-items-center">
                                  <div class="">
                                    <span class="bg-success-transparent brround fs-12 notifications"><i
                                    class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3 text-wrap">
                                      <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                      <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'A new ticket has been created' | translate}} {{ notify?.data?.['ticket_id'] }}</p>
                                      <div class="small text-muted">
                                        {{ notify?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            }
                            @else if (notify?.data['status'] == 'Closed') {
                              <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read"
                                routerLink="/customer/ticket-view/{{notify?.['enc_ticket_id']}}">
                                <div class="d-flex align-items-center">
                                  <div class="">
                                    <span class="bg-success-transparent brround fs-12 notifications"><i
                                    class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3 text-wrap">
                                      <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                      <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'This ticket has been closed' | translate}} {{ notify?.data?.['ticket_id'] }}</p>
                                      <div class="small text-muted">
                                        {{ notify?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            }
                            @else if (notify?.data['status'] == 'On-Hold') {
                              <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read"
                                routerLink="/customer/ticket-view/{{notify?.['enc_ticket_id']}}">
                                <div class="d-flex align-items-center">
                                  <div class="">
                                    <span class="bg-success-transparent brround fs-12 notifications"><i
                                    class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3 text-wrap">
                                      <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                      <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'This ticket status is On-Hold' | translate}} {{ notify?.data?.['ticket_id'] }}</p>
                                      <div class="small text-muted">
                                        {{ notify?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            }
                            @else if (notify?.data['status'] == 'Re-Open') {
                              <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read"
                                routerLink="/customer/ticket-view/{{notify?.['enc_ticket_id']}}">
                                <div class="d-flex align-items-center">
                                  <div class="">
                                    <span class="bg-success-transparent brround fs-12 notifications"><i
                                    class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3 text-wrap">
                                      <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                      <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'This ticket has been reopened' | translate}} {{ notify?.data?.['ticket_id'] }}</p>
                                      <div class="small text-muted">
                                        {{ notify?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            }
                            @else if (notify?.data['status'] == 'Inprogress') {
                              @if (notify?.data['overduestatus'] == 'Overdue') {
                                <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read"
                                  routerLink="/customer/ticket-view/{{notify?.['enc_ticket_id']}}">
                                  <div class="d-flex align-items-center">
                                    <div class="">
                                      <span class="bg-success-transparent brround fs-12 notifications"><i
                                      class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3 text-wrap">
                                        <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                        <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate"> {{'This ticket status is overdue' | translate}} {{ notify?.data?.['ticket_id'] }}</p>
                                        <div class="small text-muted">
                                          {{ notify?.created_at | dateAgo : timezone }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              } @else {
                                <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read"
                                  routerLink="/customer/ticket-view/{{notify?.['enc_ticket_id']}}">
                                  <div class="d-flex align-items-center">
                                    <div class="">
                                      <span class="bg-success-transparent brround fs-12 notifications"><i
                                      class="feather  feather-bell sidemenu_icon fs-20 text-success"></i></span>
                                    </div>
                                    <div class="d-flex">
                                      <div class="ps-3 text-wrap">
                                        <h6 class="mb-1 text-break">{{ notify?.data?.['title'].slice(0,30) }}</h6>
                                        <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate">{{'You got a new reply on this ticket' | translate}} {{ notify?.data?.['ticket_id'] }}</p>
                                        <div class="small text-muted">
                                          {{ notify?.created_at | dateAgo : timezone }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </a>
                              }
                            }
                            @else if (notify?.data['status'] == 'mail') {
                              <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read"
                                routerLink="/customer/notifications/{{notify?.id}}">
                                <div class="d-flex ">
                                  <div class="">
                                    <span class="bg-success-transparent brround fs-12 notifications"><i
                                    class="feather  feather-mail sidemenu_icon fs-20 text-success"></i></span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3 text-wrap">
                                      <h6 class="mb-1 text-break"> {{notify?.data['mailsubject']}}</h6>
                                      <p class="fs-13 mb-1 text-wrap text-truncate responsive-notification-truncate" [innerHTML]="sanitizeHtml(notify?.data['mailtext'].slice(0,30))">
                                      </p>
                                      <div class="small text-muted">
                                        {{ notify?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            }
                            
                          
                          @else if(notify?.data['status'] === 'invoice' && notify?.data['itemStatus'] === 'pending'){
                            <a (click)="MarkAsReadWithID(notify?.id)" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}" class="dropdown-item border-bottom mark-as-read">
                              <div class="d-flex align-items-center">
                                <div>
                                  <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                    <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                  </span>
                                </div>
                                <div class="d-flex">
                                  <div class="ps-3">
                                    <h6 class="mb-1">{{'New custom invoice created.' | translate }}</h6>
                                    <p class="fs-13 mb-1 text-wrap">{{'A new custom invoice is created' | translate }}</p>
                                    <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }

                          @else if((notify?.data['status'] == 'invoice') && (notify?.data['itemStatus'] == 'paid')) {
                              <a (click)="MarkAsReadWithID(notify?.id)" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}" class="dropdown-item border-bottom mark-as-read">
                                <div class="d-flex align-items-center">
                                  <div class="">
                                    <span class="avatar avatar-md bg-success-transparent avatar-rounded"><i class="fe  fe-bell sidemenu_icon fs-20 text-success"></i></span>
                                  </div>
                                  <div class="d-flex">
                                    <div class="ps-3">
                                      <h6 class="mb-1">{{'Invoice Marked as Paid.' | translate }}</h6>
                                      <p class="fs-13 mb-1 text-wrap">  {{'A custom invoice marked as Paid' | translate }}</p>
                                      <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                          }
                          @else if(['refundRejected'].includes(notify?.data['itemStatus'])){
                            <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}">
                              <div class="d-flex align-items-center">
                                <div>
                                  <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                    <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                  </span>
                                </div>
                                <div class="d-flex">
                                  <div class="ps-3">
                                    <h6 class="mb-1">{{'Your refund request rejected.' | translate  }}</h6>
                                    <p class="fs-13 mb-1 text-wrap">{{'Your refund request is rejected.' | translate }}</p>
                                    <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }
                          @else if(['refunded'].includes(notify?.data['itemStatus'])){
                            <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}">
                              <div class="d-flex align-items-center">
                                <div>
                                  <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                    <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                  </span>
                                </div>
                                <div class="d-flex">
                                  <div class="ps-3">
                                    <h6 class="mb-1">{{'Your refund request is approved.' | translate }}</h6>
                                    <p class="fs-13 mb-1 text-wrap">{{'Your refund request has been approved.' | translate }}</p>
                                    <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }

                          @else if(notify?.data['link'] === 'refunded'){
                            <a (click)="MarkAsReadWithID(notify?.id)" class="dropdown-item border-bottom mark-as-read" routerLink="/customer/custom-invoice/{{notification?.data?.['tx_id']}}">
                              <div class="d-flex align-items-center">
                                <div>
                                  <span class="avatar avatar-md bg-success-transparent avatar-rounded">
                                    <i class="fe fe-bell sidemenu_icon fs-20 text-success"></i>
                                  </span>
                                </div>
                                <div class="d-flex">
                                  <div class="ps-3">
                                    <h6 class="mb-1">{{'Your refund request approved.' | translate }}</h6>
                                    <p class="fs-13 mb-1 text-wrap">{{'Your refund request is approved.' | translate }}</p>
                                    <div class="small text-muted">
                                      {{ notify?.created_at | dateAgo : timezone }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </a>
                          }
                          }
                        }
                      </div>
                    </div>
                    <div class="text-center p-2">
                      <a (click)="MarkAllRead()" routerLink="/customer/allnotifications" class="smark-all">{{'See All Notifications' | translate}} </a>
                    </div>
                  </div>
                </li>
                <li ngbDropdown class="header-flags">
                  <a href="javascript:;" class="text-capitalize" ngbDropdownToggle>
                    {{DropDownName}}
                  </a>
                  <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow animated text-capitalize responsive-header-dropdown">
                    <ng-container>
                      @for (data of languageDetails; track data) {
                        <a (click)="setLanCod(data.languagecode,data.id,data.languagename)" ngbDropdownItem class="dropdown-item d-flex fs-13">
                          <span class="">{{data.languagename}}</span>
                        </a>
                      }
                    </ng-container>
                  </div>
                </li>
              <li ngbDropdown class="header-flags text-capitalize">
                <a href="javascript:;" class="d-flex align-items-center btn-country" ngbDropdownToggle>
                  {{currencySel}}
                </a>
                <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow animated text-capitalize responsive-header-dropdown">
                  @for (data of headerDetails?.currencies; track data) {
                    <a (click)="setCurrencyCode(data)" [ngClass]="data.code == currencySel || data.languagecode == currencySel ? 'active' : ''" ngbDropdownItem class="dropdown-item d-flex fs-13">
                      <span class="">{{data.code}}</span>
                    </a>
                  }
                </div>
              </li>
                <li ngbDropdown class="profile-dropdown">
                  <a href="javascript:;" class="nav-link p-0 mt-1 leading-none user-img rounded-pill no-caret" ngbDropdownToggle>
                    <span>
                      <!-- @if (headerDetails?.user?.profileimage) { -->
                        <img [src]="headerDetails?.user?.profileimage || './assets/images/user-profile.png'" [alt]="headerDetails?.user?.profileimage" class="avatar avatar-md bradius rounded-circle" loading="lazy" decoding="async">
                      <!-- }
                      @else {
                          <img  src="./assets/images/user-profile.png" class="avatar avatar-md bradius rounded-circle" alt="default" loading="lazy" decoding="async">
                      } -->
                    </span>
                  </a>
                  <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow responsive-header-dropdown">
                    <div class="p-3 text-center border-bottom">
                      <a href="javascript:;" class="text-center user pb-0 font-weight-bold">{{
                      headerDetails?.user?.username }}</a>
                      <p class="text-center user-semi-title mb-0">{{ headerDetails?.user?.email }}</p>
                    </div>
                    <a ngbDropdownItem class="d-flex" routerLinkActive="active" routerLink="/customer/dashboard">
                      <i class="feather feather-grid me-3 fs-16 my-auto"></i>
                      <div class="mt-1">{{ "Dashboard" | translate }}</div>
                    </a>
                    <a ngbDropdownItem class="d-flex" routerLinkActive="active" routerLink="/customer/edit-profile">
                      <i class="feather feather-user me-3 fs-16 my-auto"></i>
                      <div class="mt-1">{{ "Profile" | translate }}</div>
                    </a>
                    <a ngbDropdownItem class="d-flex" routerLinkActive="active" routerLink="/customer/active-tickets">
                      <i class="ri-ticket-2-line me-3 fs-16 my-auto"></i>
                      <div class="mt-1">{{ "Tickets" | translate }}</div>
                    </a>
                    <form (ngSubmit)="logoutcustomer('logout')">
                      <button type="submit" [disabled]="sendingResponse['logout']" ngbDropdownItem class="d-flex">
                        <i class="feather feather-power me-3 fs-16 my-auto"></i>
                        <span class="mt-1">{{ "Logout" | translate }}@if (sendingResponse['logout']) {
                          <i class="fa fa-spinner fa-spin mx-1"></i>
                        }</span>
                      </button>
                    </form>
                  </div>
                </li>
              } @else {
                <li ngbDropdown class="header-flags">
                  <a href="javascript:;" class="text-capitalize" ngbDropdownToggle>
                    {{DropDownName}}
                  </a>
                  <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow animated text-capitalize responsive-header-dropdown">
                    <ng-container>
                      @for (data of languageDetails; track data) {
                        <a (click)="setLanCod(data.languagecode,data.id,data.languagename)" [ngClass]="data.languagename == DropDownName || data.languagecode == DropDownName ? 'active' : ''" ngbDropdownItem class="dropdown-item d-flex fs-13">
                          <span class="">{{data.languagename}}</span>
                        </a>
                      }
                    </ng-container>
                  </div>
                </li>
                
              <li ngbDropdown class="header-flags text-capitalize">
                <a href="javascript:;" class="d-flex align-items-center btn-country" ngbDropdownToggle>
                  {{currencySel}}
                </a>
                <div ngbDropdownMenu class="dropdown-menu-end dropdown-menu-arrow animated text-capitalize responsive-header-dropdown">
                  <ng-container>
                    @for (data of headerDetails?.currencies; track data) {
                      <a (click)="setCurrencyCode(data)" [ngClass]="data.code == currencySel || data.languagecode == currencySel ? 'active' : ''" ngbDropdownItem class="dropdown-item d-flex fs-13">
                        <span class="">{{data.code}}</span>
                      </a>
                    }
                  </ng-container>
                </div>
              </li>
                @if (headerDetails?.setting?.original?.REGISTER_POPUP == 'yes') {
                  <li>
                    <a href="javascript:;" (click)="open(loginmodal)">{{
                      "Login" | translate
                    }}</a>
                  </li>
                  @if (headerDetails?.setting?.original?.REGISTER_DISABLE == 'on') {
                    <li>
                      <a href="javascript:;" (click)="open(registermodal)">{{
                        "Register" | translate
                      }}</a>
                    </li>
                  }
                } @else {
                  <li>
                    <a routerLinkActive="active" routerLink="/customer/login">{{
                      "Login" | translate
                    }}</a>
                  </li>
                  @if (headerDetails?.setting?.original?.REGISTER_DISABLE == 'on') {
                    <li>
                      <a routerLinkActive="active" routerLink="/customer/register">{{ "Register" |
                      translate }}</a>
                    </li>
                  }
                }
                @if (headerDetails?.setting?.original?.GUEST_TICKET == 'yes') {
                  <li>
                    <span class="menu-btn">
                      <a class="btn btn-secondary mt-1 m-0" routerLinkActive="active" routerLink="/guest/open-ticket">
                        <i class="fa fa-paper-plane-o me-1"></i>
                        {{ "Submit Ticket" | translate }}
                      </a>
                    </span>
                  </li>
                }
              }
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>
<!--Header-->

<ng-template #loginmodal let-modal>
<div class="modal-header">
  <h5 class="modal-title">{{ "Login" | translate }}</h5>
  <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')">
  </button>
</div>
<div class="modal-body">
  <div class="single-page customerpage">
    <div class="wrapper wrapper2 box-shadow-0 border-0">
      @if (headerDetails?.socialAuthSettings?.envato_status == 'enable' || headerDetails?.socialAuthSettings?.google_status == 'enable' || headerDetails?.socialAuthSettings?.facebook_status == 'enable'|| headerDetails?.socialAuthSettings?.twitter_status == 'enable') {
        <div class="login-icons card-body border br-7 mx-5 my-3 p-4 d-flex align-items-center justify-content-center">
          @if (headerDetails?.socialAuthSettings?.envato_status == 'enable') {
            <a aria-label="social" href="javascript:;" (click)="socialLogin('envato')" class="social-icon brround me-3 bg-primary-transparent text-primary" [ngbTooltip]="'Login with Envato' | translate">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                <path fill="#7CB342"
                  d="M12.869.088c-.572-.281-3.474.04-5.566 2.047-3.296 3.291-3.217 7.627-3.217 7.627s-.109.446-.573-.201c-1.016-1.295-.484-4.274-.424-4.689.084-.585-.289-.602-.444-.409-3.672 5.098-.356 9.272 1.815 10.597 2.542 1.551 7.556 1.55 9.553-2.85C16.501 6.731 13.586.439 12.869.088z" />
              </svg>
            </a>
          }
          @if (headerDetails?.socialAuthSettings?.google_status == 'enable') {
            <a aria-label="social" href="javascript:;" class="social-icon brround me-3 bg-primary-transparent text-primary" [ngbTooltip]="'Login with Google' | translate" (click)="socialLogin('google')">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 47 48">
                <g fill="none" fill-rule="evenodd">
                  <path fill="#FBBC05"
                    d="M9.827 24c0-1.524.253-2.986.705-4.356l-7.909-6.04A23.456 23.456 0 0 0 .213 24c0 3.737.868 7.26 2.407 10.388l7.905-6.05A13.885 13.885 0 0 1 9.827 24" />
                  <path fill="#EB4335"
                    d="M23.714 10.133c3.311 0 6.302 1.174 8.652 3.094L39.202 6.4C35.036 2.773 29.695.533 23.714.533a23.43 23.43 0 0 0-21.09 13.071l7.908 6.04a13.849 13.849 0 0 1 13.182-9.51" />
                  <path fill="#34A853"
                    d="M23.714 37.867a13.849 13.849 0 0 1-13.182-9.51l-7.909 6.038a23.43 23.43 0 0 0 21.09 13.072c5.732 0 11.205-2.036 15.312-5.849l-7.507-5.804c-2.118 1.335-4.786 2.053-7.804 2.053" />
                  <path fill="#4285F4"
                    d="M46.145 24c0-1.387-.213-2.88-.534-4.267H23.714V28.8h12.604c-.63 3.091-2.346 5.468-4.8 7.014l7.507 5.804c4.314-4.004 7.12-9.969 7.12-17.618" />
                </g>
              </svg>
            </a>
          }
          @if (headerDetails?.socialAuthSettings?.facebook_status == 'enable') {
            <a aria-label="social" href="javascript:;" class="social-icon brround me-3 bg-primary-transparent text-primary" [ngbTooltip]="'Login with Facebook' | translate"
              (click)="socialLogin('facebook')">
              <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
                <g data-name="facebook circle" transform="translate(-126.445 -2.281)">
                  <circle cx="50" cy="50" r="50" fill="#3c5a9a" data-name="Ellipse 2" transform="translate(126.445 2.281)" />
                  <path fill="#fff"
                    d="M357.464,92.677H346.388c-6.573,0-13.884,2.765-13.884,12.292.032,3.32,0,6.5,0,10.078h-7.6v12.1h7.839v34.835h14.405V126.917h9.508l.86-11.9H346.9s.024-5.3,0-6.833c0-3.765,3.918-3.55,4.153-3.55,1.864,0,5.489.005,6.42,0V92.677Z"
                    data-name="Path 21" transform="translate(-164.761 -75.049)" />
                </g>
              </svg>
            </a>
          }
          @if (headerDetails?.socialAuthSettings?.twitter_status == 'enable') {
            <a aria-label="social" href="javascript:;" class="social-icon brround me-3 bg-primary-transparent text-primary" [ngbTooltip]="'Login with Twitter' | translate" (click)="socialLogin('twitter')">
              <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 50 50"><path d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"/></svg>
            </a>
          }
          @if (headerDetails?.setting?.original?.only_social_logins != 'on') {
            <span class="text-center">Or</span>
          }
        </div>
      }

      <div class="card-body border-top-0 pt-3 pb-0">
        @if (headerDetails?.setting?.original?.login_disable == 'on') {
          <div class="alert alert-light-warning br-13 border-0 text-center" role="alert">
            <span class="">{{headerDetails?.setting?.original?.login_disable_statement}}</span>
          </div>
        }
        @if (headerDetails?.setting?.original?.only_social_logins != 'on') {
          <form id="login_form" name="login_form" #logincust="ngForm" (ngSubmit)="customerLogin(logincust, 'loginform')">
            <div class="form-group">
              <label class="form-label">{{'Email'| translate}} <span class="text-red">*</span></label>
              <input class="form-control " [placeholder]="'Email' | translate" type="email" name="email" #email="ngModel"
                [class.is-invalid]="email.invalid && email.touched" [class.is-valid]="email.valid" required id="headerDetails?.username" ngModel pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}">
              @if ((email.invalid && email.touched) || email.dirty) {
                <div>
                  @if (email.errors?.['required']) {
                    <small class="text-danger">{{'Email address is required' | translate}}</small>
                  }
                  @if (email.errors?.['pattern']) {
                  <small class="text-danger">{{'Please check Email Format' | translate}}</small>
                  }
                </div>
              }
            </div>
            <div class="form-group">
              <label class="form-label">{{'Password' | translate}} <span class="text-red">*</span></label>
              <input class="form-control" [placeholder]="'Password' | translate" type="password" id="password" name="password" #pswd="ngModel"
                [class.is-invalid]="pswd.invalid && pswd.touched" required [(ngModel)]="password">
              @if ((pswd.invalid && pswd.touched) || pswd.dirty) {
                <div>
                  @if (pswd.errors?.['required']) {
                    <small class="text-danger">{{'Password is required' | translate}}</small>
                  }
                </div>
              }
            </div>
            <div class="form-group">
              <label class="custom-control form-checkbox">
                <input type="checkbox" class="custom-control-input" name="remember" id="remember" ngModel>
                <span class="custom-control-label">{{'Remember Me' | translate}}</span>
              </label>
            </div>
            @if (headerDetails?.setting?.original?.CAPTCHATYPE == 'manual' && headerDetails?.setting?.original?.RECAPTCH_ENABLE_LOGIN == 'yes') {
              <div class="form-group row">
                <div class="col-md-12 mb-3">
                  <app-manualcaptcha (captchaComplete)="manualCaptchEvent($event)" required [canvasId]="'LoginPopup'"></app-manualcaptcha>
                  <div>
                    @if (captchaMessage) {
                      <span class="text-danger">{{captchaMessage | translate}}</span>
                    }
                  </div>
                </div>
              </div>
            }
            @if (headerDetails?.setting?.original?.CAPTCHATYPE == 'google' && headerDetails?.setting?.original?.RECAPTCH_ENABLE_LOGIN == 'yes') {
              <div class="form-group">
                <re-captcha #googlerecaptcha name="g-recaptcha-response"  required (resolved)="resolved($event)" [siteKey]="headerDetails?.setting?.original?.GOOGLE_RECAPTCHA_KEY"></re-captcha>

                <!-- You can use ngModel on a hidden input field to capture the reCAPTCHA response -->
                <input type="hidden" name="g-recaptcha-response" [(ngModel)]="captcha" #captchaControl="ngModel"/>
              </div>
            }
            <div class="submit">
              <button [disabled]="logincust.invalid || sendingResponse['loginform']" class="btn btn-secondary btn-block" type="submit" >{{"Login"|translate}}
                @if (sendingResponse['loginform']) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                }
              </button>
            </div>
            <div class="text-center mt-3">
              <a (click)="open(forgotmodal)" class="text-primary pb-2">{{'Forgot Password?' | translate}}</a>
              @if (headerDetails?.setting?.original?.REGISTER_DISABLE == 'on') {
                <p class="text-dark mb-0">{{'Don’t have account?' | translate}}
                  <a class="text-primary ms-1" (click)="open(registermodal)">{{'Register' |
                  translate}}</a></p>
                }
              </div>
            </form>
          }
        </div>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #registermodal let-modal>
<div class="modal-header">
  <h5 class="modal-title">{{ "Register" | translate }}</h5>
  <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')">
  </button>
</div>
<div class="modal-body">
  <div class="single-page customerpage">
    <div class="wrapper wrapper2 box-shadow-0 border-0">
      @if (headerDetails?.socialAuthSettings?.envato_status == 'enable' || headerDetails?.socialAuthSettings?.google_status == 'enable' || headerDetails?.socialAuthSettings?.facebook_status == 'enable'|| headerDetails?.socialAuthSettings?.twitter_status == 'enable') {
        <div class="login-icons card-body border br-7 mx-5 my-3 p-4 d-flex align-items-center justify-content-center">
          @if (headerDetails?.socialAuthSettings?.envato_status == 'enable') {
            <a aria-label="social" href="javascript:;" class="social-icon brround me-3 bg-primary-transparent text-primary" [ngbTooltip]="'Login with Envato' | translate"
              onclick="window.location.href = envato;">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                <path fill="#7CB342"
                  d="M12.869.088c-.572-.281-3.474.04-5.566 2.047-3.296 3.291-3.217 7.627-3.217 7.627s-.109.446-.573-.201c-1.016-1.295-.484-4.274-.424-4.689.084-.585-.289-.602-.444-.409-3.672 5.098-.356 9.272 1.815 10.597 2.542 1.551 7.556 1.55 9.553-2.85C16.501 6.731 13.586.439 12.869.088z" />
              </svg>
            </a>
          }
          @if (headerDetails?.socialAuthSettings?.google_status == 'enable') {
            <a aria-label="social" href="javascript:;" class="social-icon brround me-3 bg-primary-transparent text-primary" [ngbTooltip]="'Login with Google' | translate"
              onclick="window.location.href = google;">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 47 48">
                <g fill="none" fill-rule="evenodd">
                  <path fill="#FBBC05"
                    d="M9.827 24c0-1.524.253-2.986.705-4.356l-7.909-6.04A23.456 23.456 0 0 0 .213 24c0 3.737.868 7.26 2.407 10.388l7.905-6.05A13.885 13.885 0 0 1 9.827 24" />
                  <path fill="#EB4335"
                    d="M23.714 10.133c3.311 0 6.302 1.174 8.652 3.094L39.202 6.4C35.036 2.773 29.695.533 23.714.533a23.43 23.43 0 0 0-21.09 13.071l7.908 6.04a13.849 13.849 0 0 1 13.182-9.51" />
                  <path fill="#34A853"
                    d="M23.714 37.867a13.849 13.849 0 0 1-13.182-9.51l-7.909 6.038a23.43 23.43 0 0 0 21.09 13.072c5.732 0 11.205-2.036 15.312-5.849l-7.507-5.804c-2.118 1.335-4.786 2.053-7.804 2.053" />
                  <path fill="#4285F4"
                    d="M46.145 24c0-1.387-.213-2.88-.534-4.267H23.714V28.8h12.604c-.63 3.091-2.346 5.468-4.8 7.014l7.507 5.804c4.314-4.004 7.12-9.969 7.12-17.618" />
                </g>
              </svg>
            </a>
          }
          @if (headerDetails?.socialAuthSettings?.facebook_status == 'enable') {
            <a aria-label="social" href="javascript:;" class="social-icon brround me-3 bg-primary-transparent text-primary" [ngbTooltip]="'Login with Facebook' | translate"
              onclick="window.location.href = facebook;">
              <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
                <g data-name="facebook circle" transform="translate(-126.445 -2.281)">
                  <circle cx="50" cy="50" r="50" fill="#3c5a9a" data-name="Ellipse 2" transform="translate(126.445 2.281)" />
                  <path fill="#fff"
                    d="M357.464,92.677H346.388c-6.573,0-13.884,2.765-13.884,12.292.032,3.32,0,6.5,0,10.078h-7.6v12.1h7.839v34.835h14.405V126.917h9.508l.86-11.9H346.9s.024-5.3,0-6.833c0-3.765,3.918-3.55,4.153-3.55,1.864,0,5.489.005,6.42,0V92.677Z"
                    data-name="Path 21" transform="translate(-164.761 -75.049)" />
                </g>
              </svg>
            </a>
          }
          @if (headerDetails?.socialAuthSettings?.twitter_status == 'enable') {
            <a aria-label="social" href="javascript:;" class="social-icon brround me-3 bg-primary-transparent text-primary" [ngbTooltip]="'Login with Twitter' | translate"
              onclick="window.location.href = twitter;">
              <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 50 50"><path d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"/></svg>
            </a>
          }
          <span class="text-center">Or</span>
        </div>
      }

      <div class="card-body border-top-0 pt-3 pb-0">
        @if (headerDetails?.setting?.original?.REGISTER_DISABLE == 'off') {
          <div class="alert alert-light-warning br-13 border-0 text-center" role="alert">
            <span class="">{{headerDetails?.setting?.original?.login_disable_statement}}</span>
          </div>
        }
        <form method="post" id="register_form" #registerData="ngForm" (ngSubmit)="register(registerData, 'register')">

          <div class="form-group row">
            <div class="col-sm-6 col-md-6 mb-2 mb-sm-0">
              <label class="form-label">{{'First Name' | translate}} <span class="text-red">*</span></label>
              <input #firstname="ngModel" [class.is-invalid]="firstname.invalid && firstname.touched" required class="form-control" [placeholder]="'Firstname' | translate"
                type="text" name="firstname" ngModel>
              @if ((firstname.invalid && firstname.touched) || firstname.dirty) {
                <div>
                  @if (firstname.errors?.['required']) {
                    <small class="text-danger">{{'First Name is required' | translate}}</small>
                  }
                </div>
              }

            </div>
            <div class="col-sm-6 col-md-6">
              <label class="form-label">{{'Last Name' | translate}} <span class="text-red">*</span></label>
              <input #lastaname="ngModel" [class.is-invalid]="lastaname.invalid && lastaname.touched" required class="form-control" [placeholder]="'Lastname' | translate" type="text"
                name="lastname" ngModel>
              @if ((lastaname.invalid && lastaname.touched) || lastaname.dirty) {
                <div>
                  @if (lastaname.errors?.['required']) {
                    <small class="text-danger">{{'Last Name is required' | translate}}</small>
                  }
                </div>
              }
            </div>

          </div>
          <div class="form-group">
            <label class="form-label">{{'Email' | translate}} <span class="text-red">*</span></label>
            <input #emailField="ngModel" [class.is-invalid]="emailField.invalid && emailField.touched" required class="form-control" [placeholder]="'Email' | translate" type="email" name="email" autocomplete="headerDetails?.username" ngModel pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}">
            @if ((emailField.invalid && emailField.touched) || emailField.dirty) {
              <div [class.is-valid]="emailField.valid">
                @if (emailField.errors?.['required']) {
                  <small class="text-danger">{{'Email address is required' | translate}}</small>
                }
                @if (emailField.errors?.['pattern']) {
                <small class="text-danger">{{'Please check Email Format' | translate}}</small>
                }
              </div>
            }

          </div>
          <div class="form-group row">
            <div class="col-sm-6 col-md-6">
              <label class="form-label">{{'Password' | translate}} <span class="text-red">*</span></label>
              <input #pswdfield="ngModel" [class.is-invalid]="pswdfield.invalid && pswdfield.touched" required class="form-control" [placeholder]="'Password' | translate"
                type="password" name="password" autocomplete="new-password" ngModel>
              @if ((pswdfield.invalid && pswdfield.touched) || pswdfield.dirty) {
                <div>
                  @if (pswdfield.errors?.['required']) {
                    <small class="text-danger">{{'Password is required' | translate}}</small>
                  }
                </div>
              }
            </div>
            <div class="col-sm-6 col-md-6">
              <label class="form-label">{{'Confirm Password' | translate}} <span class="text-red">*</span></label>
              <input #confPswd="ngModel" [class.is-invalid]="confPswd.invalid && confPswd.touched" required class="form-control" [placeholder]="'Password' | translate"
                type="password" name="password_confirmation" autocomplete="new-password" [(ngModel)]="password">
              @if ((confPswd.invalid && confPswd.touched) || confPswd.dirty) {
                <div>
                  @if (confPswd.errors?.['required']) {
                    <small class="text-danger">{{'Confirm Password is required' | translate}}</small>
                  }
                </div>
              }
            </div>
          </div>

          @if (headerDetails?.customfields.length) {
            @for (customfield of headerDetails?.customfields; track customfield) {
              @if (customfield?.status == '1') {
                <div class="form-group ">
                  <div class="row">
                    <div class="col-md-2">
                      <label class="form-label mb-0 mt-2">{{customfield.fieldnames}}
                        @if (customfield.fieldrequired == '1') {
                          <span class="text-red">*</span>
                        }
                      </label>
                    </div>
                    <div class="col-md-10">
                      @if (customfield.fieldtypes == 'text') {
                        <input type="{{customfield.fieldtypes}}" [maxlength]="255" class="form-control" name="custom_{{customfield.id}}" #c_text="ngModel"
                          [class.is-invalid]="c_text.invalid && c_text.touched" [required]="customfield.fieldrequired == '1' ? true : false" ngModel>
                        @if ((c_text.invalid && c_text.touched) || c_text.dirty) {
                          <div>
                            @if (c_text.errors?.['required']) {
                              <small class="text-danger">{{'Field is required' | translate}}</small>
                            }
                          </div>
                        }
                      }
                      @if (customfield.fieldtypes == 'email') {
                        <input type="email"class="form-control" name="custom_{{customfield.id}}"
                          #c_email="ngModel" [class.is-invalid]="c_email.invalid && c_email.touched" [required]="customfield.fieldrequired == '1' ? true : false" ngModel pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}">
                        @if ((c_email.invalid && c_email.touched) || c_email.dirty) {
                          <div>
                            @if (c_email.errors?.['required']) {
                              <small class="text-danger">{{'Email address is required' | translate}}</small>
                            }
                            @if (c_email.errors?.['pattern']) {
                            <small class="text-danger">{{'Please check Email Format' | translate}}</small>
                            }
                          </div>
                        }
                      }
                      @if (customfield.fieldtypes == 'textarea') {
                        <textarea name="custom_{{customfield.id}}" maxlength="255" class="form-control" cols="30" rows="4" #c_textarea="ngModel"
                        [class.is-invalid]="c_textarea.invalid && c_textarea.touched" [required]="customfield.fieldrequired == '1' ? true : false" ngModel></textarea>
                        @if ((c_textarea.invalid && c_textarea.touched) || c_textarea.dirty) {
                          <div>
                            @if (c_textarea.errors?.['required']) {
                              <small class="text-danger">{{'Field is required' | translate}}</small>
                            }
                          </div>
                        }
                      }
                      @if (customfield.fieldtypes == 'select') {
                        <ng-select name="custom_{{customfield.id}}" class="form-control select2-show-search" #c_select="ngModel"
                          [class.is-invalid]="c_select.invalid && c_select.touched" [required]="customfield.fieldrequired == '1' ? true : false" [ngModel]="null">
                          @for (seoption of customfield.fieldoptions?.split(','); track seoption) {
                            <ng-option value="{{seoption}}">{{seoption}}</ng-option>
                          }
                        </ng-select>
                        @if ((c_select.invalid && c_select.touched) || c_select.dirty) {
                          <div>
                            @if (c_select.errors?.['required']) {
                              <small class="text-danger">{{'Field is required' | translate}}</small>
                            }
                          </div>
                        }
                      }
                      @if (customfield.fieldtypes == 'checkbox') {
                        @for (coption of customfield.fieldoptions?.split(','); track coption) {
                          <label class="custom-control custom-checkbox d-inline-block me-3">
                            <input #custo (click)="customfieldSection(coption, 'custom_'+customfield.id, customfield.fieldtypes)" type="{{customfield.fieldtypes}}"
                              class="custom-control-input" name="custom_{{customfield.id}}" [value]="coption">
                            <span class="custom-control-label">{{coption}}</span>
                          </label>
                        }
                      }
                      @if (customfield.fieldtypes == 'radio') {
                        @for (roption of customfield.fieldoptions?.split(','); track roption) {
                          <label class="custom-control form-radio d-inline-block me-3">
                            <input #custo (click)="customfieldSection(roption, 'custom_'+customfield.id, customfield.fieldtypes)" type="{{customfield.fieldtypes}}" class="custom-control-input" name="custom_{{customfield.id}}" [value]="roption" >
                            <span class="custom-control-label">{{roption}}</span>
                          </label>
                        }
                      }
                    </div>
                  </div>
                </div>
              }
            }
          }

          <div class="form-group">
            <label class="custom-control form-checkbox">
              <input type="checkbox" class="custom-control-input " value="agreed" name="agree_terms" ngModel required>
              <span class="custom-control-label">{{'I agree with' | translate}} <a href="{{headerDetails?.setting?.original?.terms_url}}" target="_blank" class="text-primary">
              {{'Terms of services' | translate}}</a></span>
            </label>
          </div>
          @if (headerDetails?.setting?.original?.CAPTCHATYPE =='manual' && headerDetails?.setting?.original?.RECAPTCH_ENABLE_REGISTER =='yes') {
            <div class="form-group row">
              <div class="col-md-6">
                <app-manualcaptcha (captchaComplete)="manualCaptchEvent($event)" required [canvasId]="'registerPopup'"></app-manualcaptcha>
                <div>
                  @if (captchaMessage) {
                    <span class="text-danger">{{captchaMessage | translate}}</span>
                  }
                </div>
              </div>
            </div>
          }

          <!--- if Enable the Google ReCaptcha --->

          @if (headerDetails?.setting?.original?.CAPTCHATYPE =='google' && headerDetails?.setting?.original?.RECAPTCH_ENABLE_REGISTER =='yes') {
            <div class="form-group">
              <re-captcha #googlerecaptcha name="g-recaptcha-response"  required (resolved)="resolved($event)" [siteKey]="headerDetails?.setting?.original?.GOOGLE_RECAPTCHA_KEY"></re-captcha>

              <!-- You can use ngModel on a hidden input field to capture the reCAPTCHA response -->
              <input type="hidden" name="g-recaptcha-response" [(ngModel)]="captcha" #captchaControl="ngModel"/>
            </div>
          }

          <div class="submit">
            <button type="submit" [disabled]="registerData.invalid || checkStatus || sendingResponse['register']" class="btn btn-secondary btn-block" id="register_button"
              >{{'Create Account' | translate}}
              @if (sendingResponse['register']) {
                <i class="fa fa-spinner fa-spin mx-1"></i>
              }</button>
            </div>

            <div class="text-center mt-4">
              <p class="text-dark mb-0">{{'Already have an account?' | translate}}
                <a class="text-primary ms-1" (click)="open(loginmodal)">{{'Login' |
                translate}}</a>
              </p>

            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #forgotmodal let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{ "Forgot Password?" | translate }}</h5>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <div class="modal-body p-0">
      <div class="single-page customerpage">
        <div class="wrapper wrapper2 box-shadow-0 border-0">
          <form class="card-body pt-3" #forgotPsw="ngForm" (ngSubmit)="forgotPassword(forgotPsw, 'forgotPswd')">
            <div class="form-group">
              <label class="form-label">{{'Email' | translate}}</label>
              <input class="form-control " name="email" [placeholder]="'Email' | translate"  type="email" id="email" required ngModel type="email" #c_email="ngModel"
              [class.is-invalid]="c_email.invalid && c_email.touched" pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}">
            </div>@if ((c_email.invalid && c_email.touched) || c_email.dirty) {
              <div
                >
                @if (c_email.errors?.['required']) {
                  <small class="text-danger"
                    >
                  {{'Email address is required' | translate}}</small>
                }
@if (c_email.errors?.['pattern']) {
<small class="text-danger">{{'Please check Email Format' | translate}}</small>
}
              </div>
            }
            <div class="submit">
              <button type="submit" class="btn btn-secondary btn-block" [disabled]="sendingResponse['forgotPswd']">{{'Submit' | translate}}
                @if (sendingResponse['forgotPswd']) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                }
              </button>
            </div>
            <div class="text-center mt-4">
              <p class="text-dark mb-0">{{'Already have an account?' | translate}}<a class="text-primary ms-1" href="javascript:;" (click)="open(loginmodal)">{{'Login' | translate}}</a>
            </p>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</ng-template>