<app-breadcrumb [breadcrumb]="breadcrumb" />

<section class="author-section">
  <div class="container-fluid-lg">
    <div class="author-main-box">
      <div class="cover-image">
        @if(author && author.author_cover_image) {
        <img src="{{ author.author_cover_image.original_url }}" class="img-fluid" alt="" />
        }
      </div>

      @if(author) {
      <div class="author-box">
        <img
          class="img-fluid author-image"
          [alt]="author.author_name"
          src="{{ author.author_image ? author.author_image.original_url : 'assets/images/author_placeholder.png' }}"
        />
        <div class="right-side-box">
          <div>
            <div class="author-name">
              <h4>{{ author.author_name }}</h4>
              <p>{{ author.bio }}</p>
            </div>

            <div class="author-bottom-box">
              <div>
                <h5>{{'author_details' | translate}}:</h5>
                <ul class="country-list">
                  <li><span>Country : </span>{{ author.country.name }}</li>
                  <li><span>State : </span>{{ author.state.name }}</li>
                  <li><span>City : </span>{{ author.city }}</li>
                </ul>
              </div>

              @if(author.birth_date || author.death_date) {
              <div>
                <ul class="country-list">
                  @if(author.birth_date){
                  <li>
                    <span>{{'born_date' | translate}} :</span> {{author.birth_date | date: 'dd MMM
                    yyyy' }}
                  </li>
                  } @if(author.death_date){
                  <li>
                    <span>{{'death_date' | translate}} :</span> {{author.death_date | date: 'dd MMM
                    yyyy' }}
                  </li>
                  }
                </ul>
              </div>
              }
            </div>
          </div>

          <div class="social-list-box">
            <h5>{{'social_links' | translate}}:</h5>
            <ul class="social-list">
              @if(author.languages) {
              <li>
                <a href="{{author.languages}}" class="language" target="_blank">
                  <i class="ri-global-line"></i>
                </a>
              </li>
              } @if(author.facebook) {
              <li>
                <a href="{{author.facebook}}" class="fb" target="_blank">
                  <i class="ri-facebook-fill"></i>
                </a>
              </li>
              } @if(author.instagram) {
              <li>
                <a href="{{author.instagram}}" class="insta" target="_blank">
                  <i class="ri-instagram-fill"></i>
                </a>
              </li>
              } @if(author.twitter) {
              <li>
                <a href="{{author.twitter}}" class="twitter" target="_blank">
                  <i class="ri-twitter-x-fill"></i>
                </a>
              </li>
              } @if(author.youtube) {
              <li>
                <a href="{{author.youtube}}" class="youtube" target="_blank">
                  <i class="ri-youtube-fill"></i>
                </a>
              </li>
              } @if(author.pinterest) {
              <li>
                <a href="{{author.pinterest}}" target="_blank" class="pinterest">
                  <i class="ri-pinterest-fill"></i>
                </a>
              </li>
              }
            </ul>
          </div>
        </div>
      </div>
      }
    </div>
  </div>
</section>
<!-- Author Section End -->

<!-- Shop Section Start -->
<section class="section-b-space shop-section" id="filtered_products">
  <div class="container-fluid-lg">
    <div class="row">
      <div class="col-custome-12">
        <app-collection-products [filter]="filter" />
      </div>
    </div>
  </div>
</section>
<!-- Shop Section End -->
