<!-- 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 class="mb-0">{{'Knowledge' | translate}}</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">{{'Knowledge' | translate}}</a>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Section -->
<!--Section-->
<section>
  <div class="cover-image sptb mb-5">
    <div class="container">
      <div class="row row-deck">

        @if (apiLoading) {
          <div class="row row-deck">
            <div class="col-xl-6">
              <div class="card">
                <div class="card-header border-bottom-0">
                  <h4 class="fs-25 card-title">{{'Recent Articles' | translate}}</h4>
                </div>
                <div class="card-body">
                  <ul class="list-unstyled list-article mb-0">
                    <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                    <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                    <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                    <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                    <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                    <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-xl-6">
              <div class="card">
                <div class="card-header border-bottom-0">
                  <h4 class="fs-25 card-title">{{'Popular Articles' | translate}}</h4>
                </div>
                <div class="card-body">
                  <ul class="list-unstyled list-article mb-0">
                    <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                    <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                    <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                    <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                    <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                    <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-xl-4">
              <div class="card">
                <div class="card-header border-bottom-0 d-block">
                  <h4 class="fs-25 card-title d-flex line-skeleton w-30"></h4>
                </div>
                <div class="card-body">
                  <ul class="list-unstyled list-article mb-0">
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-xl-4">
              <div class="card">
                <div class="card-header border-bottom-0 d-block">
                  <h4 class="fs-25 card-title d-flex line-skeleton w-30"></h4>
                </div>
                <div class="card-body">
                  <ul class="list-unstyled list-article mb-0">
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-xl-4">
              <div class="card">
                <div class="card-header border-bottom-0 d-block">
                  <h4 class="fs-25 card-title d-flex line-skeleton w-30"></h4>
                </div>
                <div class="card-body">
                  <ul class="list-unstyled list-article mb-0">
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                    <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        } @else {
          @if (!knowledge?.article?.length) {
            <div class="row">
              <div class="card no-articles mx-3">
                <div class="card-body p-8">
                  <div class="main-content text-center">
                    <div class="notification-icon-container p-4">
                      <img src="/assets/images/noarticle.png" alt="" loading="lazy" decoding="async">
                    </div>
                    <h4 class="mb-1">{{'This article section will be updated shortly.' | translate}}
                    </h4>
                    <p class="text-muted">
                      {{'There are no notifications. We will notify you when the new notification arrives.' | translate}}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          } @else {
            <div class="col-xl-6">
              <div class="card">
                <div class="card-header border-bottom-0">
                  <h4 class="card-title fs-25">{{'Recent Articles' | translate}}</h4>
                </div>
                <div class="card-body">
                  <ul class="list-unstyled list-article mb-0">
                    @for (articles of knowledge?.article; track articles) {
                      @if (articles?.articleslug) {
                        <li>
                          <a class="" routerLink="/article/{{articles?.articleslug}}"><i class="typcn typcn-document-text"></i>
                          @if (articles?.subcategory && articles?.subcategorys) {
                            <small class="fs-12 d-block text-muted">{{articles?.subcategorys?.subcategoryname}}</small>
                          }
                          <span class="categ-text">{{articles?.title.slice(0,20)}}</span>
                        </a>
                      </li>
                    } @else {
                      <li>
                        <a class="" routerLink="/article/{{articles?.id}}">
                          <i class="typcn typcn-document-text"></i>
                          @if (articles?.subcategory && articles?.subcategorys) {
                            <small class="fs-12 d-block text-muted">{{articles?.subcategorys?.subcategoryname}}</small>
                          }
                          <span class="categ-text">{{articles?.title.slice(0,20)}}</span>
                        </a>
                      </li>
                    }
                  }
                </ul>
              </div>
            </div>
          </div>
          <div class="col-xl-6">
            <div class="card">
              <div class="card-header border-bottom-0">
                <h4 class="card-title fs-25">{{'Popular Articles' | translate}}</h4>
              </div>
              <div class="card-body">
                <ul class="list-unstyled list-article mb-0">
                  @for (populararticle of knowledge?.populararticle; track populararticle) {
                    @if (populararticle?.articleslug) {
                      <li>
                        <a class="" routerLink="/article/{{populararticle?.articleslug}}"><i class="typcn typcn-document-text"></i>
                        @if (populararticle?.subcategory && populararticle?.subcategorys) {
                          <small class="fs-12 d-block text-muted">{{populararticle?.subcategorys?.subcategoryname}}</small>
                        }
                        <span class="categ-text">{{populararticle?.title.slice(0,20)}}</span>
                      </a>
                    </li>
                  } @else {
                    <li>
                      <a class="" routerLink="/article/{{populararticle?.id}}"><i class="typcn typcn-document-text"></i>
                      @if (populararticle?.subcategory && populararticle?.subcategorys) {
                        <small class="fs-12 d-block text-muted">{{populararticle?.subcategorys?.subcategoryname}}</small>
                      }
                      <span class="categ-text">{{populararticle?.title.slice(0,20)}}</span>
                    </a>
                  </li>
                }
              }
            </ul>
          </div>
        </div>
      </div>
    }
    @for (categorys of knowledge?.category; track categorys) {
      @if (categorys?.articles?.length) {
        <div class="col-xl-4">
          <div class="card">
            <div class="card-header border-bottom-0 d-flex">
              <h4 class="card-title fs-25">{{categorys?.name | translate}}</h4>
              <span class="card-options me-0 ">
                @if (categorys?.categoryslug) {
                  <a routerLink="/category/{{categorys?.categoryslug}}" class="text-primary">{{'View All' | translate}}</a>
                } @else {
                  <a routerLink="/category/{{categorys?.id}}" class="text-primary">{{'View All' | translate}}</a>
                }
              </span>
            </div>
            <div class="card-body">
              <ul class="list-unstyled list-article mb-0">
                @for (articless of categorys.articles?.slice(0, 6); track articless) {
                  @if (articless.status == 'Published') {
                    @if (articless?.articleslug) {
                      <li>
                        <a class="" routerLink="/article/{{articless?.articleslug}}"><i class="typcn typcn-document-text"></i>
                        @if (articless?.subcategory && articless?.subcategorys) {
                          <small class="fs-12 d-block text-muted">{{articless?.subcategorys?.subcategoryname}}</small>
                        }
                        <span class="categ-text">{{articless?.title.slice(0,20)}}</span>
                      </a>
                    </li>
                  } @else {
                    <li>
                      <a class="" routerLink="/article/{{articless?.id}}"><i class="typcn typcn-document-text"></i>
                      @if (articless?.subcategory && articless?.subcategorys) {
                        <small class="fs-12 d-block text-muted">{{articless?.subcategorys?.subcategoryname}}</small>
                      }
                      <span class="categ-text">{{articless?.title.slice(0,20)}}</span>
                    </a>
                  </li>
                }
              }
            }
          </ul>
        </div>
      </div>
    </div>
  }
}
}
</div>
</div>
</div>
</section>
<!--Section-->