<app-page-header
  title="Course Dashboard"
  title1="Course Dashboard"
  activeitem="Home"
></app-page-header>

<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12 md:col-span-6 xxl:col-span-3">
    <div class="box">
      <div class="box-body relative">
        <a
          aria-label="anchor"
          href="javascript:void(0);"
          class="absolute w-full h-full inset-0"
        ></a>
        <div class="flex items-center">
          <a
            aria-label="anchor"
            href="javascript:void(0);"
            class="ltr:pr-4 rtl:pl-4 block"
          >
            <span class="avatar rounded-sm bg-primary/20 text-primary p-3"
              ><i class="ti ti-wallet text-2xl leading-none"></i
            ></span>
          </a>
          <div class="flex-1 font-semibold">
            <h4 class="text-2xl text-gray-800 dark:text-white font-semibold">
              $98,450
            </h4>
            <div class="flex justify-between items-center">
              <span class="text-gray-500 dark:text-white/70 text-xs"
                >YTD Earning</span
              >
              <span class="text-success text-xs"
                ><i class="ti ti-trending-up text-base ltr:mr-1 rtl:ml-1"></i
                >+2.02%</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xxl:col-span-3">
    <div class="box">
      <div class="box-body relative">
        <a
          aria-label="anchor"
          href="javascript:void(0);"
          class="absolute w-full h-full inset-0"
        ></a>
        <div class="flex items-center">
          <a
            aria-label="anchor"
            href="javascript:void(0);"
            class="ltr:pr-4 rtl:pl-4 block"
          >
            <span class="avatar rounded-sm bg-secondary/20 text-secondary p-3"
              ><i class="ti ti-users text-2xl leading-none"></i
            ></span>
          </a>
          <div class="flex-1 font-semibold">
            <h4 class="text-2xl text-gray-800 dark:text-white font-semibold">
              15,379
            </h4>
            <div class="flex justify-between items-center">
              <span class="text-gray-500 dark:text-white/70 text-xs"
                >Total Students</span
              >
              <span class="text-danger text-xs"
                ><i class="ti ti-trending-down text-base ltr:mr-1 rtl:ml-1"></i
                >+2.02%</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xxl:col-span-3">
    <div class="box">
      <div class="box-body relative">
        <a
          aria-label="anchor"
          href="javascript:void(0);"
          class="absolute w-full h-full inset-0"
        ></a>
        <div class="flex items-center">
          <a
            aria-label="anchor"
            href="javascript:void(0);"
            class="ltr:pr-4 rtl:pl-4 block"
          >
            <span class="avatar rounded-sm bg-warning/20 text-warning p-3"
              ><i class="ti ti-id text-2xl leading-none"></i
            ></span>
          </a>
          <div class="flex-1 font-semibold">
            <h4 class="text-2xl text-gray-800 dark:text-white font-semibold">
              377
            </h4>
            <div class="flex justify-between items-center">
              <span class="text-gray-500 dark:text-white/70 text-xs"
                >Total Instructors</span
              >
              <span class="text-danger text-xs"
                ><i class="ti ti-trending-down text-base ltr:mr-1 rtl:ml-1"></i
                >+2.02%</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 md:col-span-6 xxl:col-span-3">
    <div class="box">
      <div class="box-body relative">
        <a
          aria-label="anchor"
          href="javascript:void(0);"
          class="absolute w-full h-full inset-0"
        ></a>
        <div class="flex items-center">
          <a
            aria-label="anchor"
            href="javascript:void(0);"
            class="ltr:pr-4 rtl:pl-4 block"
          >
            <span class="avatar rounded-sm bg-danger/20 text-danger p-3"
              ><i class="ti ti-gift text-2xl leading-none"></i
            ></span>
          </a>
          <div class="flex-1 font-semibold">
            <h4 class="text-2xl text-gray-800 dark:text-white font-semibold">
              11,016
            </h4>
            <div class="flex justify-between items-center">
              <span class="text-gray-500 dark:text-white/70 text-xs"
                >Total Courses</span
              >
              <span class="text-success text-xs"
                ><i class="ti ti-trending-up text-base ltr:mr-1 rtl:ml-1"></i
                >+2.02%</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-1 -->

<!-- Start::row-2 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12 xl:col-span-7">
    <div class="box">
      <div class="box-header">
        <div class="sm:flex justify-between">
          <h5 class="box-title my-auto">Earnings Report</h5>
          <div class="inline-flex rounded-md shadow-sm">
            <button
              type="button"
              class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
            >
              1D
            </button>
            <button
              type="button"
              class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
            >
              1W
            </button>
            <button
              type="button"
              class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
            >
              1M
            </button>
            <button
              type="button"
              class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
            >
              3M
            </button>
            <button
              type="button"
              class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary"
            >
              6M
            </button>
            <button
              type="button"
              class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-primary"
            >
              1Y
            </button>
          </div>
        </div>
      </div>
      <div class="box-body">
        <div id="earningsReport">
          <apx-chart
            [series]="chartOptions.series"
            [chart]="chartOptions.chart"
            [yaxis]="chartOptions.yaxis"
            [xaxis]="chartOptions.xaxis"
            [labels]="chartOptions.labels"
            [stroke]="chartOptions.stroke"
            [title]="chartOptions.title"
            [dataLabels]="chartOptions.dataLabels"
            [fill]="chartOptions.fill"
            [tooltip]="chartOptions.tooltip"
            [plotOptions]="chartOptions.plotOptions"
          ></apx-chart>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 xl:col-span-5">
    <div class="box">
      <div class="box-header flex">
        <h5 class="box-title my-auto">New Students</h5>
        <div class="block ltr:ml-auto rtl:mr-auto my-auto">
          <button
            type="button"
            class="ti-btn m-0 rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
          >
            View All
          </button>
        </div>
      </div>
      <div class="box-body p-0">
        <div class="overflow-auto">
          <table class="ti-custom-table ti-custom-table-head">
            <thead>
              <tr>
                <th scope="col" class="text-center !p-[0.65rem]">Name</th>
                <th scope="col" class="!p-[0.65rem]">Courses</th>
                <th scope="col" class="!p-[0.65rem]">Completed</th>
                <th scope="col" class="!p-[0.65rem]">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let student of Students">
                <td class="!p-[0.65rem]">
                  <div class="flex items-center min-w-[200px]">
                    <div class="ltr:mr-2 rtl:ml-2 leading-none">
                      <img
                        src="{{ student.src }}"
                        alt=""
                        class="avatar avatar-xs rounded-full bg-gray-100 dark:bg-black/20"
                      />
                    </div>
                    <div class="items-center">
                      <p class="text-sm mb-0 text-gray-800 dark:text-white">
                        {{ student.name }}
                      </p>
                      <span class="text-xs text-gray-500 dark:text-white/70">{{
                        student.mail
                      }}</span>
                    </div>
                  </div>
                </td>
                <td class="!p-[0.65rem] text-center">{{ student.courses }}</td>
                <td class="!p-[0.65rem] text-center">
                  {{ student.completed }}
                </td>
                <td
                  class="font-medium space-x-2 rtl:space-x-reverse !p-[0.65rem]"
                >
                  <div class="hs-tooltip ti-main-tooltip">
                    <a
                      href="javascript:void(0);"
                      class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary"
                    >
                      <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="customer-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary"
                    >
                      <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
                      href="javascript:void(0);"
                      class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger"
                      (click)="click(student.courses)"
                    >
                      <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>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-2 -->

<!-- Start::row-3 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12 xxl:col-span-3">
    <div class="box">
      <div class="box-header">
        <div class="flex justify-between">
          <h5 class="box-title my-auto">Top Instructors</h5>
          <div class="block ltr:ml-auto rtl:mr-auto my-auto">
            <button
              type="button"
              class="ti-btn m-0 rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
            >
              View All
            </button>
          </div>
        </div>
      </div>
      <div class="box-body">
        <ul class="flex flex-col">
          <li
            class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <div class="leading-none">
                  <img
                    class="avatar avatar-sm rounded-full"
                    src="./assets/img/users/2.jpg"
                    alt="image"
                  />
                </div>
                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                  <p class="text-sm font-semibold mb-0">John Hny</p>
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal"
                  >
                    M.tech
                  </p>
                </div>
                <div class="block text-end">
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >321 Courses</span
                  >
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 !font-normal"
                  >
                    Digital Marketing
                  </p>
                </div>
              </div>
            </a>
          </li>
          <li
            class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <div class="leading-none">
                  <img
                    class="avatar avatar-sm rounded-full"
                    src="./assets/img/users/12.jpg"
                    alt="image"
                  />
                </div>
                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                  <p class="text-sm font-semibold mb-0">Mortal Yun</p>
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal"
                  >
                    Phd
                  </p>
                </div>
                <div class="block text-end">
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >25 Courses</span
                  >
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 !font-normal"
                  >
                    Stocks &amp; Trading
                  </p>
                </div>
              </div>
            </a>
          </li>
          <li
            class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <div class="leading-none">
                  <img
                    class="avatar avatar-sm rounded-full"
                    src="./assets/img/users/13.jpg"
                    alt="image"
                  />
                </div>
                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                  <p class="text-sm font-semibold mb-0">Trex Con</p>
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal"
                  >
                    MBBS
                  </p>
                </div>
                <div class="block text-end">
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >39 Courses</span
                  >
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 !font-normal"
                  >
                    Science
                  </p>
                </div>
              </div>
            </a>
          </li>
          <li
            class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <div class="leading-none">
                  <img
                    class="avatar avatar-sm rounded-full"
                    src="./assets/img/users/3.jpg"
                    alt="image"
                  />
                </div>
                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                  <p class="text-sm font-semibold mb-0">Saiu Sarah</p>
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal"
                  >
                    Phd
                  </p>
                </div>
                <div class="block text-end">
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >11 Courses</span
                  >
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 !font-normal"
                  >
                    Science
                  </p>
                </div>
              </div>
            </a>
          </li>
          <li
            class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <div class="leading-none">
                  <img
                    class="avatar avatar-sm rounded-full"
                    src="./assets/img/users/4.jpg"
                    alt="image"
                  />
                </div>
                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                  <p class="text-sm font-semibold mb-0">Ion Hao</p>
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal"
                  >
                    M.tech
                  </p>
                </div>
                <div class="block text-end">
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >124 Courses</span
                  >
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 !font-normal"
                  >
                    Web Development
                  </p>
                </div>
              </div>
            </a>
          </li>
          <li
            class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <div class="leading-none">
                  <img
                    class="avatar avatar-sm rounded-full"
                    src="./assets/img/users/14.jpg"
                    alt="image"
                  />
                </div>
                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                  <p class="text-sm font-semibold mb-0">Roman Killon</p>
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal"
                  >
                    M.tech
                  </p>
                </div>
                <div class="block text-end">
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >163 Courses</span
                  >
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 !font-normal"
                  >
                    Ui / Ux Designing
                  </p>
                </div>
              </div>
            </a>
          </li>
          <li
            class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <div class="leading-none">
                  <img
                    class="avatar avatar-sm rounded-full"
                    src="./assets/img/users/5.jpg"
                    alt="image"
                  />
                </div>
                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                  <p class="text-sm font-semibold mb-0">Suzika Stallone</p>
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal"
                  >
                    Phd
                  </p>
                </div>
                <div class="block text-end">
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >110 Courses</span
                  >
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 !font-normal"
                  >
                    Machine Leadning
                  </p>
                </div>
              </div>
            </a>
          </li>
          <li
            class="p-0 mb-0 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <div class="leading-none">
                  <img
                    class="avatar avatar-sm rounded-full"
                    src="./assets/img/users/15.jpg"
                    alt="image"
                  />
                </div>
                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                  <p class="text-sm font-semibold mb-0">Robert Lewis</p>
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal"
                  >
                    Phd
                  </p>
                </div>
                <div class="block text-end">
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >150 Courses</span
                  >
                  <p
                    class="text-xs text-gray-500 dark:text-white/70 !font-normal"
                  >
                    Java Development
                  </p>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-span-12 xxl:col-span-6">
    <div class="box">
      <div class="box-header">
        <div class="flex justify-between">
          <h5 class="box-title my-auto">Popular Courses</h5>
          <div class="block ltr:ml-auto rtl:mr-auto my-auto">
            <button
              type="button"
              class="ti-btn m-0 rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
            >
              View All
            </button>
          </div>
        </div>
      </div>
      <div class="box-body">
        <ul class="flex flex-col">
          <li
            class="mb-6 !rounded-sm ti-list-group text-gray-800 dark:text-white w-full"
          >
            <div class="sm:flex items-center w-full">
              <a
                href="javascript:void(0);"
                class="ltr:pr-4 rtl:pl-4 inline-block"
              >
                <img
                  src="./assets/img/media/1.jpg"
                  alt="img"
                  class="avatar w-28 h-28 rounded-sm"
                />
              </a>
              <div class="mt-4 sm:mt-0 flex-1 font-semibold">
                <a
                  href="javascript:void(0);"
                  class="text-gray-500 dark:text-white/70 block mb-1 font-medium text-xs"
                  title="Category"
                  ><i class="ri-price-tag-3-line text-xs"></i>&nbsp;UI/UX</a
                >
                <a
                  href="javascript:void(0);"
                  class="block mb-3 text-sm font-semibold"
                  >CSS Zero to Hero Class-11: What are Pseudo Classes In CSS?
                  How To Write Pseudo Classes?</a
                >
                <div class="sm:flex justify-between items-center">
                  <div class="flex items-center" title="Instructor">
                    <a href="javascript:void(0);" class="ltr:pr-2 rtl:pl-2">
                      <img
                        src="./assets/img/users/3.jpg"
                        alt="img"
                        class="avatar avatar-xs rounded-full"
                      />
                    </a>
                    <a
                      href="javascript:void(0);"
                      class="flex-1 text-gray-500 dark:text-white/70"
                      >Natasha Sil</a
                    >
                  </div>
                  <div
                    class="min-w-fit text-xs text-gray-500 dark:text-white/70 inline-flex"
                  >
                    <span class="ltr:mr-2 rtl:ml-2 my-auto">2,189 Views</span>
                    <span
                      ><i class="ri-star-fill text-warning"></i
                      >&nbsp;(4.2)</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li
            class="mb-6 !rounded-sm ti-list-group text-gray-800 dark:text-white w-full"
          >
            <div class="sm:flex items-center w-full">
              <a
                href="javascript:void(0);"
                class="ltr:pr-4 rtl:pl-4 inline-block"
              >
                <img
                  src="./assets/img/media/4.jpg"
                  alt="img"
                  class="avatar w-28 h-28 rounded-sm"
                />
              </a>
              <div class="mt-4 sm:mt-0 flex-1 font-semibold">
                <a
                  href="javascript:void(0);"
                  class="text-gray-500 dark:text-white/70 block mb-1 font-medium text-xs"
                  title="Category"
                  ><i class="ri-price-tag-3-line text-xs"></i>&nbsp;
                  Marketing</a
                >
                <a
                  href="javascript:void(0);"
                  class="block mb-3 text-sm font-semibold"
                  >Marketing Class-27: What Is Marketing? How Marketing Helpful
                  To Business? Basic Introduction To Marketing.</a
                >
                <div class="sm:flex justify-between items-center">
                  <div class="flex items-center" title="Instructor">
                    <a href="javascript:void(0);" class="ltr:pr-2 rtl:pl-2">
                      <img
                        src="./assets/img/users/4.jpg"
                        alt="img"
                        class="avatar avatar-xs rounded-full"
                      />
                    </a>
                    <a
                      href="javascript:void(0);"
                      class="flex-1 text-gray-500 dark:text-white/70"
                      >Mosh Nah</a
                    >
                  </div>
                  <div
                    class="min-w-fit text-xs text-gray-500 dark:text-white/70 inline-flex"
                  >
                    <span class="ltr:mr-2 rtl:ml-2 my-auto">1,116 Views</span>
                    <span
                      ><i class="ri-star-fill text-warning"></i
                      >&nbsp;(4.5)</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li
            class="mb-0 !rounded-sm ti-list-group text-gray-800 dark:text-white w-full"
          >
            <div class="sm:flex items-center w-full">
              <a
                href="javascript:void(0);"
                class="ltr:pr-4 rtl:pl-4 inline-block"
              >
                <img
                  src="./assets/img/media/23.jpg"
                  alt="img"
                  class="avatar w-28 h-28 rounded-sm"
                />
              </a>
              <div class="mt-4 sm:mt-0 flex-1 font-semibold">
                <a
                  href="javascript:void(0);"
                  class="text-gray-500 dark:text-white/70 block mb-1 font-medium text-xs"
                  title="Category"
                  ><i class="ri-price-tag-3-line text-xs"></i>&nbsp;
                  Programming</a
                >
                <a
                  href="javascript:void(0);"
                  class="block mb-3 text-sm font-semibold"
                  >Learn Python-16: What Is The Difference Between Shallow Copy
                  and Deep Copy? Implementing Deep Copy In Python.</a
                >
                <div class="sm:flex justify-between items-center">
                  <div class="flex items-center" title="Instructor">
                    <a href="javascript:void(0);" class="ltr:pr-2 rtl:pl-2">
                      <img
                        src="./assets/img/users/12.jpg"
                        alt="img"
                        class="avatar avatar-xs rounded-full"
                      />
                    </a>
                    <a
                      href="javascript:void(0);"
                      class="flex-1 text-gray-500 dark:text-white/70"
                      >Telsko Navin</a
                    >
                  </div>
                  <div
                    class="min-w-fit text-xs text-gray-500 dark:text-white/70 inline-flex"
                  >
                    <span class="ltr:mr-2 rtl:ml-2 my-auto">2,125 Views</span>
                    <span
                      ><i class="ri-star-fill text-warning"></i
                      >&nbsp;(4.8)</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-span-12 xxl:col-span-3">
    <div class="box">
      <div class="box-header">
        <div class="flex justify-between">
          <h5 class="box-title my-auto">Top Categories</h5>
          <div class="block ltr:ml-auto rtl:mr-auto my-auto">
            <button
              type="button"
              class="ti-btn m-0 rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
            >
              View All
            </button>
          </div>
        </div>
      </div>
      <div class="box-body">
        <ul class="flex flex-col">
          <li
            class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <span class="avatar rounded-sm bg-primary/20 text-primary p-3"
                  ><i class="ri-dashboard-line text-2xl leading-none"></i
                ></span>
                <div class="flex-auto ltr:ml-3 rtl:mr-3">
                  <p class="text-sm font-semibold mb-0">UI / UX Design</p>
                  <p class="text-xs text-gray-500 dark:text-white/70 mb-0">
                    10,000 + Courses
                  </p>
                </div>
                <div>
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >$199.99</span
                  >
                </div>
              </div>
            </a>
          </li>
          <li
            class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <span
                  class="avatar rounded-sm bg-secondary/20 text-secondary p-3"
                  ><i class="ri-advertisement-line text-2xl leading-none"></i
                ></span>
                <div class="flex-auto ltr:ml-3 rtl:mr-3">
                  <p class="text-sm font-semibold mb-0">Digital Marketing</p>
                  <p class="text-xs text-gray-500 dark:text-white/70 mb-0">
                    90 + Courses
                  </p>
                </div>
                <div>
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >$599.99</span
                  >
                </div>
              </div>
            </a>
          </li>
          <li
            class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <span class="avatar rounded-sm bg-success/20 text-success p-3"
                  ><i class="ri-code-box-line text-2xl leading-none"></i
                ></span>
                <div class="flex-auto ltr:ml-3 rtl:mr-3">
                  <p class="text-sm font-semibold mb-0">Web Development</p>
                  <p class="text-xs text-gray-500 dark:text-white/70 mb-0">
                    250 + Courses
                  </p>
                </div>
                <div>
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >$299.99</span
                  >
                </div>
              </div>
            </a>
          </li>
          <li
            class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <span class="avatar rounded-sm bg-warning/20 text-warning p-3"
                  ><i class="ri-bar-chart-2-line text-2xl leading-none"></i
                ></span>
                <div class="flex-auto ltr:ml-3 rtl:mr-3">
                  <p class="text-sm font-semibold mb-0">Stocks &amp; Trading</p>
                  <p class="text-xs text-gray-500 dark:text-white/70 mb-0">
                    100 + Courses
                  </p>
                </div>
                <div>
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >$999.99</span
                  >
                </div>
              </div>
            </a>
          </li>
          <li
            class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <span class="avatar rounded-sm bg-danger/20 text-danger p-3"
                  ><i class="ri-angularjs-line text-2xl leading-none"></i
                ></span>
                <div class="flex-auto ltr:ml-3 rtl:mr-3">
                  <p class="text-sm font-semibold mb-0">Angular Course</p>
                  <p class="text-xs text-gray-500 dark:text-white/70 mb-0">
                    300 + Courses
                  </p>
                </div>
                <div>
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >$399.99</span
                  >
                </div>
              </div>
            </a>
          </li>
          <li
            class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <span class="avatar rounded-sm bg-info/20 text-info p-3"
                  ><i class="ri-reactjs-line text-2xl leading-none"></i
                ></span>
                <div class="flex-auto ltr:ml-3 rtl:mr-3">
                  <p class="text-sm font-semibold mb-0">React Course</p>
                  <p class="text-xs text-gray-500 dark:text-white/70 mb-0">
                    150 + Courses
                  </p>
                </div>
                <div>
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >$599.99</span
                  >
                </div>
              </div>
            </a>
          </li>
          <li
            class="p-0 mb-0 ti-list-group border-0 text-gray-800 dark:text-white"
          >
            <a href="javascript:void(0);" class="w-full">
              <div class="flex items-center">
                <span class="avatar rounded-sm bg-pink-500/20 text-pink-500 p-3"
                  ><i class="ri-database-2-line text-2xl leading-none"></i
                ></span>
                <div class="flex-auto ltr:ml-3 rtl:mr-3">
                  <p class="text-sm font-semibold mb-0">Full Stack Course</p>
                  <p class="text-xs text-gray-500 dark:text-white/70 mb-0">
                    500 + Courses
                  </p>
                </div>
                <div>
                  <span
                    class="text-sm text-gray-800 dark:text-white font-semibold"
                    >$199.99</span
                  >
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- End::row-3 -->

<!-- Start::row-4 -->
<div class="grid grid-cols-12 gap-x-5">
  <div class="col-span-12">
    <div class="box">
      <div class="box-header">
        <div class="flex">
          <h5 class="box-title my-auto">Course List</h5>
          <div
            class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
          >
            <button
              type="button"
              class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
            >
              View All <i class="ti ti-chevron-down"></i>
            </button>
            <div class="hs-dropdown-menu ti-dropdown-menu hidden">
              <a class="ti-dropdown-item" href="javascript:void(0)">Download</a>
              <a class="ti-dropdown-item" href="javascript:void(0)">Import</a>
              <a class="ti-dropdown-item" href="javascript:void(0)">Export</a>
            </div>
          </div>
        </div>
      </div>
      <div class="box-body">
        <div
          class="table-bordered rounded-sm ti-custom-table-head overflow-auto"
        >
          <table class="ti-custom-table ti-custom-table-head whitespace-nowrap">
            <thead class="bg-gray-50 dark:bg-black/20">
              <tr class="">
                <th scope="col" class="dark:text-white/80">S.no</th>
                <th scope="col" class="dark:text-white/80">Course</th>
                <th scope="col" class="dark:text-white/80">Category</th>
                <th scope="col" class="dark:text-white/80">Classes</th>
                <th scope="col" class="dark:text-white/80">Last Updated</th>
                <th scope="col" class="dark:text-white/80">Instructor</th>
                <th scope="col" class="dark:text-white/80">Students</th>
                <th scope="col" class="dark:text-white/80">Actions</th>
              </tr>
            </thead>
            <tbody class="">
              <tr class="" *ngFor="let course of Courses">
                <td>{{ course.id }}</td>
                <td>
                  <div class="flex space-x-3 rtl:space-x-reverse text-start">
                    <img
                      class="avatar avatar-sm rounded-sm"
                      src="{{ course.src }}"
                      alt="Image Description"
                    />
                    <div class="block my-auto">
                      <p
                        class="block text-sm font-semibold my-auto text-gray-800 dark:text-white min-w-[400px]"
                      >
                        {{ course.text }}
                      </p>
                    </div>
                  </div>
                </td>
                <td>{{ course.category }}</td>
                <td>{{ course.classes }}</td>
                <td>{{ course.date }}</td>
                <td>{{ course.instructor }}</td>
                <td>{{ course.students }}</td>
                <td class="font-medium space-x-2 rtl:space-x-reverse">
                  <div class="hs-tooltip ti-main-tooltip">
                    <a
                      href="javascript:void(0);"
                      class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary"
                    >
                      <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 hidden"
                        role="tooltip"
                        data-popper-placement="top"
                        style="
                          position: fixed;
                          inset: auto auto 0px 0px;
                          margin: 0px;
                          transform: translate(1686px, -243px);
                        "
                      >
                        View
                      </span>
                    </a>
                  </div>
                  <div class="hs-tooltip ti-main-tooltip">
                    <a
                      href="javascript:void(0);"
                      class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary"
                    >
                      <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 hidden"
                        role="tooltip"
                        data-popper-placement="top"
                        style="
                          position: fixed;
                          inset: auto auto 0px 0px;
                          margin: 0px;
                          transform: translate(1686px, -243px);
                        "
                      >
                        Edit
                      </span>
                    </a>
                  </div>
                  <div class="hs-tooltip ti-main-tooltip">
                    <a
                      href="javascript:void(0);"
                      class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger"
                      (click)="click1(course.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>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="box-footer">
        <div class="sm:flex items-center">
          <div class="">
            showing 5 Entries
            <i class="ri-arrow-right-line ml-2 font-semibold"></i>
          </div>
          <div class="ltr:ml-auto rtl:mr-auto">
            <nav
              class="flex justify-center items-center space-x-2 rtl:space-x-reverse"
            >
              <a
                class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm"
                href="javascript:void(0);"
              >
                <span aria-hidden="true">Prev</span>
                <span class="sr-only">Previous</span>
              </a>
              <a
                class="bg-primary text-white py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
                href="javascript:void(0);"
                aria-current="page"
                >1</a
              >
              <a
                class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
                href="javascript:void(0);"
                >2</a
              >
              <a
                class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
                href="javascript:void(0);"
                >3</a
              >
              <a
                class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm"
                href="javascript:void(0);"
              >
                <span class="sr-only">Next</span>
                <span aria-hidden="true">Next</span>
              </a>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-4 -->