mixin CardDealForecastBar
  .card&attributes(attributes)
    .card-header.d-flex.flex-between-center.border-bottom.border-200.py-2
      h6.mb-0 Deal Forecast
      +DashboardDropdown(`crm-deal-forecast-bar`) 
    .card-body.d-flex.align-items-center
      .w-100
        h3.text-700.mb-6 $90,439
      
        +CrmProgressBar.mt-xxl-auto
        +DealForecastLegends.mt-3.mt-xxl-4
      

mixin CrmProgressBar
  .progress-stacked.overflow-visible.rounded-5.font-sans-serif.fw-medium&attributes(attributes)
    .progress.fs-10.rounded-start-5(style='width: 50%; height: 20px;' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Closed won" data-bs-original-title="Closed won")
      .progress-bar.overflow-visible.bg-progress-gradient.border-end.border-100.border-2.rounded-end.rounded-pill.text-start
        span.text-700.mt-n6 $47.8k
    .progress.fs-10(style='width: 20%; height: 20px;' role='progressbar' aria-valuenow='20' aria-valuemin='0' aria-valuemax='100' data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Contact sent" data-bs-original-title="Contact sent")
      .progress-bar.overflow-visible.bg-primary-subtle.border-end.border-100.border-2.text-start
        span.text-700.mt-n6 $20.2k
    .progress.fs-10(style='width: 15%; height: 20px;' role='progressbar' aria-valuenow='15' aria-valuemin='0' aria-valuemax='100' data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Pending" data-bs-original-title="Pending")
      .progress-bar.overflow-visible.bg-info-subtle.border-end.border-100.border-2.text-start
        span.text-700.mt-n6 $18k
    .progress.fs-10.rounded-end-5(style='width: 15%; height: 20px;' role='progressbar' aria-valuenow='15' aria-valuemin='15' aria-valuemax='100' data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Qualified" data-bs-original-title="Qualified")
      .progress-bar.overflow-visible.bg-info.rounded-start.rounded-pill.text-start
        span.text-700.mt-n6 $16k

mixin DealForecastLegends
  .row.fs-10.fw-semi-bold.text-500.mt-3.g-0&attributes(attributes)
    .col-auto.d-flex.align-items-center.pe-3
      span.dot.bg-primary
      span Closed won
      span.d-none.d-md-inline-block.d-lg-none.d-xxl-inline-block (100%)
    .col-auto.d-flex.align-items-center.pe-3
      span.dot.bg-primary-subtle
      span Contact sent
      span.d-none.d-md-inline-block.d-lg-none.d-xxl-inline-block (5%)
    
    .col-auto.d-flex.align-items-center.pe-3
      span.dot.bg-info-subtle
      span Pending
      span.d-none.d-md-inline-block.d-lg-none.d-xxl-inline-block (5%)
    .col-auto.d-flex.align-items-center
      span.dot.bg-info
      span Qualified
      span.d-none.d-md-inline-block.d-lg-none.d-xxl-inline-block (20%)