---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Icon from '@ui/Icon.astro'
import Card from '@ui/Card.astro'
import Subheader from '@ui/Subheader.astro'
---

<DefaultLayout title="Pricing table" pageMenu="extra.pricing-table">
  <Card>
    <div class="table-responsive">
      <table class="table table-vcenter table-bordered table-nowrap card-table">
        <thead>
          <tr>
            <td class="w-50">
              <h2>Pricing plans for teams of all sizes</h2>
              <div class="text-secondary text-wrap">Choose an affordable plan that comes with the best features to engage your audience, create customer loyalty and increase sales.</div>
            </td>
            <td class="text-center">
              <div class="text-uppercase text-secondary fw-medium">Starter</div>
              <div class="display-6 fw-bold my-3">$0</div>
              <a href="#" class="btn w-100">Choose plan</a>
            </td>
            <td class="text-center">
              <div class="text-uppercase text-secondary fw-medium">Professional</div>
              <div class="display-6 fw-bold my-3">$9</div>
              <a href="#" class="btn btn-green w-100">Choose plan</a>
            </td>
            <td class="text-center">
              <div class="text-uppercase text-secondary fw-medium">Business</div>
              <div class="display-6 fw-bold my-3">$16</div>
              <a href="#" class="btn w-100">Choose plan</a>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr class="bg-surface-tertiary">
            <Subheader as="th" colspan="4">Features</Subheader>
          </tr>
          <tr>
            <td>Some info about feature</td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
          </tr>
          <tr>
            <td>Online payment gateway</td>
            <td class="text-center"><Icon name="x" class="text-red" /></td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
          </tr>
          <tr>
            <td>Unlimited products can be sold</td>
            <td class="text-center"><Icon name="x" class="text-red" /></td>
            <td class="text-center"><Icon name="x" class="text-red" /></td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
          </tr>
          <tr class="bg-surface-tertiary">
            <Subheader as="th" colspan="4">Reporting</Subheader>
          </tr>
          <tr>
            <td>Free hosting and domain name</td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
          </tr>
          <tr>
            <td>Admin dashboard to control items</td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
          </tr>
          <tr class="bg-surface-tertiary">
            <Subheader as="th" colspan="4">Support</Subheader>
          </tr>
          <tr>
            <td>Email marketing and service</td>
            <td class="text-center"><Icon name="x" class="text-red" /></td>
            <td class="text-center"><Icon name="x" class="text-red" /></td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
          </tr>
          <tr>
            <td>24/7 customer support online</td>
            <td class="text-center"><Icon name="x" class="text-red" /></td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
            <td class="text-center"><Icon name="check" class="text-green" /></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td></td>
            <td>
              <a href="#" class="btn w-100">Choose plan</a>
            </td>
            <td>
              <a href="#" class="btn btn-green w-100">Choose plan</a>
            </td>
            <td>
              <a href="#" class="btn w-100">Choose plan</a>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </Card>
</DefaultLayout>