mixin CardPaymentChart(height = 375)
  .card.rounded-3.overflow-hidden&attributes(attributes)
    .card-body.bg-line-chart-gradient.d-flex.flex-column.justify-content-between
      .row.align-items-center.g-0
        .col(data-bs-theme="light")
          h4.text-white.mb-0 Today $764.39
          p.fs-10.fw-semi-bold.text-white Yesterday 
            span.opacity-50 $684.87
        .col-auto.d-none.d-sm-block
          select.form-select.form-select-sm.mb-3#dashboard-chart-select
            option(value='all') All Payments
            option(value='successful' selected) Successful Payments
            option(value='failed') Failed Payments
      // Find the JS file for the following calendar at: src/js/charts/echarts/line-payment.js
      // If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/theme.js
      .echart-line-payment(style='height:200px' data-echart-responsive="true")