<app-breadcrumb [breadcrumb]="breadcrumb" />
<section class="blog-section section-b-space">
  <div class="container-fluid-lg">
    <div class="row g-4">
      <div
        class="col-xxl-9 col-xl-8 col-lg-7"
        [class.order-lg-2]="sidebar === 'left_sidebar'"
        [class]="sidebar === 'no_sidebar' ?
                        'col-xxl-12 col-xl-12 col-lg-12' : 'col-xxl-9 col-xl-8 col-lg-7'"
      >
        @if(blogService && blogService.skeletonLoader){
        <div class="row g-4">
          @for(item of skeletonItems; track item){
          <div [class]="style === 'list_view' ? 'col-12 list_view' : 'col-xxl-4 col-sm-6'">
            <app-skeleton-blog />
          </div>
          }
        </div>
        }@else { @if((blog$ | async)?.data?.length){
        <div class="row g-4" [class.ratio_65]="style === 'list_view'">
          @for(blog of (blog$ | async)?.data; track blog){
          <div [class]="style === 'list_view' ? 'col-12' : 'col-xxl-4 col-sm-6'">
            <div
              class="blog-box"
              [class.blog-list]="style === 'list_view'"
              [ngClass]="blog?.is_sticky === 1 ? 'sticky-blog-box' : ''"
            >
              @if(blog?.is_featured){
              <div class="blog-label-tag">
                <span>{{ 'featured' | translate }}</span>
              </div>
              }
              <div class="blog-image">
                <a [routerLink]="['/blog/', blog?.slug]">
                  <img
                    [src]="blog?.blog_thumbnail?.original_url
                                                  ? blog?.blog_thumbnail?.original_url
                                                  : 'assets/images/blog.png'"
                    [alt]="blog?.title"
                  />
                </a>
              </div>
              <div
                class="blog-contain blog-contain-2"
                [class.blog-contain-2]="style === 'list_view'"
              >
                <div class="blog-label">
                  <span class="time">
                    <i class="ri-time-line"></i>
                    <span>{{ blog?.created_at | date: 'dd MMM yyyy hh:mm:a'}}</span>
                  </span>

                  @if((themeOption$ | async)?.blog?.blog_author_enable){
                  <span class="super">
                    <i class="ri-user-line"></i>
                    <span>{{ blog?.created_by?.name }}</span>
                  </span>
                  }
                </div>
                <a [routerLink]="['/blog/', blog?.slug]">
                  <h3>{{ blog?.title }}</h3>
                </a>

                @if(blog?.description){
                <p [innerHTML]="blog.description | summary:200"></p>
                } @if((themeOption$ | async)?.blog?.read_more_enable){
                <a [routerLink]="['/blog/', blog?.slug]" class="blog-button">
                  {{ 'read_more' | translate }} <i class="ri-arrow-right-fill"></i>
                </a>
                }
              </div>
            </div>
          </div>
          }
        </div>
        }@else {
        <app-no-data
          [class]="'no-data-added'"
          [image]="'assets/svg/empty-items.svg'"
          [text]="'no_blogs_found'"
          [description]="'not_find_any_blogs_matching_search_criteria'"
        />
        } } @if((blog$ | async)?.data?.length && !blogService.skeletonLoader){
        <nav class="custome-pagination">
          <app-pagination
            [total]="totalItems"
            [currentPage]="filter['page']"
            [pageSize]="filter['paginate']"
            (setPage)="setPaginate($event)"
          />
        </nav>
        }
      </div>
      <div
        class="col-xxl-3 col-xl-4 col-lg-5"
        [class.order-lg-1]="sidebar === 'left_sidebar'"
        [class]="sidebar === 'no_sidebar' ? 'd-none' : ''"
      >
        <div class="left-sidebar-box">
          <app-blog-sidebar />
        </div>
      </div>
    </div>
  </div>
</section>
