<main id="main">
  <div class="main-inner">
    <div class="block-style-02">
      <div class="box">
        <div class="box-head position-relative">
          <h3 class="title-02">
            <span data-i18n="product history">Lịch sử sản phẩm</span>
            <br/>
            <small data-name="generation.productName">
              {{ '' || 'Không xác định' }}
            </small>
          </h3>
          <button class="btn btn-link position-absolute btn-close" (click)="tab = 'origin'; tabChange.emit(tab)">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
        </div>
        @for (time of [1,2,3,4,5]; track time) {
          <div class="box-body timeline">
            <div data-section="group">
              <div class="time-label">
                <span class="bg-green">{{ data.date | date : 'dd/MM/yyyy' }}</span>
              </div>
              <br>
            </div>
            @for (item of [1,2,3,4,5]; track item) {
              <div data-section="item">
                <li class="item bg-blue" [class.active]="false" [class.transport]="false" [class.exwarehouse]="false">
                  <div class="inner">
                    <div class="content">
                      <div class="content-row">
                        <h3 class="head mb-0">
                          {{ data.title }}
                          <span class="time"><i class="far fa-clock"></i> {{ data.time }}</span>
                          <span class="address ml-1"><a href="#"><i class="fas fa-home"></i> {{ data.creator }}</a> </span>
                        </h3>
                        <small class="text-muted mb-1">
                          <a href="https://maps.google.com/?q={{ data.term }}" target="_blank" class="location">
                            <i class="fas fa-location-arrow"></i> {{ data.scanAddress }}</a>
                        </small>
                        <br/>
                        <span>{{ data.description }}</span>
                        {{ data.metas }}
                      </div>
                    </div>
                  </div>
                </li>
              </div>
            }
            <ul class="timeline" data-name="actions"></ul>
          </div>
        }
      </div>
    </div>
  </div>
</main>
