<div class="vendor-box">
  <div class="vendor-contain">
    <a href="javascript:void(o)" [routerLink]="['/seller/store/', store?.slug]">
      @if(store?.store_logo){
      <div class="vendor-image">
        <img [src]="store?.store_logo?.original_url" [alt]="store?.store_name" />
      </div>
      }@else {
      <h2 class="vendor-text">{{ store?.store_name?.charAt(0)!.toString().toUpperCase() }}</h2>
      }
    </a>
    <div class="vendor-name">
      <a href="javascript:void(o)" [routerLink]="['/seller/store/', store?.slug]">
        <h5 class="fw-500">
          {{ store?.store_name }}
          <span><i class="ri-star-fill"></i>({{store?.rating_count?.toFixed(1) || 0}})</span>
        </h5>
      </a>
      <a [routerLink]="['/seller/store/', store?.slug]" class="store-btn"
        >{{ 'go_to_store' | translate }} <i class="ri-arrow-right-line"></i
      ></a>
    </div>
  </div>
  <p class="vendor-detail" [innerHTML]="store?.description! | summary:200"></p>

  @if(!store?.hide_vendor_email && !store?.hide_vendor_email){
  <div class="vendor-list">
    <ul>
      @if(!store?.hide_vendor_phone){
      <li>
        <div class="address-contact">
          <i class="ri-smartphone-line"></i>
          <h5>
            {{ 'contact' | translate }}:
            <span class="text-content"
              >+{{ store?.vendor?.country_code }} {{ store?.vendor?.phone }}</span
            >
          </h5>
        </div>
      </li>
      } @if(!store?.hide_vendor_email){
      <li>
        <div class="address-contact">
          <i class="ri-mail-line"></i>
          <h5>
            {{ 'email' | translate }}: <span class="text-content">{{ store?.vendor?.email }}</span>
          </h5>
        </div>
      </li>
      }
    </ul>
  </div>
  }
</div>
