mixin CardOverlayDemo(config)
  .card.bg-dark.text-white.overflow-hidden(data-bs-theme="light")&attributes(config.attrs)
    .card-img-top
      img.img-fluid(src=`${CWD}assets/img/${config.img}`, alt='Card image')
    .card-img-overlay.d-flex.align-items-end
      div
        h5.card-title.text-white!=config.title
        p.card-text!=config.body

mixin CardBasicDemo
  .card.overflow-hidden(style='width: 20rem;')
    .card-img-top
      img.img-fluid(src=`${CWD}assets/img/generic/1.jpg`, alt='Card image cap')
    .card-body
      h5.card-title Card title
      p.card-text Some quick example text to build on the card title and make up the bulk of the card's content.
      a.btn.btn-primary.btn-sm(href='#!') Go somewhere

mixin CardWithImageDemo
  .card.overflow-hidden(style='width: 20rem;')
    .card-img-top
      img.img-fluid(src=`${CWD}assets/img/generic/3.jpg`, alt='Card image cap')
    .card-body
      h5.card-title Card title
      p.card-text Some quick example text to build on the card title and make up the bulk of the card's content.
    ul.list-group.list-group-flush
      li.list-group-item Cras justo odio
      li.list-group-item Dapibus ac facilisis in
      li.list-group-item Vestibulum at eros
    .card-body
      a.card-link(href='#!') Card link
      a.card-link(href='#!') Another link

mixin CardGroupDemo
  .card-group
    .card.overflow-hidden
      .card-img-top
        img.img-fluid(src=`${CWD}assets/img/generic/10.jpg`, alt='Card image cap')
      .card-body
        h5.card-title First card title
        p.card-text
          | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
        p.card-text
          small.text-500.dark__text-500 Last updated 45 mins ago
    .card.overflow-hidden
      .card-img-top
        img.img-fluid(src=`${CWD}assets/img/generic/11.jpg`, alt='Card image cap')
      .card-body
        h5.card-title Second card title
        p.card-text This card has supporting text below as a natural lead-in to additional content.
        p.card-text
          small.text-500.dark__text-500 Last updated an hour ago
    .card.overflow-hidden
      .card-img-top
        img.img-fluid(src=`${CWD}assets/img/generic/12.jpg`, alt='Card image cap')
      .card-body
        h5.card-title Yet another card title
        p.card-text
          | This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
        p.card-text
          small.text-500.dark__text-500 Last updated yesterday

mixin CardDeckDemo
  .card-deck
    .card.overflow-hidden
      .card-img-top
        img.img-fluid(src=`${CWD}assets/img/generic/6.jpg`, alt='Card image cap')
      .card-body
        h5.card-title Awesome card title
        p.card-text
          | This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
        p.card-text
          small.text-500.dark__text-500 Last updated 22 mins ago
    .card.overflow-hidden
      .card-img-top
        img.img-fluid(src=`${CWD}assets/img/generic/7.jpg`, alt='Card image cap')
      .card-body
        h5.card-title Beautiful card title
        p.card-text This card has supporting text below as a natural lead-in to additional content.
        p.card-text
          small.text-500.dark__text-500 Last updated 3 hours ago
    .card.overflow-hidden
      .card-img-top
        img.img-fluid(src=`${CWD}assets/img/generic/8.jpg`, alt='Card image cap')
      .card-body
        h5.card-title Gorgeous card title
        p.card-text
          | This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
        p.card-text
          small.text-500.dark__text-500 Last updated on Monday

mixin CardStylesDescription
  p&attributes(attributes) Cards include various options for customizing their backgrounds, borders, and color.

mixin CardStyle(variant)
  .card&attributes(attributes)
    .card-body
      .card-title=`${variant } Card`
      p.card-text
        | Some quick example text to build on the card title and make up the bulk of the card's content.

mixin CardStyleDemo
  .row
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Primary').text-bg-primary
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Secondary').text-bg-secondary 
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Success').text-bg-success
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Danger').text-bg-danger
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Warning').text-bg-warning
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Info').text-bg-info
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Light').text-bg-light
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Dark').text-bg-dark

mixin CardBorderDemo
  .row
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Primary Border').border.h-100.border-primary
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Secondary Border').border.h-100.border-secondary 
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Success Border').border.h-100.border-success
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Danger Border').border.h-100.border-danger
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Warning Border').border.h-100.border-warning
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Info Border').border.h-100.border-info
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Light Border').border.h-100.border-light
    .col-sm-6.col-lg-4.mb-4
      +CardStyle('Dark Border').border.h-100.border-dark