<!-- Section -->
<section>
  <div class="bannerimg cover-image" style="background: url(./assets/images/photos/banner1.jpg) center center;">
    <div class="header-text mb-0">
      <div class="container">
        <div class="row text-white">
          <div class="col">
            <h1>{{data?.category?.name}}</h1>
          </div>
          <div class="col col-auto">
            <ol class="breadcrumb text-center">
              <li class="breadcrumb-item">
                <a href="javascript:;" class="text-white-50">{{'Home' | translate}}</a>
              </li>
              <li class="breadcrumb-item active">
                <a href="javascript:;" class="text-white">{{'Category' | translate}}</a>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Section -->

<!--Category Page-->
<section>
  <div class="cover-image sptb">
    <div class="container">
      <div class="row">
        <div class="col-xl-8">
          <div class="card p-0">
            <div class="search-background category-search p-0">
              <input type="text" class="form-control input-lg" name="search_name" id="search_name" placeholder="{{'Ask your Questions' | translate}}....." (keyup)="search($event)">
              <button class="btn"><i class="fe fe-search"></i></button>
              <div id="searchList">
                @if (dropdownData != undefined) {
                  <ul class="dropdown-menu sprukohomesearch">
                    @for (list of dropdownData; track list) {
                      <li>
                        @if (list?.articleslug != null) {
                          <a (click)="closeSearchBakcDrop()" routerLink="/article/{{list?.articleslug}}">
                            {{list?.title?.slice(0,60)}}
                            <span class="badge bg-success-transparent text-success float-end fs-11">
                              ({{list?.category?.name.slice(0, 20)}})
                            </span>
                          </a>
                        } @else {
                          <a (click)="closeSearchBakcDrop()" routerLink="/article/{{list?.id}}">
                            {{list?.title?.slice(0,60)}}
                            <span class="badge bg-success-transparent text-success float-end fs-11">
                              ({{list?.category?.name.slice(0, 20)}})
                            </span>
                          </a>
                        }
                      </li>
                    }
                    @empty {
                      
                      <li class="p-2">{{'No Articel Found' | translate}}</li>
                    }
                  </ul>
                }
                <div #seachBackdrop (click)="closeSearchBakcDrop()" class="search-backdrop"></div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header border-0">
              <h4 class="card-title mb-2">{{data?.category?.name}}</h4>
            </div>
            <div class="card-body pt-1">
              <ul class="list-unstyled list-article mb-0">
                @if (data && data.categorys) {
                  @for (category of data.categorys; track category) {
                    @for (article of category.articles; track article) {
                      @if (article?.status === 'Published') {
                        @if (article?.articleslug) {
                          <li>
                            <a class="" routerLink="/article/{{article?.articleslug}}"><i class="typcn typcn-document-text"></i>
                            @if (article?.subcategory && article?.subcategorys) {
                              <small class="fs-12 d-block text-muted">{{article?.subcategorys?.subcategoryname}}</small>
                            }
                            <span class="categ-text">{{article?.title.slice(0,20)}}</span>
                          </a>
                        </li>
                      } @else {
                        <li>
                          <a class="" routerLink="/article/{{article?.id}}"><i class="typcn typcn-document-text"></i>
                          @if (article?.subcategory && article?.subcategorys) {
                            <small class="fs-12 d-block text-muted">{{article?.subcategorys?.subcategoryname}}</small>
                          }
                          <span class="categ-text">{{article?.title.slice(0,20)}}</span>
                        </a>
                      </li>
                    }
                  }
                }
              }
            }
          </ul>
        </div>
      </div>
    </div>
    <div class="col-xl-4">
      <div class="card ">
        <div class="card-header  border-0">
          <h4 class="card-title">{{'Recent Articles' | translate}}</h4>
        </div>
        <div class="card-body">
          <div class="list-catergory">
            <ul class="item-list item-list-scroll mb-0 custom-ul">
              @if (data && data.recentarticles) {
                @for (recentarticle of data.recentarticles; track recentarticle) {
                  <li class="item mb-4  position-relative">
                    @if (recentarticle?.articleslug != null) {
                      <a routerLink="/article/{{recentarticle?.articleslug}}" class=" admintickets"></a>
                    } @else {
                      <a routerLink="/article/{{recentarticle?.id}}" class=" admintickets"></a>
                    }
                    <div class="d-flex">
                      <div class="me-7">
                        <i class="typcn typcn-document-text item-list-icon"></i>
                      </div>
                      <div class="me-2">
                        <span class="">{{recentarticle?.title.slice(0, 20)}}
                        </span>
                      </div>
                      @if (data?.setting?.original?.article_count == 'on') {
                        <div class="ms-auto">
                          <span class="badge badge-light badge-md fs-10"><i class="fa fa-eye me-1"></i>{{recentarticle?.views}}</span>
                        </div>
                      }
                    </div>
                  </li>
                }
              }
            </ul>
          </div>
        </div>
      </div>

      <div class="card mb-0">
        <div class="card-header  border-0">
          <h4 class="card-title">{{'Popular Articles' | translate}}</h4>
        </div>
        <div class="card-body">
          <div class="list-catergory">
            <ul class="item-list item-list-scroll mb-0 custom-ul">
              @if (data && data.populararticles) {
                @for (populararticle of data.populararticles; track populararticle) {
                  <li class="item mb-4 position-relative">
                    @if (populararticle?.articleslug != null) {
                      <a routerLink="/article/{{populararticle?.articleslug}}" class=" admintickets"></a>
                    } @else {
                      <a routerLink="/article/{{populararticle?.id}}" class=" admintickets"></a>
                    }
                    <div class="d-flex">
                      <div class="me-7">
                        <i class="typcn typcn-document-text item-list-icon"></i>
                      </div>
                      <div class="me-2">
                        <span class="">{{populararticle?.title.slice(0, 20)}}
                        </span>
                      </div>
                      @if (data?.setting?.original?.article_count == 'on') {
                        <div class="ms-auto">
                          <span class="badge badge-light badge-md fs-10">
                            <i class="fa fa-eye me-1"></i>
                            {{populararticle?.views}}
                          </span>
                        </div>
                      }
                    </div>
                  </li>
                }
              }
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
</div>
</section>
<!--Category Page-->
<div #seachBackdrop (click)="closeSearchBakcDrop()" class="search-backdrop"></div>