@if(businesshours){
  <ul class="custom-ul text-justify pricing-body text-muted ps-0 mb-4">
    @for (business of businesshours; track business) {
    @if (business?.weeks != null) {
    <li class="mb-2">
      <div
        class="row br-5 notify-days-cal align-items-center p-2 border text-center {{(today | date : 'E' : timezone) == business?.weeks ? 'bg-success-transparent' : '' }}">
        <div class="col-xxl-3 col-xl-3 col-sm-12 ps-0">
          @if (business?.weeks == 'Sun') {
          <span class="badge p-1 bg-info-transparent fs-13 font-weight-normal text-nowrap w-100 ">{{business?.weeks |
            translate}}</span>
          } @else {
          <span class="badge p-1 fs-13 font-weight-normal text-nowrap w-100"
            [ngClass]="(today | date : 'E' : timezone) == business?.weeks ? 'bg-success' : 'bg-info' ">{{business?.weeks |
            translate}}</span>
          }
        </div>
        <div class="col-xxl-3 col-xl-4 col-sm-12">
          @if ((today | date : 'E' : timezone) == business?.weeks) {
          <span [ngClass]="business.status != 'Closed' ? 'text-success' : 'text-success'"
            class="fs-12 ms-2 text-nowrap">{{'Today' | translate}}</span>
          }
        </div>
        <div class="col-xxl-6 col-xl-5 col-sm-12 px-0">
          @if (business?.status == 'Closed') {
          <span class="text-danger fs-12 ms-2">{{business?.status | translate}}</span>
          }
          @else {
          @if(business?.starttime){
          <span class="ms-0 fs-13">{{business?.starttime | timeconvertion}}
            @if (business?.starttime !== null && business?.endtime != null) {
            <span class="fs-10 mx-1">- </span>
            }
          </span>
          }
          @if (business?.starttime !== null && business?.endtime) {
          <span class="ms-0">{{business?.endtime | timeconvertion}}</span>
          }
          }
        </div>
      </div>
    </li>
    }
    }
  </ul>
}
<!-- End Business Hour -->