<div class="bg-white p-4 rounded-3">
  <h5 class="fw-semibold mb-3">Ringkasan Total Laporan</h5>

  <p *ngIf="count == null" class="text-body-tertiary">
    <i class="bi bi-exclamation-circle"></i> Belum ada data.
  </p>

  <div class="row g-3" *ngIf="count">
    <div class="col-lg col-md col-sm-6">
      <div
        class="d-flex align-items-start justify-content-between column-gap-3 p-4 rounded-3 border h-100"
      >
        <div class="d-flex flex-column-reverse">
          <h4 class="h6 text-body-tertiary mb-0">Dalam Proses</h4>
          <h6 class="h4">
            {{ count["Dalam Proses"] ? count["Dalam Proses"] : "-" }}
          </h6>
        </div>
        <span class="flex-shrink-0 bg-primary px-2 py-1 text-white rounded-2">
          <i class="bi bi-clipboard"></i>
        </span>
      </div>
    </div>

    <div class="col-lg col-md col-sm-6">
      <div
        class="d-flex align-items-start justify-content-between column-gap-3 p-4 rounded-3 border h-100"
      >
        <div class="d-flex flex-column-reverse">
          <h4 class="h6 text-body-tertiary mb-0">Ditindak Lanjuti</h4>
          <h6 class="h4">
            {{ count["Ditindak Lanjuti"] ? count["Ditindak Lanjuti"] : "-" }}
          </h6>
        </div>
        <span
          class="d-flex flex-column justify-content-center align-items-center bg-warning px-2 py-2 rounded-2"
        >
          <img src="assets/images/loader.svg" alt="" />
        </span>
      </div>
    </div>

    <div class="col-lg col-md col-sm-6">
      <div
        class="d-flex align-items-start justify-content-between column-gap-3 p-4 rounded-3 border h-100"
      >
        <div class="d-flex flex-column-reverse">
          <h4 class="h6 text-body-tertiary mb-0">Perbaikan</h4>
          <h6 class="h4">
            {{ count["Perbaikan"] ? count["Perbaikan"] : "-" }}
          </h6>
        </div>
        <span
          class="flex-shrink-0 px-2 py-1 text-white rounded-2"
          style="background-color: #3697ff"
        >
          <i class="bi bi-arrow-clockwise"></i>
        </span>
      </div>
    </div>

    <div class="col-lg col-md col-sm-6">
      <div
        class="d-flex align-items-start justify-content-between column-gap-3 p-4 rounded-3 border h-100"
      >
        <div class="d-flex flex-column-reverse">
          <h4 class="h6 text-body-tertiary mb-0">Selesai</h4>
          <h6 class="h4">
            {{
              count["Laporan Selesai & Sudah Divalidasi"]
                ? count["Laporan Selesai & Sudah Divalidasi"]
                : "-"
            }}
          </h6>
        </div>
        <span class="flex-shrink-0 bg-success px-2 py-1 text-white rounded-2">
          <i class="bi bi-check-lg"></i>
        </span>
      </div>
    </div>

    <div class="col-lg col-md col-sm-6">
      <div
        class="d-flex align-items-start justify-content-between column-gap-3 p-4 rounded-3 border h-100"
      >
        <div class="d-flex flex-column-reverse">
          <h4 class="h6 text-body-tertiary mb-0">Total Laporan</h4>
          <h6 class="h4">
            {{ count["Semua Laporan"] ? count["Semua Laporan"] : "-" }}
          </h6>
        </div>
        <span class="flex-shrink-0 bg-info px-2 py-1 text-white rounded-2">
          <i class="bi bi-database"></i>
        </span>
      </div>
    </div>
  </div>
</div>
