---
// shared by index.astro and layout-vertical.astro.
import Chart from '@shared/components/demo/Chart.astro'
import CaptureScript from '@shared/components/CaptureScript.astro'
import CardTitle from '@ui/CardTitle.astro'
import Legend from '@ui/Legend.astro'
import LegendList from '@ui/LegendList.astro'
import MapVectorCard from './cards/MapVectorCard.astro'
import Welcome from './cards/Welcome.astro'
import TotalUsers from './cards/charts/TotalUsers.astro'
import ActiveUsers2 from './cards/charts/ActiveUsers2.astro'
import Sales from './cards/charts/Sales.astro'
import Revenue from './cards/charts/Revenue.astro'
import NewClients from './cards/charts/NewClients.astro'
import ActiveUsers from './cards/charts/ActiveUsers.astro'
import SmallStats from './cards/SmallStats.astro'
import StorageUsage from './cards/StorageUsage.astro'
import ActivityCard from './cards/ActivityCard.astro'
import DevelopmentActivity from './cards/DevelopmentActivity.astro'
import IconsBanner from './cards/IconsBanner.astro'
import MostVisitedPages from './cards/MostVisitedPages.astro'
import Sponsor from './cards/Sponsor.astro'
import SocialTraffic from './cards/SocialTraffic.astro'
import Tasks from './cards/Tasks.astro'
import Invoices from './cards/Invoices.astro'

interface Props {
  rtl?: boolean
}

const { rtl = false } = Astro.props
---

<div class="row row-deck row-cards">
  <div class="col-sm-12 col-lg-6">
    <Welcome />
  </div>
  <div class="col-sm-6 col-lg-3">
    <TotalUsers />
  </div>
  <div class="col-sm-6 col-lg-3">
    <ActiveUsers2 />
  </div>
  <div class="col-sm-6 col-lg-3">
    <Sales />
  </div>
  <div class="col-sm-6 col-lg-3">
    <Revenue />
  </div>
  <div class="col-sm-6 col-lg-3">
    <NewClients />
  </div>

  <div class="col-sm-6 col-lg-3">
    <ActiveUsers />
  </div>

  <div class="col-12">
    <div class="row row-cards">
      <div class="col-sm-6 col-lg-3">
        <SmallStats color="primary" icon="currency-dollar" title="132 Sales" description="12 waiting payments" />
      </div>
      <div class="col-sm-6 col-lg-3">
        <SmallStats color="green" icon="shopping-cart" title="78 Orders" description="32 shipped" />
      </div>
      <div class="col-sm-6 col-lg-3">
        <SmallStats icon="brand-x" color="x" title="623 Shares" description="16 today" />
      </div>
      <div class="col-sm-6 col-lg-3">
        <SmallStats icon="brand-facebook" color="facebook" title="132 Likes" description="21 today" />
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="card">
      <div class="card-body">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
          <CardTitle class="mb-0">Traffic summary</CardTitle>
          <LegendList id="traffic-summary-legend">
            <Legend button text="Web" data-series="Web" style="--tblr-legend-color: var(--chart-mentions-color-0)" />
            <Legend button text="Social" data-series="Social" style="--tblr-legend-color: var(--chart-mentions-color-1)" />
            <Legend button text="Other" data-series="Other" style="--tblr-legend-color: var(--chart-mentions-color-2)" />
          </LegendList>
        </div>
        <Chart chartId="mentions" size="lg" label="Traffic summary" />
        <CaptureScript>
          <!-- BEGIN SCRIPT OF TRAFFIC SUMMARY LEGEND -->
          <script is:inline>
            /*
            Toggles a chart series when its legend item is clicked.
            The chart is exposed by the demo Chart component as window.tabler_chart['chart-mentions'].
            */
            document.querySelectorAll('#traffic-summary-legend .legend').forEach((item) => {
              item.addEventListener('click', () => {
                const chart = window.tabler_chart && window.tabler_chart['chart-mentions']
                if (!chart) return
                chart.toggleSeries(item.dataset.series)
                item.classList.toggle('legend-off')
              })
            })
          </script>
          <!-- END SCRIPT OF TRAFFIC SUMMARY LEGEND -->
        </CaptureScript>
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <MapVectorCard title="Locations" />
  </div>

  <div class="col-lg-6">
    <div class="row row-cards">
      <div class="col-12">
        <StorageUsage />
      </div>
      <div class="col-12">
        <ActivityCard />
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <DevelopmentActivity />
  </div>

  <div class="col-12">
    <IconsBanner />
  </div>

  <div class="col-md-12 col-lg-8">
    <MostVisitedPages />
  </div>

  <div class="col-md-6 col-lg-4">
    <Sponsor rtl={rtl} />
  </div>

  <div class="col-md-6 col-lg-4">
    <SocialTraffic />
  </div>

  <div class="col-md-12 col-lg-8">
    <Tasks />
  </div>

  <div class="col-12">
    <Invoices />
  </div>
</div>