append variables
  -
    var todoList = [
      {
        task: 'Design a ad',
      },
      {
        task: 'Analyze Data',
      },
      {
        task: 'Youtube campaign',
      },
      {
        task: 'Assaign employee',
      },
      {
        task: 'Video Conference',
      },
    ];

mixin CardCrmToDoList
  .card&attributes(attributes)
    .card-header.border-bottom
      h6.mb-0 To Do List
         
    .card-body.p-0.overflow-hidden
      .row.gx-3.align-items-center.my-3.px-x1
        .col-auto
          h6.text-primary.mb-0 25%
        .col 
          .progress.rounded-pill(style="height: 0.5625rem;" role='progressbar' aria-valuenow='43.72' aria-valuemin='0' aria-valuemax='100')
            .progress-bar.bg-progress-gradient.rounded-pill(style='width: 75%')
      each item, index in todoList
        +TodoItem(item,index)
      
    .card-footer.bg-body-tertiary.p-0
      a.btn.btn-sm.btn-link.d-block.py-2(href=`#!`)
        span.fas.fa-plus.me-1.fs-11
        | Add New Task

mixin TodoItem(item,index)
  .d-flex.justify-content-between.hover-actions-trigger.btn-reveal-trigger.px-x1.hover-bg-100
    .form-check.mb-0.d-flex.align-items-center
      input.form-check-input.rounded-3.form-check-line-through.p-2.mt-0(type="checkbox" id=`crm-checkbox-todo-${index}`)
      label.form-check-label.mb-0.p-3(for=`crm-checkbox-todo-${index}`)=item.task
    .d-flex.align-items-center
      .hover-actions
        button.btn.icon-item.rounded-3.me-2.fs-11.icon-item-sm
          span.fas.fa-clock
        button.btn.icon-item.rounded-3.me-2.fs-11.icon-item-sm
          span.fas.fa-user-plus 
      +DashboardDropdown(`crm-to-do-list-${index}`, 'sm').transition-none