@for (item of flowList; track index; let index = $index) {
  <div class="flex items-center justify-between px-6">
    <div class="flex">
      <div>
        <div>
          <span nz-icon [nzType]="getIcon(item)" [style.color]="getIconColor(item)" style="font-size: 48px"></span>
        </div>
        <div class="text-center pt-2">
          @if (index !== flowList.length - 1) {
            <div
              class="inline-block w-[3px] h-[40px] rounded-[4px] bg-[#F2F2F2]"
              [style.background]="getLineColor(item, index)"
            ></div>
          }
        </div>
      </div>
      <div class="ml-4 text-3">
        <div class="text-xl pb-3">
          <span>{{ getTitle(item) }}</span>
          @if (item.additionText) {
            <span class="ml-2 text-base" [style.color]="item.additionColor">({{ item.additionText }})</span>
          }
        </div>
        <div class="text-base">
          @if (item.status && !item.hideNameAndTime) {
            <span class="text-[#242731]">{{ item.creator }}</span>
            <span class="mx-1 text-[#ECECEC]">|</span>
            @if (item.createTime) {
              <span class="text-[#5F6165]">{{ item.createTime | time: 'YYYY/MM/DD HH:mm' }}</span>
            }
          }
        </div>
      </div>
    </div>
  </div>
}
