---
import SettingsLayout from '@shared/layouts/SettingsLayout.astro'
import PricingCard from '@shared/components/cards/PricingCard.astro'
import PricingCardEnterprise from '@shared/components/cards/PricingCardEnterprise.astro'
import Stepper from '@ui/Stepper.astro'
import FormGroup from '@ui/FormGroup.astro'
---

<SettingsLayout active="settings-plan" title="Plans">
  <div class="card-body">
    <h2 class="mb-4">Plans</h2>

    <p class="text-secondary mb-4">This workspace’s Basic Plan is set to $34 per month and will renew on June 19, 2022.</p>

    <FormGroup label="Users" for="plan-users" hint="Each plan is billed per user. Pick how many people need access." class="mb-4"><Stepper id="plan-users" value={10} min={1} max={100} /></FormGroup>

    <div class="row row-cards">
      <div class="col-lg-4">
        <PricingCard price="0" users={3} category="Free" />
      </div>
      <div class="col-lg-4">
        <PricingCard price="49" users={10} category="Premium" features="1100" featuredColor="green" />
      </div>
      <div class="col-lg-4">
        <PricingCard price="99" category="Enterprise" users={100} features="1110" />
      </div>
      <div class="col-12">
        <PricingCardEnterprise />
      </div>
    </div>
  </div>
</SettingsLayout>