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

<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-x-6">
  <div class="col-span-12 xxl:col-span-9">
    <div class="grid grid-cols-12 gap-x-6">
      <div class="col-span-12 md:col-span-4">
        <div class="box">
          <div class="box-body">
            <div class="flex items-start">
              <div class="ltr:mr-4 rtl:ml-4">
                <span
                  class="avatar bg-primary/20 text-primary text-2xl p-3 rounded-sm"
                  ><i class="ri-flag-2-line leading-none"></i
                ></span>
              </div>
              <div class="flex-1">
                <div class="font-medium text-sm mb-1">Total Sessions</div>
                <div class="flex flex-wrap items-center justify-between mb-1">
                  <h5 class="text-xl font-bold text-gray-800 dark:text-white">
                    1,289
                  </h5>
                  <span class="badge bg-success/20 text-success rounded-sm py-1"
                    >+12.2%</span
                  >
                </div>
                <p class="text-gray-500 dark:text-white/70 mb-0 text-xs">
                  since last 2 months
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 md:col-span-4">
        <div class="box">
          <div class="box-body">
            <div class="flex items-start">
              <div class="ltr:mr-4 rtl:ml-4">
                <span
                  class="avatar bg-secondary/20 text-secondary text-2xl p-3 rounded-sm"
                  ><i class="ri-share-circle-line leading-none"></i
                ></span>
              </div>
              <div class="flex-1">
                <div class="font-medium text-sm mb-1">Bounce Rate</div>
                <div class="flex flex-wrap items-center justify-between mb-1">
                  <h5 class="text-xl font-bold text-gray-800 dark:text-white">
                    19.8%
                  </h5>
                  <span class="badge bg-danger/20 text-danger rounded-sm py-1"
                    >-2.6%</span
                  >
                </div>
                <p class="text-gray-500 dark:text-white/70 mb-0 text-xs">
                  since last 2 months
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 md:col-span-4">
        <div class="box">
          <div class="box-body">
            <div class="flex items-start">
              <div class="ltr:mr-4 rtl:ml-4">
                <span
                  class="avatar bg-danger/20 text-danger text-2xl p-3 rounded-sm"
                  ><i class="ri-eye-line leading-none"></i
                ></span>
              </div>
              <div class="flex-1">
                <div class="font-medium text-sm mb-1">Page Views</div>
                <div class="flex flex-wrap items-center justify-between mb-1">
                  <h5 class="text-xl font-bold text-gray-800 dark:text-white">
                    15,250
                  </h5>
                  <span class="badge bg-success/20 text-success rounded-sm py-1"
                    >+35.6%</span
                  >
                </div>
                <p class="text-gray-500 dark:text-white/70 mb-0 text-xs">
                  since last 2 months
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 lg:col-span-8">
        <div class="box">
          <div class="box-header">
            <div class="flex justify-between">
              <h5 class="box-title my-auto">Session Overview</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"
                >
                  This year <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)"
                    >Today</a
                  >
                  <a class="ti-dropdown-item" href="javascript:void(0)"
                    >This Week</a
                  >
                  <a class="ti-dropdown-item" href="javascript:void(0)"
                    >This Month</a
                  >
                  <a class="ti-dropdown-item" href="javascript:void(0)"
                    >This Year</a
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="box-body">
            <div id="audienceReport">
              <apx-chart
                [series]="chartOptions4.series"
                [chart]="chartOptions4.chart"
                [xaxis]="chartOptions4.xaxis"
                [stroke]="chartOptions4.stroke"
                [tooltip]="chartOptions4.tooltip"
                [dataLabels]="chartOptions4.dataLabels"
                [markers]="chartOptions4.markers"
                [grid]="chartOptions4.grid"
                [yaxis]="chartOptions4.yaxis"
                [plotOptions]="chartOptions4.plotOptions"
              ></apx-chart>
            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 lg:col-span-4">
        <div class="box">
          <div class="box-header">
            <div class="flex justify-between">
              <h5 class="box-title my-auto">Visitors By Countries</h5>
              <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">
            <ul class="flex flex-col">
              <li
                class="p-0 mb-4 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="avatar avatar-xs rounded-sm">
                      <img src="./assets/img/flags/10.png" alt="" />
                    </div>
                    <div class="ltr:ml-3 rtl:mr-3 flex-auto">
                      <span class="text-sm">United States</span>
                    </div>
                    <div>
                      <span
                        class="badge rounded-sm bg-gray-100 text-gray-500 dark:bg-black/20 dark:text-white"
                        >32,190</span
                      >
                    </div>
                  </div>
                </a>
              </li>
              <li
                class="p-0 mb-4 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="avatar avatar-xs rounded-sm">
                      <img src="./assets/img/flags/1.png" alt="" />
                    </div>
                    <div class="ltr:ml-3 rtl:mr-3 flex-auto">
                      <span class="text-sm">Argentina</span>
                    </div>
                    <div>
                      <span
                        class="badge rounded-sm bg-gray-100 text-gray-500 dark:bg-black/20 dark:text-white"
                        >17,578</span
                      >
                    </div>
                  </div>
                </a>
              </li>
              <li
                class="p-0 mb-4 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="">
                      <img
                        src="./assets/img/flags/4.png"
                        alt=""
                        class="avatar avatar-xs rounded-sm"
                      />
                    </div>
                    <div class="ltr:ml-3 rtl:mr-3 flex-auto">
                      <span class="text-sm">Germany</span>
                    </div>
                    <div>
                      <span
                        class="badge rounded-sm bg-gray-100 text-gray-500 dark:bg-black/20 dark:text-white"
                        >8,798</span
                      >
                    </div>
                  </div>
                </a>
              </li>
              <li
                class="p-0 mb-4 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="">
                      <img
                        src="./assets/img/flags/5.png"
                        alt=""
                        class="avatar avatar-xs rounded-sm"
                      />
                    </div>
                    <div class="ltr:ml-3 rtl:mr-3 flex-auto">
                      <span class="text-sm">Mexico</span>
                    </div>
                    <div>
                      <span
                        class="badge rounded-sm bg-gray-100 text-gray-500 dark:bg-black/20 dark:text-white"
                        >16,885</span
                      >
                    </div>
                  </div>
                </a>
              </li>
              <li
                class="p-0 mb-4 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="">
                      <img
                        src="./assets/img/flags/7.png"
                        alt=""
                        class="avatar avatar-xs rounded-sm"
                      />
                    </div>
                    <div class="ltr:ml-3 rtl:mr-3 flex-auto">
                      <span class="text-sm">Russia</span>
                    </div>
                    <div>
                      <span
                        class="badge rounded-sm bg-gray-100 text-gray-500 dark:bg-black/20 dark:text-white"
                        >10,118</span
                      >
                    </div>
                  </div>
                </a>
              </li>
              <li
                class="p-0 mb-4 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="">
                      <img
                        src="./assets/img/flags/2.png"
                        alt=""
                        class="avatar avatar-xs rounded-sm"
                      />
                    </div>
                    <div class="ltr:ml-3 rtl:mr-3 flex-auto">
                      <span class="text-sm">Cannada</span>
                    </div>
                    <div>
                      <span
                        class="badge rounded-sm bg-gray-100 text-gray-500 dark:bg-black/20 dark:text-white"
                        >1,678</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">
                    <div class="">
                      <img
                        src="./assets/img/flags/6.png"
                        alt=""
                        class="avatar avatar-xs rounded-sm"
                      />
                    </div>
                    <div class="ltr:ml-3 rtl:mr-3 flex-auto">
                      <span class="text-sm">Malaysia</span>
                    </div>
                    <div>
                      <span
                        class="badge rounded-sm bg-gray-100 text-gray-500 dark:bg-black/20 dark:text-white"
                        >6,578</span
                      >
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 xxl:col-span-3">
    <div class="box overflow-hidden">
      <div class="box-body">
        <div class="flex mb-4">
          <h5 class="box-title my-auto">Active Users</h5>
          <div
            class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
          >
            <button
              type="button"
              aria-label="button"
              class="hs-dropdown-toggle ti-dropdown-toggle text-gray-500 dark:text-white/70 p-0 border-0 shadow-none"
            >
              <i class="text-sm leading-none ti ti-dots-vertical"></i>
            </button>
            <div class="hs-dropdown-menu ti-dropdown-menu">
              <a class="ti-dropdown-item" href="javascript:void(0)">Action</a>
              <a class="ti-dropdown-item" href="javascript:void(0)"
                >Another Acttion</a
              >
              <a class="ti-dropdown-item" href="javascript:void(0)"
                >Something Else Here</a
              >
            </div>
          </div>
        </div>
        <div class="flex">
          <div class="ltr:mr-2 rtl:ml-2 my-auto">
            <span class="avatar rounded-full bg-primary text-white text-xl p-3"
              ><i class="ri-pulse-line leading-none"></i
            ></span>
          </div>
          <div class="flex-1">
            <p class="text-2xl text-gray-800 dark:text-white font-medium">
              12,890<span class="text-success text-xs ltr:ml-2 rtl:mr-2"
                ><i class="ri-arrow-right-up-line text-xs"></i>10.5%</span
              >
            </p>
            <p class="mb-0 text-xs text-gray-500 dark:text-white/70">
              Currently active now
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box-header">
        <div class="flex justify-between">
          <h5 class="box-title my-auto">Device views</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"
            >
              This year <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)">Today</a>
              <a class="ti-dropdown-item" href="javascript:void(0)"
                >This Week</a
              >
              <a class="ti-dropdown-item" href="javascript:void(0)"
                >This Month</a
              >
              <a class="ti-dropdown-item" href="javascript:void(0)"
                >This Year</a
              >
            </div>
          </div>
        </div>
      </div>
      <div class="box-body">
        <div id="sessions">
          <apx-chart
            [series]="chartOptions.series"
            [chart]="chartOptions.chart"
            [labels]="chartOptions.labels"
            [legend]="chartOptions.legend"
            [colors]="chartOptions.colors"
            [responsive]="chartOptions.responsive"
            [dataLabels]="chartOptions.dataLabels"
          ></apx-chart>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-1 -->

<!-- Start::row-2 -->
<div class="grid grid-cols-12 gap-x-6">
  <div class="col-span-12 xxl:col-span-4">
    <div class="box">
      <div class="box-header">
        <div class="flex">
          <h5 class="box-title my-auto">Sessions By Gender</h5>
          <div
            class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
          >
            <button
              type="button"
              aria-label="button"
              class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100 focus:ring-gray-200 dark:bg-black/20 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"
            >
              <i class="text-sm leading-none ti ti-dots-vertical"></i>
            </button>
            <div class="hs-dropdown-menu ti-dropdown-menu">
              <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 id="session2" class="flex justify-center">
          <apx-chart
            [series]="chartOptions1.series"
            [chart]="chartOptions1.chart"
            [labels]="chartOptions1.labels"
            [colors]="chartOptions1.colors"
            [fill]="chartOptions1.fill"
            [legend]="chartOptions1.legend"
            [stroke]="chartOptions1.stroke"
            [responsive]="chartOptions1.responsive"
          ></apx-chart>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 xxl:col-span-4">
    <div class="box">
      <div class="box-header">
        <div class="flex">
          <h5 class="box-title my-auto">Traffic Sources</h5>
          <div
            class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
          >
            <button
              type="button"
              aria-label="button"
              class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100 focus:ring-gray-200 dark:bg-black/20 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"
            >
              <i class="text-sm leading-none ti ti-dots-vertical"></i>
            </button>
            <div class="hs-dropdown-menu ti-dropdown-menu">
              <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 p-0">
        <div class="overflow-auto">
          <table class="ti-custom-table ti-custom-table-head">
            <thead>
              <tr>
                <th scope="col">Browser</th>
                <th scope="col">Sessions</th>
                <th scope="col">Traffic</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="">
                  <div class="flex items-center">
                    <div class="ltr:mr-2 rtl:ml-2">
                      <span
                        class="avatar avatar-xs rounded-sm bg-primary/20 text-primary p-1.5"
                        ><i class="ri-chrome-line text-xl leading-none"></i
                      ></span>
                    </div>
                    <p class="mb-0">Chrome</p>
                  </div>
                </td>
                <td class="">
                  20,937<i
                    class="ri-arrow-up-s-fill ltr:ml-2 rtl:mr-2 text-base text-success my-auto"
                  ></i>
                </td>
                <td class="">
                  <div
                    class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20"
                  >
                    <div
                      class="ti-main-progress-bar bg-primary text-xs text-white text-center"
                      role="progressbar"
                      style="width: 80%"
                      aria-valuenow="80"
                      aria-valuemin="0"
                      aria-valuemax="100"
                    ></div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="">
                  <div class="flex items-center">
                    <div class="ltr:mr-2 rtl:ml-2">
                      <span
                        class="avatar avatar-xs rounded-sm bg-secondary/20 text-secondary p-1.5"
                        ><i class="ri-safari-line text-xl leading-none"></i
                      ></span>
                    </div>
                    <p class="mb-0">Safari</p>
                  </div>
                </td>
                <td class="">
                  23,379<i
                    class="ri-arrow-up-s-fill ltr:ml-2 rtl:mr-2 text-base text-success my-auto"
                  ></i>
                </td>
                <td class="">
                  <div
                    class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20"
                  >
                    <div
                      class="ti-main-progress-bar bg-secondary text-xs text-white text-center"
                      role="progressbar"
                      style="width: 40%"
                      aria-valuenow="40"
                      aria-valuemin="0"
                      aria-valuemax="100"
                    ></div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="">
                  <div class="flex items-center">
                    <div class="ltr:mr-2 rtl:ml-2">
                      <span
                        class="avatar avatar-xs rounded-sm bg-danger/20 text-danger p-1.5"
                        ><i class="ri-opera-line text-xl leading-none"></i
                      ></span>
                    </div>
                    <p class="mb-0">Opera</p>
                  </div>
                </td>
                <td class="">
                  20,582<i
                    class="ri-arrow-down-s-fill ltr:ml-2 rtl:mr-2 text-base text-danger my-auto"
                  ></i>
                </td>
                <td class="">
                  <div
                    class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20"
                  >
                    <div
                      class="ti-main-progress-bar bg-danger text-xs text-white text-center"
                      role="progressbar"
                      style="width: 30%"
                      aria-valuenow="30"
                      aria-valuemin="0"
                      aria-valuemax="100"
                    ></div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="">
                  <div class="flex items-center">
                    <div class="ltr:mr-2 rtl:ml-2">
                      <span
                        class="avatar avatar-xs rounded-sm bg-warning/20 text-warning p-1.5"
                        ><i class="ri-firefox-line text-xl leading-none"></i
                      ></span>
                    </div>
                    <p class="mb-0">Firefox</p>
                  </div>
                </td>
                <td class="">
                  18,120<i
                    class="ri-arrow-up-s-fill ltr:ml-2 rtl:mr-2 text-base text-success my-auto"
                  ></i>
                </td>
                <td class="">
                  <div
                    class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20"
                  >
                    <div
                      class="ti-main-progress-bar bg-warning text-xs text-white text-center"
                      role="progressbar"
                      style="width: 50%"
                      aria-valuenow="50"
                      aria-valuemin="0"
                      aria-valuemax="100"
                    ></div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="">
                  <div class="flex items-center">
                    <div class="ltr:mr-2 rtl:ml-2">
                      <span
                        class="avatar avatar-xs rounded-sm bg-success/20 text-success p-1.5"
                        ><i class="ri-edge-line text-xl leading-none"></i
                      ></span>
                    </div>
                    <p class="mb-0">Edge</p>
                  </div>
                </td>
                <td class="">
                  11,352<i
                    class="ri-arrow-up-s-fill ltr:ml-2 rtl:mr-2 text-base text-danger my-auto"
                  ></i>
                </td>
                <td class="">
                  <div
                    class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20"
                  >
                    <div
                      class="ti-main-progress-bar bg-success text-xs text-white text-center"
                      role="progressbar"
                      style="width: 25%"
                      aria-valuenow="25"
                      aria-valuemin="0"
                      aria-valuemax="100"
                    ></div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 xxl:col-span-4">
    <div class="box">
      <div class="box-header">
        <div class="flex">
          <h5 class="box-title my-auto">Audience Overview</h5>
          <div
            class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
          >
            <button
              type="button"
              aria-label="button"
              class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100 focus:ring-gray-200 dark:bg-black/20 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"
            >
              <i class="text-sm leading-none ti ti-dots-vertical"></i>
            </button>
            <div class="hs-dropdown-menu ti-dropdown-menu">
              <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">
        <ul class="flex flex-wrap space-x-6 rtl:space-x-reverse">
          <li>
            <p class="inline-flex items-center">
              <span
                class="block w-3 h-3 rounded-full ltr:mr-2 rtl:ml-2 border-4 border-primary pointer-events-none"
              ></span>
              <span class="flex items-center">
                <span
                  class="text-base text-gray-800 dark:text-white font-medium ltr:mr-2 rtl:ml-2 pointer-events-none"
                  >New Visitors</span
                >
              </span>
            </p>
          </li>
          <li>
            <p class="inline-flex items-center">
              <span
                class="block w-3 h-3 rounded-full ltr:mr-2 rtl:ml-2 border-4 border-gray-200 pointer-events-none"
              ></span>
              <span class="flex items-center">
                <span
                  class="text-base text-gray-800 dark:text-white font-medium ltr:mr-2 rtl:ml-2 pointer-events-none"
                  >Online Visitors</span
                >
              </span>
            </p>
          </li>
        </ul>
        <div id="audience">
          <apx-chart
            [series]="chartOptions2.series"
            [chart]="chartOptions2.chart"
            [dataLabels]="chartOptions2.dataLabels"
            [plotOptions]="chartOptions2.plotOptions"
            [xaxis]="chartOptions2.xaxis"
            [stroke]="chartOptions2.stroke"
            [legend]="chartOptions2.legend"
          ></apx-chart>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-2 -->

<!-- Start::row-3 -->
<div class="grid grid-cols-12 gap-x-6">
  <div class="col-span-12">
    <div class="box">
      <div class="box-header">
        <div class="flex">
          <h5 class="box-title my-auto">Visitors By Channel</h5>
          <div
            class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto"
          >
            <button
              id="hs-dropdown-custom-icon-trigger"
              type="button"
              class="hs-dropdown-toggle px-2 py-1 ti-btn ti-btn-primary"
            >
              Sort By<i class="ri-arrow-down-s-line align-middle"></i>
            </button>
            <div
              class="hs-dropdown-menu ti-dropdown-menu hidden"
              aria-labelledby="hs-dropdown-custom-icon-trigger"
            >
              <a class="ti-dropdown-item" href="javascript:void(0)">New</a>
              <a class="ti-dropdown-item" href="javascript:void(0)">popular</a>
              <a class="ti-dropdown-item" href="javascript:void(0)">Relevant</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">Channel</th>
                <th scope="col" class="dark:text-white/80">Sessions</th>
                <th scope="col" class="dark:text-white/80">Bounce Rate</th>
                <th scope="col" class="dark:text-white/80">
                  Avg Session Duration
                </th>
                <th scope="col" class="dark:text-white/80">Target Reached</th>
                <th scope="col" class="dark:text-white/80">
                  Pages Per Session
                </th>
                <th scope="col" class="dark:text-white/80">Action</th>
              </tr>
            </thead>
            <tbody class="">
              <tr class="" *ngFor="let channel of Channels">
                <td>{{ channel.id }}</td>
                <td>
                  <div class="flex items-center">
                    <span
                      class="avatar avatar-xs bg-{{
                        channel.background
                      }}/20 rounded-full p-2"
                    >
                      <i class="{{ channel.icon }}"></i>
                    </span>
                    <span class="ltr:ml-2 rtl:mr-2">
                      {{ channel.name }}
                    </span>
                  </div>
                </td>
                <td>{{ channel.sessions }}</td>
                <td>{{ channel.bouncerate }}</td>
                <td>{{ channel.duration }}</td>
                <td>
                  <span class="badge bg-primary/20 rounded-sm text-primary">{{
                    channel.target
                  }}</span>
                </td>
                <td>{{ channel.pages }}</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"
                        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(channel.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-3 -->