append variables
  -
    var projects = [ 
      {
        project: 'Organizing UI',
        team: 'ThemeWagon',
        iconColor: 'text-primary'
      },
      {
        project: 'Create Mobile View',
        team: 'Mailbluster',
        iconColor: 'text-warning'
      },
      {
        project: 'Create Landing Pages',
        team: 'BlackBOx',
        iconColor: 'text-secondary'
      },
      {
        project: 'Front end issues',
        team: 'Falcon Team',
        iconColor: 'text-info'
      }
    ];

mixin CardProjectStatistics
  .card&attributes(attributes)
    .card-header.d-flex.flex-between-center
      h6.mb-0 Project Statistics
      +DashboardDropdown('dropdown-project-statistics')
    .card-body.pt-0
      .row.mb-2
        .col-6.border-end.border-200
          h4.mb-0 5,432
          p.fs-10.text-600.mb-0 Total Work Hours
        .col-3.border-end.text-center.border-200
           h4.fs-9.mb-0 13
           p.fs-10.text-600.mb-0 Projects
        .col-3.text-center
           h4.fs-9.mb-0 7
           p.fs-10.text-600.mb-0 Ongoing
      +ProgressBar
      p.fs-10.mb-2.mt-3 Assignees in Sprint
      .avatar-group.avatar-group-dense.mb-3
        -
          var users = [
            {
              img:'team/1-thumb.png'
            },
            {
              img:'team/2-thumb.png'
            },
            {
              img:'team/3-thumb.png'
            },
            {
              img:'team/4-thumb.png'
            },
            {
              img:'team/5-thumb.png'
            },
            {
              more: "+50"
            }
          ];
        each user in users
          +Avatar(user).border.border-3.border-200.rounded-circle

      .d-flex.justify-content-between
        h6 Project 
        h6 Team
      
      each project, index in projects
        +ProjectStatisticsItem(project, index)

mixin ProjectStatisticsItem(project, index) 
  .d-flex.flex-between-center.rounded-3.bg-body-tertiary.p-3(class= (index !== projects.length-1) && `mb-2`)
    a(href='#!')
      h6.mb-0
        span.fas.fa-circle.fs-10.me-3(class= `${project.iconColor}`)
        | #{project.project}
    a(href='#!').fs-11.text-600.mb-0 #{project.team}

mixin ProgressBar
  .progress-stacked.overflow-visible.mt-4.rounded-3(style="height: 6px;")
    .progress(role='progressbar' style='width: 25%; height: 6px;' aria-valuenow='25' aria-valuemin='0' aria-valuemax='100')
      .overflow-visible.progress-bar.bg-progress-gradient.border-end.border-100.border-2.rounded-end.rounded-pill
        span.mt-n4.text-900.fw-bold 25%
    .progress(role='progressbar' style='width: 45%; height: 6px;' aria-valuenow='45' aria-valuemin='0' aria-valuemax='100')
      .overflow-visible.progress-bar.bg-secondary.border-end.border-100.border-2
        span.mt-n4.text-900.fw-bold 45%
    .progress(role='progressbar' style='width: 15%; height: 6px;' aria-valuenow='15' aria-valuemin='0' aria-valuemax='100')
      .overflow-visible.progress-bar.bg-warning.border-end.border-100.border-2
        span.mt-n4.text-900.fw-bold 15%
    .progress(role='progressbar' style='width: 15%; height: 6px;' aria-valuenow='15' aria-valuemin='15' aria-valuemax='100')
      .overflow-visible.progress-bar.bg-info.rounded-start.rounded-pill
        span.mt-n4.text-900.fw-bold 15%