<div class="tab-pane" id="list" role="tabpanel" aria-labelledby="list-tab" *ngIf="(data$ | async) as data">
  <div class="box mb-0">
    <div class="box-head">
      <h3 class="title-02" data-i18n="manufacturer information">Thông tin nhà sản xuất</h3>
    </div>
    <div class="box-body">
      <div class="info-row mb-0">
        <div class="table-cell w40" data-i18n="manufacturer">Đơn vị</div>
        <div class="table-cell bold" data-name="authorisedUnit.name" data-i18n="not found">{{ data?.customer?.name || 'Không xác định' }}</div>
      </div>
      <div class="info-row mb-0">
        <div class="table-cell w40">Email</div>
        <div class="table-cell bold" data-name="authorisedUnit.email" data-type="email" data-i18n="not found">{{ data?.customer?.email || 'Không xác định' }}</div>
      </div>
      <div class="info-row mb-0">
        <div class="table-cell w40">Hotline</div>
        <div class="table-cell bold" data-name="authorisedUnit.phone" data-type="tel" data-i18n="not found">{{ data?.customer?.phone || 'Không xác định' }}</div>
      </div>
      <div class="info-row mb-0">
        <div class="table-cell w40" data-i18n="address">Địa chỉ</div>
        <div class="table-cell bold" data-name="authorisedUnit.address" data-type="google-map-term" data-i18n="not found">{{ getAddress(data?.customer) }}</div>
      </div>
      <div class="info-row mb-0">
        <div class="table-cell w40" data-i18n="harvest date">Ngày thu hoạch</div>
        <div class="table-cell bold" data-name="generation.createdAt" data-type="date" data-i18n="not found">{{ data?.tbCodeDetailsDTO?.createdDate | date : 'dd/MM/yyyy' }}</div>
      </div>
      <div class="info-row mb-0">
        <div class="table-cell w40" data-i18n="manufacturing date">Ngày sản xuất</div>
        <div class="table-cell bold" data-name="activeDate" data-type="date" data-i18n="not found">{{ data?.tbCodeDetailsDTO?.createdDate | date : 'dd/MM/yyyy' }}</div>
      </div>
      <div class="info-row">
        <div class="table-cell w40" data-i18n="expiry date">Ngày hết hạn</div>
        <div class="table-cell bold" data-name="generation.expiredDays" data-type="date" data-i18n="not found">{{ data?.tbCodeDetailsDTO?.createdDate | date : 'dd/MM/yyyy' }}</div>
      </div>
    </div>
  </div>

  <div class="box" *ngIf="data?.customer?.certificationImage">
    <div class="box-head-02" data-name="authorisedUnit.certifications" data-type="visible">
      <p class="lead" data-i18n="CERTIFICATION">CHỨNG CHỈ CHỨNG NHẬN</p>
    </div>
    <div class="box-body" data-name="authorisedUnit.certifications" data-type="visible">
      <div class="info-content" data-name="authorisedUnit.certifications" data-type="loop" data-template="certification" data-i18n="not found">
        @if (true) {
          <figure>
            <img src="https://tpf.aztrace.vn/upload/{{ data?.customer?.certificationImage }}" alt="Giấy chứng nhận" class="mh-25" >
          </figure>
        } @else {
          Không xác định
        }
      </div>
    </div>
<!--    <div class="box-footer " style="background-color: inherit">-->
<!--      <a (click)="tab = 'timeline'; tabChange.emit(tab)" class="btn btn-theme btn-block mt-3" data-i18n="see product history">Xem lịch sử cập nhật sản phẩm</a>-->
<!--      &lt;!&ndash;<a href="unit.html" class="btn btn-theme btn-block mt-3">Xem đơn vị phân phối</a>&ndash;&gt;-->
<!--    </div>-->
  </div>
</div>
