<!-- Fresh Vegetable Section Start -->
<app-breadcrumb [breadcrumb]="breadcrumb" />

@if(aboutUs?.about?.futures?.length && (aboutUs?.about?.content_left_image_url ||
aboutUs?.about?.content_right_image_url)){
<section class="fresh-vegetable-section section-lg-space">
  <div class="container-fluid-lg">
    <div class="row gx-xl-5 gy-xl-0 g-3 ratio_148_1">
      <div class="col-xl-6 col-12">
        <div class="row g-sm-4 g-2">
          <div class="col-6">
            <div class="fresh-image-2">
              <div>
                <img
                  [src]="storageURL + aboutUs?.about?.content_left_image_url"
                  class="bg-img"
                  alt="image"
                />
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class="fresh-image">
              <div>
                <img
                  [src]="storageURL + aboutUs?.about?.content_right_image_url"
                  class="bg-img"
                  alt="image"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-6 col-12">
        <div class="fresh-contain p-center-left">
          <div>
            <div class="review-title">
              <h4>{{ aboutUs?.about?.sub_title }}</h4>
              <h2>{{ aboutUs?.about?.title }}</h2>
            </div>

            <div class="delivery-list">
              <p class="text-content">{{ aboutUs?.about?.description }}</p>

              <ul class="delivery-box">
                @for(futures of aboutUs?.about?.futures; track futures){
                <li>
                  <div class="delivery-box">
                    <div class="delivery-icon">
                      <img [src]="storageURL + futures.icon" alt="icon" />
                    </div>
                    <div class="delivery-detail">
                      <h5 class="text">{{ futures.title }}</h5>
                    </div>
                  </div>
                </li>

                }
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
}
<!-- Fresh Vegetable Section End -->

<!-- Client Section Start -->
@if(aboutUs?.clients?.status && aboutUs?.clients?.content?.length && (aboutUs?.clients?.sub_title ||
aboutUs?.clients?.title)){
<section class="client-section section-lg-space">
  <div class="container-fluid-lg">
    <div class="row">
      <div class="col-12">
        <div class="about-us-title text-center">
          <h4>{{ aboutUs?.clients?.sub_title }}</h4>
          <h2 class="center">{{ aboutUs?.clients?.title }}</h2>
        </div>
        <div class="slider-dots">
          <owl-carousel-o [options]="clientsOptions">
            @for(client of aboutUs?.clients?.content; track client){
            <ng-template carouselSlide>
              <div class="slider-3_1 product-wrapper">
                <div>
                  <div class="clint-contain">
                    <div class="client-icon">
                      <img [src]="storageURL + client.icon" [alt]="client.title" />
                    </div>
                    <h4>{{ client.title }}</h4>
                    <p>{{ client.description }}</p>
                  </div>
                </div>
              </div>
            </ng-template>
            }
          </owl-carousel-o>
        </div>
      </div>
    </div>
  </div>
</section>
}
<!-- Client Section End -->

<!-- Team Section Start -->
@if(aboutUs?.team?.status && aboutUs?.team?.members?.length && (aboutUs?.team?.sub_title ||
aboutUs?.team?.title)){
<section class="team-section section-lg-space">
  <div class="container-fluid-lg">
    <div class="about-us-title text-center">
      <h4 class="text-content">{{ aboutUs?.team?.sub_title }}</h4>
      <h2 class="center">{{ aboutUs?.team?.title }}</h2>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="slider-dots">
          <owl-carousel-o [options]="teamOptions">
            @for(team of aboutUs?.team?.members; track team){
            <ng-template carouselSlide>
              <div>
                <div class="team-box">
                  <div class="team-iamge">
                    <img
                      [src]="storageURL + team?.profile_image_url"
                      class="img-fluid"
                      [alt]="team?.name"
                    />
                  </div>
                  <div class="team-name">
                    <h3>{{ team?.name }}</h3>
                    <h5>{{ team?.designation }}</h5>
                    <p>{{ team?.description }}</p>
                    <ul class="team-media">
                      @if(team?.facebook){
                      <li>
                        <a href="{{ team?.facebook }}" class="fb-bg">
                          <i class="ri-facebook-fill"></i>
                        </a>
                      </li>
                      } @if(team?.pinterest){
                      <li>
                        <a href="{{ team?.pinterest }}" class="pint-bg">
                          <i class="ri-pinterest-fill"></i>
                        </a>
                      </li>
                      } @if(team?.twitter){
                      <li>
                        <a href="{{ team?.twitter }}" class="twitter-bg">
                          <i class="ri-twitter-fill"></i>
                        </a>
                      </li>
                      } @if(team?.instagram){
                      <li>
                        <a href="{{ team?.instagram }}" class="insta-bg">
                          <i class="ri-instagram-fill"></i>
                        </a>
                      </li>
                      }
                    </ul>
                  </div>
                </div>
              </div>
            </ng-template>
            }
          </owl-carousel-o>
        </div>
      </div>
    </div>
  </div>
</section>
}
<!-- Team Section End -->

<!-- Review Section Start -->
@if(aboutUs?.testimonial?.status && aboutUs?.testimonial?.reviews?.length &&
(aboutUs?.testimonial?.sub_title || aboutUs?.testimonial?.title)){
<section class="review-section section-lg-space">
  <div class="container-fluid">
    <div class="about-us-title text-center">
      <h4 class="text-content">{{ aboutUs?.testimonial?.sub_title }}</h4>
      <h2 class="center">{{ aboutUs?.testimonial?.title }}</h2>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="slider-dots">
          <owl-carousel-o [options]="testimonialsOptions">
            @for(team of aboutUs?.testimonial?.reviews; track team){
            <ng-template carouselSlide>
              <div>
                <div class="reviewer-box">
                  <i class="ri-double-quotes-r"></i>
                  <h3>{{ team?.title }}</h3>
                  <p>"{{ team?.review }}"</p>
                  <div class="reviewer-profile">
                    <div class="reviewer-image">
                      <img [src]="storageURL + team?.profile_image_url" alt="image" />
                    </div>
                    <div class="reviewer-name">
                      <h4>{{ team?.name }}</h4>
                      <h6>{{ team?.designation }}</h6>
                    </div>
                  </div>
                </div>
              </div>
            </ng-template>
            }
          </owl-carousel-o>
        </div>
      </div>
    </div>
  </div>
</section>
}
<!-- Review Section End -->

<!-- Blog Section Start -->
@if(aboutUs?.blog?.status){
<section class="section-lg-space">
  <div class="container-fluid-lg">
    <div class="about-us-title text-center">
      <h4 class="text-content">{{ 'our_blog' | translate }}</h4>
      <h2 class="center">{{ 'our_latest_blog' | translate }}</h2>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="slider-dots">
          <owl-carousel-o [options]="blogOptions">
            @for(blog of blogs; track blog){
            <ng-template carouselSlide>
              <div>
                <div class="blog-box">
                  <div class="blog-box-image">
                    <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>

                  <a [routerLink]="['/blog/', blog.slug]" class="blog-detail d-block">
                    <h6>{{ blog.created_by.name }}</h6>
                    <h5>{{ blog.title }}</h5>
                  </a>
                </div>
              </div>
            </ng-template>
            }
          </owl-carousel-o>

          @if(!(blogs && blogs.length)){
          <app-no-data [class]="'no-data-added bg-light'" [text]="'no_blog_found'" />
          }
        </div>
      </div>
    </div>
  </div>
</section>
}
<!-- Blog Section End -->
