<div class="tab-pane fade show active" id="info" role="tabpanel" aria-labelledby="info-tab" *ngIf="(data$ | async) as data">
  <div class="box">
    <div class="box-head">
      <h3 class="title-02" data-name="generation.productName" data-i18n="not found">{{ data.tbCropDTO.suppliesName || 'Không xác định' }}</h3>
    </div>
    <div class="box-body">
      <div class="row  no-gutters div-tem">
        <div class="col-4 col-left">
          <div class="d-flex flex-column justify-content-center align-items-center w-fit">
            <figure>
              <img  class="img-fluid" src="assets/images/logo.png" alt="tem" data-name="owner.logo" data-type="image">
            </figure>
            <p class="code">
              <strong data-name="generation.checkCode" data-part="code">{{ data?.tbCodeDetailsDTO?.code }}</strong>
            </p>
          </div>
        </div>
        <div class="col-8 col-right">
          <h3 class="title" data-name="owner.name">{{ data?.customer?.name || 'Không xác định' }}</h3>
          <p>
            <br> Email:
            <strong data-name="owner.email">{{ data?.customer?.email || 'Không xác định' }}</strong>
            <br> Hotline:
            <strong data-name="owner.phone">{{ data?.customer?.phone || 'Không xác định' }}</strong>
            <br> <span data-i18n="address">Địa chỉ</span>:
            <strong data-name="owner.address">{{ getAddress(data?.customer) }}</strong>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-head-02">
      <p class="lead" data-i18n="introduction">Giới thiệu</p>
    </div>
    <div class="box-body">
      <div class="info-content" data-i18n="not found" style="max-height: 450px;" data-name="generation.note">
        {{ data.description || 'Không xác định' }}
      </div>
    </div>
  </div>
</div>
