mixin CardNumberOfTickets
  .card.h-100&attributes(attributes)
    .card-header.d-md-flex.justify-content-between.border-bottom.border-200.py-3.py-md-2
      h6.mb-2.mb-md-0.py-md-2 Number of Tickets
      .row.g-md-0
        .col-auto.d-md-flex
          .d-flex.align-items-center.me-md-3.form-check.mb-0
            input.form-check-input.dot.mt-0.shadow-none.remove-checked-icon.rounded-circle.cursor-pointer(type="checkbox" data-number-of-tickets="On Hold Tickets" value="" id="onHoldTickets" checked)
            label.form-check-label.lh-base.mb-0.fs-11.text-500.fw-semi-bold.font-base.cursor-pointer(for="onHoldTickets") On Hold Tickets
          .d-flex.align-items-center.me-md-3.form-check.mb-0.mt-n1.mt-md-0
            input.form-check-input.dot.mt-0.shadow-none.remove-checked-icon.rounded-circle.open-tickets.cursor-pointer(type="checkbox" data-number-of-tickets="Open Tickets" value="" id="openTickets" checked)
            label.form-check-label.lh-base.mb-0.fs-11.text-500.fw-semi-bold.font-base.cursor-pointer(for="openTickets") Open Tickets
        .col-auto.d-md-flex
          .d-flex.align-items-center.me-md-3.form-check.mb-0
            input.form-check-input.dot.mt-0.shadow-none.remove-checked-icon.rounded-circle.due-tickets.cursor-pointer(type="checkbox" data-number-of-tickets="Due Tickets" value="" id="dueTickets" checked)
            label.form-check-label.lh-base.mb-0.fs-11.text-500.fw-semi-bold.font-base.cursor-pointer(for="dueTickets") Due Tickets
          .d-flex.align-items-center.form-check.mb-0.mt-n1.mt-md-0
            input.form-check-input.dot.mt-0.shadow-none.remove-checked-icon.rounded-circle.unassigned-tickets.cursor-pointer(type="checkbox" data-number-of-tickets="Unassigned Tickets" value="" id="unassignedTickets" checked)
            label.form-check-label.lh-base.mb-0.fs-11.text-500.fw-semi-bold.font-base.cursor-pointer(for="unassignedTickets") Unassigned Tickets
    .card-body.scrollbar.overflow-y-hidden
      .d-flex
        .d-flex.align-items-center
          div
            h6.fs-9.d-flex.align-items-center.text-700.mb-1 125
              small.badge.text-success.bg-transparent.px-0
                span.fas.fa-caret-up.fs-11.ms-2.me-1
                span 5.3%
            h6.text-600.mb-0.fs-11.text-nowrap Total On Hold Tickets
          .bg-200.mx-3(style='height: 24px; width: 1px')
        .d-flex.align-items-center
          div
            h6.fs-9.d-flex.align-items-center.text-700.mb-1 100
              small.badge.px-0.text-primary
                span.fas.fa-caret-up.fs-11.ms-2.me-1
                span 3.20%
            h6.fs-11.text-600.mb-0.text-nowrap Total Open Tickets
          .bg-200.mx-3(style='height: 24px; width: 1px')
        .d-flex.align-items-center
          div
            h6.fs-9.d-flex.align-items-center.text-700.mb-1 53
              small.badge.px-0.text-warning
                span.fas.fa-caret-down.fs-11.ms-2.me-1
                span 2.3%
            h6.fs-11.text-600.mb-0.text-nowrap Total Due Tickets
          .bg-200.mx-3(style='height: 24px; width: 1px')
        div
          h6.fs-9.d-flex.align-items-center.text-700.mb-1 136
            small.badge.px-0.text-danger
              span.fas.fa-caret-up.fs-11.ms-2.me-1
              span 3.12%
          h6.fs-11.text-600.mb-0.text-nowrap Total Unassigned Tickets
      .echart-number-of-tickets(data-echart-responsive="true")
    .card-footer.bg-body-tertiary.py-2
      .row.g-2.flex-between-center
        .col-auto
          select.form-select.form-select-sm
            option January
            option February
            option(selected) March
            option April
            option May
            option June
            option July
            option August
            option September
            option October
            option Novenber
            option December
        .col-auto
          a.btn.btn-link.btn-sm.px-0(href=`#!`)
            | View all reports
            span.fas.fa-chevron-right.ms-1.fs-11