---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import StatCard from '@shared/components/cards/StatCard.astro'
import ProjectProgress from '@shared/components/cards/ProjectProgress.astro'
import UserCard from '@shared/components/cards/UserCard.astro'
import UserCardBig from '@shared/components/cards/UserCardBig.astro'
import UserCardBg from '@shared/components/cards/UserCardBg.astro'
import Subscribe from '@shared/components/cards/Subscribe.astro'
import SmallStats from '@shared/components/cards/SmallStats.astro'
import Code from '@shared/components/cards/Code.astro'
import ProjectSummary from '@shared/components/cards/ProjectSummary.astro'
import ProjectKanban from '@shared/components/cards/ProjectKanban.astro'
import UserInfo from '@shared/components/cards/UserInfo.astro'
import Configuration from '@shared/components/cards/Configuration.astro'
import Gauge from '@shared/components/cards/Gauge.astro'
---

<DefaultLayout title="Widgets" pageMenu="extra.widgets" pageLibs={['apexcharts']}>
  <div class="row row-cards">
    <div class="col-12 col-md-6 col-xxl-3 mb-4 mb-xxl-0">
      <StatCard title="Earned" value="$2,847" icon="credit-card" countup />
    </div>
    <div class="col-12 col-md-6 col-xxl-3 mb-4 mb-xxl-0">
      <StatCard title="Hours logged" value="42.7 hrs" icon="clock" countup />
    </div>
    <div class="col-12 col-md-6 col-xxl-3 mb-4 mb-md-0">
      <StatCard title="Avg. time" value="3:28 hrs" icon="slideshow" countup />
    </div>
    <div class="col-12 col-md-6 col-xxl-3">
      <StatCard title="Weekly growth" value="18.4%" icon="discount" countup />
    </div>

    <div class="col-md-4">
      <Gauge id="deliverability" title="Deliverability" value={96} label="delivered" count={48210} total={50219} color="green" description="Share of sent emails accepted by the receiving server. Anything above 95% is healthy." />
    </div>
    <div class="col-md-4">
      <Gauge id="storage" title="Storage used" value={82} label="used" count={410} total={500} color="yellow" description="Disk space taken by uploads and backups, in GB. Consider an upgrade once it passes 80%." />
    </div>
    <div class="col-md-4">
      <Gauge id="onboarding" title="Onboarding" value={58} label="completed" count={1392} total={2400} description="New accounts that finished every setup step. There is no target for this metric yet." />
    </div>
    <div class="col-lg-6">
      <ProjectProgress />
    </div>
    <div class="col-lg-6">
      <ProjectProgress projectId={2} progress={76} daysAgo={7} />
    </div>

    <div class="col-md-6 col-xl-3"><UserCard personId={5} /></div>
    <div class="col-md-6 col-xl-3"><UserCard personId={6} /></div>
    <div class="col-md-6 col-xl-3"><UserCard personId={7} right /></div>
    <div class="col-md-6 col-xl-3"><UserCard personId={8} right /></div>

    <div class="col-md-6 col-xl-3"><UserCardBig personId={15} /></div>
    <div class="col-md-6 col-xl-3"><UserCardBig personId={16} /></div>
    <div class="col-md-6 col-xl-3"><UserCardBig personId={17} /></div>
    <div class="col-md-6 col-xl-3"><UserCardBig personId={18} /></div>

    <div class="col-md-6 col-xl-3"><UserCardBg personId={25} /></div>
    <div class="col-md-6 col-xl-3"><UserCardBg personId={26} /></div>
    <div class="col-md-6 col-xl-3"><UserCardBg personId={27} blurred /></div>
    <div class="col-md-6 col-xl-3"><UserCardBg personId={28} blurred /></div>

    <div class="col-md-6">
      <Subscribe personId={0} />
    </div>
    <div class="col-md-6">
      <Subscribe personId={2} />
    </div>

    <div class="col-md-6 col-xl-3">
      <SmallStats id="currency" icon="currency-dollar" color="primary" title="132 Sales" description="12 waiting payments" />
    </div>
    <div class="col-md-6 col-xl-3">
      <SmallStats id="shopping-cart" icon="shopping-cart" color="green" title="78 Orders" description="32 shipped" />
    </div>
    <div class="col-md-6 col-xl-3">
      <SmallStats id="user" icon="user" color="red" title="1352 Members" description="163 registered today" />
    </div>
    <div class="col-md-6 col-xl-3">
      <SmallStats id="message" icon="message" color="yellow" title="132 Comments" description="16 waitings" />
    </div>

    <div class="col-md-6 col-xl-3">
      <SmallStats id="sales" chartPosition="left" chartType="circle" chartData="56" color="primary" title="132 Sales" description="12 waiting payments" />
    </div>
    <div class="col-md-6 col-xl-3">
      <SmallStats id="orders" chartPosition="left" chartType="circle" chartData="56" color="green" title="78 Orders" description="32 shipped" />
    </div>
    <div class="col-md-6 col-xl-3">
      <SmallStats id="members" chartPosition="left" chartType="circle" chartData="56" color="red" title="1352 Members" description="163 registered today" />
    </div>
    <div class="col-md-6 col-xl-3">
      <SmallStats id="comments" chartPosition="left" chartType="circle" chartData="56" color="yellow" title="132 Comments" description="16 waitings" />
    </div>

    <div class="col-md-6 col-xl-3">
      <SmallStats id="sales" icon="arrow-up" color="green" lt title="$5,256.99" description="Revenue last 30 days" descriptionValue="+4%" />
    </div>
    <div class="col-md-6 col-xl-3">
      <SmallStats id="orders" icon="arrow-down" color="red" lt title="342" description="Sales last 30 days" descriptionValue="-4.3%" descriptionValueColor="red" />
    </div>
    <div class="col-md-6 col-xl-3">
      <SmallStats id="members" icon="arrow-up" color="green" lt title="132" description="Customers last 30 days" descriptionValue="+6.8%" />
    </div>
    <div class="col-md-6 col-xl-3">
      <SmallStats id="comments" icon="arrow-down" color="red" lt title="78" description="Members registered today" descriptionValue="-2%" descriptionValueColor="red" />
    </div>

    <div class="col-md-6 col-lg-4">
      <div class="row row-cards">
        <div class="col-12"><SmallStats id="widget-line" chartType="line" chartData="20,0,40,30,40,30,80,60" /></div>
        <div class="col-12"><SmallStats id="widget-bar-red" chartType="bar" chartData="20,40,30,10,40,60,80,70" color="red" icon="heart" /></div>
        <div class="col-12"><SmallStats id="widget-bar-green" chartType="bar" chartData="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="brand-github" /></div>
        <div class="col-12"><SmallStats id="widget-donut-10" chartType="circle" chartData="12" personId={10} /></div>
        <div class="col-12"><SmallStats id="widget-donut-11" chartType="circle" chartData="12" personId={11} /></div>
        <div class="col-12"><SmallStats id="widget-donut-1" chartType="circle" chartData="56" personId={1} /></div>
        <div class="col-12"><SmallStats color="green" personId={4} /></div>
        <div class="col-12"><SmallStats smallIcon="trending-down" color="red" personId={3} /></div>
        <div class="col-12"><Code /></div>
      </div>
    </div>
    <div class="col-md-6 col-lg-4">
      <div class="row row-cards">
        <div class="col-12"><ProjectSummary stageColor="red" /></div>
      </div>
    </div>
    <div class="col-md-6 col-lg-4">
      <div class="row row-cards">
        <div class="col-12"><ProjectKanban title="Tabler UI" badge="v1.0" value={30} percentageColor="red" limit={4} offset={0} due="72 days" /></div>
        <div class="col-12"><ProjectKanban title="Tabler React" value={80} offset={20} /></div>
        <div class="col-12"><UserInfo /></div>
        <div class="col-12"><Configuration /></div>
      </div>
    </div>
  </div>
</DefaultLayout>