append variables
  -
    var mostLeadActivities = [
      {
        title: 'Email',
        target: '5200 vs 1052',
        img: 'crm/email.svg',
        amount: '54',
      },
      {
        title: 'Social',
        target: '5623 vs 4929',
        img: 'crm/social.svg',
        amount: '27',
      },
      {
        title: 'Call',
        target: '2535 vs 1486',
        img: 'crm/call.svg',
        amount: '4',
      },
      {
        title: 'Other',
        target: '256 vs 189',
        img: 'crm/other.svg',
        amount: '13',
      }
    ];

mixin CardMostLeads
  .card&attributes(attributes)
    .card-header.d-flex.flex-between-center.py-2.border-bottom
      h6.mb-0 Most Leads
      +DashboardDropdown('dropdown-most-leads')
    .card-body.d-flex.flex-column.justify-content-between
      .row.align-items-center
        .col-md-5.col-xxl-12.mb-xxl-1
          .position-relative
            // Find the JS file for the following chart at: src/js/charts/echarts/most-leads.js
            // If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/theme.js
            .echart-most-leads.my-2(data-echart-responsive="true")
            .position-absolute.top-50.start-50.translate-middle.text-center
              p.fs-10.mb-0.text-400.font-sans-serif.fw-medium Total
              p.fs-6.mb-0.font-sans-serif.fw-medium.mt-n2 15.6k
        .col-xxl-12.col-md-7
          hr.mx-nx1.mb-0.d-md-none.d-xxl-block
          each item,index in mostLeadActivities
            +CrmLeadItem(item, index)

    .card-footer.bg-body-tertiary.p-0
      a.btn.btn-sm.btn-link.d-block.py-2(href=`#!`) View all
        span.fas.fa-chevron-right.ms-1.fs-11
      
mixin CrmLeadItem(item,index)
  -
    var className = '';
    index === 0 && (className = 'pt-md-0 pt-xxl-3');
    index === mostLeadActivities.length-1 && (className = 'border-bottom-0 pb-0');
  
  .d-flex.flex-between-center.border-bottom.py-3(class=className)
    .d-flex
      img(src=`${CWD}assets/img/${item.img} ` width= '16' height='16' alt="...").me-2
      h6.text-700.mb-0 #{item.title} 
    p.fs-10.text-500.mb-0.fw-semi-bold #{item.target}
    h6.text-700.mb-0 #{item.amount}%

mixin CardAverageCallDuration 
  .card&attributes(attributes)
    .card-header 
      h6.mb-0 Average Call Duration
        span.ms-1.text-400(data-bs-toggle="tooltip" data-bs-placement="top" title="Average call duration based of last 50 calls")
          span.far.fa-question-circle(data-fa-transform="shrink-1")
    .card-body 
      .row.g-3
        .col
          h4.text-primary.fw-normal 10m:8s
          p.fs-11.fw-semi-bold.text-500.mb-0 Based on 50 calls
        .col-auto.text-end
          .echart-call-duration(data-echart-responsive="true" data-echarts!={
              series: [
                { 
                  type: 'line',
                  data: [8,15,12,14,18,12,12,25,13,12,10,13,35],
                  color: themeColor.warning,
                  areaStyle: {
                    color: {
                      colorStops: [
                        {
                          offset: 0,
                          color: themeColor.warning+'3A',      
                        },
                        {
                          offset: 1,
                          color: themeColor.warning+'0A',
                        },
                      ],
                    },
                },
                },
              ],
              
              grid: { bottom: "-10px", right: "0px" },
            })

mixin CardDealClosedVsGoal
  .card&attributes(attributes)
    .card-header.d-flex.flex-between-center.py-2
      h6.mb-0 Deal Closed vs Goal
      +DashboardDropdown(`crm-closed-vs-goal`)
    .card-body
      // Find the JS file for the following chart at: src/js/charts/echarts/closed-vs-goal.js
      // If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/theme.js
      .echart-closed-vs-goal(data-echart-responsive="true")

mixin CardLeadConversion
  .card&attributes(attributes)
    .card-header.d-flex.flex-between-center.border-bottom.border-200.py-2
      h6.mb-0 Lead Conversion
      +DashboardDropdown(`crm-lead-conversion`)  
    .card-body.pt-0
      .d-flex.bg-100.py-2.mb-3.justify-content-center.mx-nx1.fs-10.border-bottom.border-200
        p.text-600.mb-0.border-end.border-200.px-x1.d-flex.align-items-center Current Rete:   
          span.fs-sm-8.font-sans-serif.ms-2.text-700  4.5%
          span.fas.fa-caret-up.ms-2.ms-xxl-3.fs-10.text-success
        p.text-600.mb-0.px-x1 Target Rete:
          span.fs-sm-8.font-sans-serif.ms-2.text-700  6%
      
      // Find the JS file for the following chart at: src/js/charts/echarts/lead-conversion.js
      // If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/theme.js
      .echart-lead-conversion(data-echart-responsive="true")
    .card-footer.bg-body-tertiary.p-0
      a.btn.btn-sm.btn-link.d-block.py-2(href=`#!`) View Details
        span.fas.fa-chevron-right.ms-1.fs-11