
        <!-- Start::row-1 -->
        <div class="relative sm:max-w-xs max-w-[210px]">
          <label for="hs-table-search" class="sr-only">Search</label>
          <div
            class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none ltr:pr-4 rtl:pl-4"
          >
            <i class="ti ti-search"></i>
          </div>
          <input
            type="text"
            name="hs-table-search"
            id="hs-table-search"
            class="p-2 ltr:pr-10 rtl:pl-10 ti-form-input"
            placeholder="Search Task"
          />
        </div>
        <div class="box">
          <div class="box-header lg:flex lg:justify-between space-y-2 lg:space-y-0">
            <h5 class="box-title my-auto">รายชื่ออุปกรณ์</h5>
            <a routerLink="/ecommerce/add-product" class="ti-btn ti-btn-primary m-0 py-2"><i class="ri ri-add-line"></i>เพื่มอุปกรณ์</a>

          </div>

          <div class="box-body">
            <div class="table-bordered whitespace-nowrap rounded-sm overflow-auto">
              <table class="ti-custom-table ti-custom-table-head edit-table">
                <thead class="bg-gray-100 dark:bg-black/20">
                  <tr class="">
                    <th scope="col" class="dark:text-white/70">ลำดับ

                    </th>
                    <th scope="col" class="text-center dark:text-white/70">รหัสอุปกรณ์ </th>
                    <th scope="col" class="text-center dark:text-white/70">ชื่ออุปกณ์</th>
                    <th scope="col" class="text-center dark:text-white/70">จำนวนสต็อก</th>
                    <th scope="col" class="text-center dark:text-white/70">ประเภท</th>
                    <th scope="col" class="text-center dark:text-white/70">สถานะ</th>
                    <th scope="col" class="text-center dark:text-white/70">วันที่</th>
                    <th scope="col" class="text-center dark:text-white/70">แก้ไข</th>
                </thead>
                <tbody>
                  <!-- <tr *ngFor="let product of productList"> -->
                    <tr *ngFor="let product of productList; let i = index">
                      <td class="text-center">{{ i + 1 }}</td>
                  <!-- </tr> -->
                    <td class="text-center">{{ product.id_product }}</td>
                    <td class="text-center">{{ product.product_name }}</td>
                    <td class="text-center">{{ product.product_amount}}</td>
                    <td class="text-center">{{ product.category}}</td>
                    <td class="text-center">{{product.status}}</td>
                    <td class="text-center">{{product.time_date}}</td>
                    <!-- <td>{{ product.product_balance}}</td> -->

                    <td>
                      <div class="hs-tooltip ti-main-tooltip">
                        <a
                          href="javascript:void(0);"
                          class="ti-btn ti-btn-soft-secondary hs-tooltip-toggle"
                          (click)="addToCart(product)"
                        >
                          <i class="ti ti-shopping-cart"></i>
                          <span
                            class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
                            role="tooltip"
                          >
                            Add to cart
                          </span>
                        </a>
                      </div>
                    <div class="hs-tooltip ti-main-tooltip ">
                      <a [routerLink]="'/ecommerce/edit-product/'"
                         class="ti-btn ti-btn-soft-secondary hs-tooltip-toggle">
                        <i class="ti ti-pencil"></i>
                        <span
                            class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
                            role="tooltip"
                          >
                          Edit
                          </span>
                      </a>
                    </div>
                    <div class="hs-tooltip ti-main-tooltip ">
                      <a aria-label="anchor" routerLink="/ecommerce/product-details"
                        class="hs-tooltip-toggle w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-warning ">
                        <i class="ti ti-eye"></i>
                          <span
                            class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
                            role="tooltip"
                          >
                          view
                          </span>
                      </a>
                    </div>
                      <div class="hs-tooltip ti-main-tooltip">
                        <!-- <a
                          href="javascript:void(0);"
                          class="cart-btn hs-tooltip-toggle w-10 h-10 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger"
                          (click)="deleteProduct(product.product_id)"
                        >
                          <i class="ti ti-trash"></i>
                          <span
                            class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
                            role="tooltip"
                          >
                            Delete
                          </span>
                        </a> -->
                      </div>
                  </td>
                </tbody>
              </table>
            </div>
          <div>
            <nav class="flex justify-end items-center space-x-2 rtl:space-x-reverse mt-5">
              <a class="w-10 h-10 bg-transparent text-gray-500 hover:bg-primary hover:text-white p-2 inline-flex justify-center text-sm font-medium items-center gap-2 rounded-full"
                href="javascript:void(0);">
                <span aria-hidden="true">«</span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="w-10 h-10 bg-primary text-white p-2 inline-flex items-center justify-center text-sm font-medium rounded-full"
                href="javascript:void(0);" aria-current="page">1</a>
              <a class="w-10 h-10 bg-transparent text-gray-500 hover:bg-primary hover:text-white p-2 inline-flex justify-center items-center text-sm font-medium rounded-full"
                href="javascript:void(0);">2</a>
              <a class="w-10 h-10 bg-transparent text-gray-500 hover:bg-primary hover:text-white p-2 inline-flex justify-center items-center text-sm font-medium rounded-full"
                href="javascript:void(0);">3</a>
              <a class="w-10 h-10 bg-transparent text-gray-500 hover:bg-primary hover:text-white p-2 inline-flex justify-center text-sm font-medium items-center gap-2 rounded-full"
                href="javascript:void(0);">
                <span class="sr-only">Next</span>
                <span aria-hidden="true">»</span>
              </a>
            </nav>
          </div>
           <!-- </div> -->
        <!-- End::row-1 -->
