append variables
  -
    var runningProjects = [
      {
        name: 'CRM dashboard design',
        avatar: {
          more: 'C',
          size: 'xl',
          contentClass: 'text-primary bg-primary-subtle fs-9'
        },
        role: 'Falcon',
        members: [
          {
            img:'team/1-thumb.png',
            size: 'xl'
          },
          {
            img:'team/2-thumb.png',
            size: 'xl'
          },
          {
            more:'+2',
            size: 'xl'
          },
        ],
        progressbarWidth: '50',
        time: '12h:50m:00s',
        date: '01/02/22'
      },
      {
        name: 'UI/UX Redesign',
        avatar: {
          more: 'U',
          size: 'xl',
          contentClass: 'text-success bg-success-subtle fs-9'
        },
        role: 'Themewagon',
        members: [
          {
            img:'team/3-thumb.png',
            size: 'xl'
          },
          {
            img:'team/4-thumb.png',
            size: 'xl'
          },
          {
            more:'+5',
            size: 'xl'
          },
        ],
        progressbarWidth: '70',
        time: '11h:50m:00s',
        date: '04/02/22'
      },
      {
        name: 'F.A.Q Section',
        avatar: {
          more: 'F',
          size: 'xl',
          contentClass: 'text-info bg-info-subtle fs-9'
        },
        role: 'Mailbluster',
        members: [
          {
            img:'team/5-thumb.png',
            size: 'xl'
          },
          {
            img:'team/7.jpg',
            size: 'xl'
          }
        ],
        progressbarWidth: '60',
        time: '3h:30m:50s',
        date: '01/02/22'
      },
      {
        name: 'Drip Campaign Feature',
        avatar: {
          more: 'D',
          size: 'xl',
          contentClass: 'text-warning bg-warning-subtle fs-9'
        },
        role: 'Themewagon',
        members: [
          {
            img:'team/7.jpg',
            size: 'xl'
          },
          {
            img:'team/10.jpg',
            size: 'xl'
          },
            {
              more:'+2',
              size: 'xl'
          },
        ],
        progressbarWidth: '80',
        time: '12h:20m:00s',
        date: '22/03/22'
      },
      {
        name: 'Studio Recording',
        avatar: {
          more: 'S',
          size: 'xl',
          contentClass: 'text-danger bg-danger-subtle fs-9'
        },
        role: 'Mailbluster Marketing',
        members: [
          {
            img:'team/12.jpg',
            size: 'xl'
          },
          {
            img:'team/13.jpg',
            size: 'xl'
          },
          {
            img:'team/5.jpg',
            size: 'xl'
          }
        ],
        progressbarWidth: '40',
        time: '11h:10m:00s',
        date: '28/02/22'
      },
      {
        name: 'Project Managenemt',
        avatar: {
          more: 'P',
          size: 'xl',
          contentClass: 'text-success bg-success-subtle fs-9'
        },
        role: 'Themewagon',
        members: [
          {
            img:'team/16.jpg',
            size: 'xl'
          },
          {
            img:'team/25.jpg',
            size: 'xl'
          },
          {
            img:'team/18.jpg',
            size: 'xl'
          }
        ],
        progressbarWidth: '50',
        time: '12h:30m:30s',
        date: '08/01/22'
      },
    ];

mixin CardRunningProject
  .card&attributes(attributes)#runningProjectTable(data-list!={
    valueNames: ["projects", "worked", "time", "date"],
  })
    .card-header 
      h6.mb-0 Running Projects
    .card-body.p-0
      .scrollbar
        table.table.mb-0.table-borderless.fs-10.border-200.overflow-hidden.table-running-project
          thead.bg-body-tertiary
            tr
              th.text-800.sort(data-sort="projects") Projects
              th.text-800.sort(data-sort="time") Progress
              th.text-800.sort.text-center(data-sort="worked")  Worked
              th.text-800.sort.text-center(data-sort="date") Due Date
              th.text-800.text-end Members
          tbody.list
            each project, index in runningProjects
              +ProjectItem(project, index)
    .card-footer.bg-body-tertiary.py-0.text-center
      a.btn.btn-sm.btn-link.py-2(href=`#!`) Show All Projects
        span.fas.fa-chevron-right.ms-1.fs-11

mixin ProjectItem(project, index)
  tr
    td
      +RunningProjectsProject(project)
    td.align-middle
      .progress.rounded-3.worked(style="height: 6px;" role='progressbar' aria-valuenow='43.72' aria-valuemin='0' aria-valuemax='100')
        .progress-bar.bg-progress-gradient.rounded-pill(style=`width: ${project.progressbarWidth}%`)
    td.align-middle.text-center.time
      p.mb-0.fw-semi-bold #{project.time}
    td.align-middle.text-center.date
      p.mb-0.fw-semi-bold #{project.date}
    td
      .avatar-group.justify-content-end
        each member in project.members
          +Avatar(member).border.border-3.border-200.rounded-circle

mixin RunningProjectsProject(config)
  .d-flex.align-items-center.position-relative
    +Avatar(config.avatar)
    .flex-1.ms-3
      h6.mb-0.fw-semi-bold
        a(href=`${CWD}pages/user/profile.html`).stretched-link.text-900=config.name
      p.text-500.fs-11.mb-0=config.role