append variables
  -
    var customers = [
      {
        name: 'Ricky Antony',
        avatar: {
          size: 'xl',
          name: 'Ricky Antony',
          round: 'circle'
        },
        email: 'ricky@example.com',
        phone: '(201) 200-1851',
        address: '2392 Main Avenue, Penasauka, New Jersey 02139',
        joined: '30/03/2018'
      },
      {
        name: 'Emma Watson',
        avatar: {
          size: 'xl',
          img: 'team/2.jpg',
          round: 'circle',
        },
        email: 'emma@example.com',
        phone: '(212) 228-8403',
        address: '2289 5th Avenue, New York, New York, 10037',
        joined: '11/07/2017'
      },
      {
        name: 'Rowen Atkinson',
        avatar: {
          size: 'xl',
          name: 'Rowen Atkinson',
          round: 'circle',
        },
        email: 'rown@example.com',
        phone: '(201) 200-1851',
        address: '112 Bostwick Avenue, Jersey City, New Jersey, 0730',
        joined: '05/04/2016'
      },
      {
        name: 'Antony Hopkins',
        avatar: {
          size: 'xl',
          img: 'team/2.jpg',
          round: 'circle'
        },
        email: 'antony@example.com',
        phone: '(901) 324-3127',
        address: '3448 Ile De France St #242, Fort Wainwright, Alaska, 99703',
        joined: '05/04/2018',
      },
      {
        name: 'Jennifer Schramm',
        avatar: {
          size: 'xl',
          img: 'team/3.jpg',
          round: 'circle'
        },
        email: 'jennifer@example.com',
        phone: '(828) 382-9631',
        address: '659 Hannah Street, Charlotte, NC 28273',
        joined: '17/03/2016',
      },
      {
        name: 'Raymond Mims',
        avatar: {
          size: 'xl',
          name: 'Raymond Mims',
          round: 'circle'
        },
        email: 'raymond@example.com',
        phone: '(562) 468-5646',
        address: '2298 Locust Court, Artesia, CA 90701',
        joined: '12/07/2014',
      },
      {
        name: 'Michael Jenkins',
        avatar: {
          size: 'xl',
          img: 'team/4.jpg',
          round: 'circle'
        },
        email: 'jenkins@example.com',
        phone: '(302) 613-8829',
        address: '4678 Maud Street, Philadelphia, DE 19103',
        joined: '15/06/2014',
      },
      {
        name: 'Kristine Cadena',
        avatar: {
          size: 'xl',
          img: 'team/13.jpg',
          round: 'circle'
        },
        email: 'cadena@example.com',
        phone: '(317) 273-7814',
        address: '3412 Crestview Manor, Indianapolis, IN 46234',
        joined: '15/04/2015',
      },
      {
        name: 'Suzanne Martinez',
        avatar: {
          size: 'xl',
          name: 'Suzanne Martinez',
          round: 'circle'
        },
        email: 'suzanne@example.com',
        phone: '(212) 344-9983',
        address: '4895 Farnum Road, New York, NY 10004',
        joined: '15/04/2016',
      },
      {
        name: 'Marie Cohen',
        avatar: {
          size: 'xl',
          name: 'Marie Cohen',
          round: 'circle'
        },
        email: 'cohen@example.com',
        phone: '(480) 610-3481',
        address: '3291 Hillside Street, Mesa, AZ 85201',
        joined: '25/08/2016',
      },
      {
        name: 'Michael Scates',
        avatar: {
          size: 'xl',
          img: 'team/9.jpg',
          round: 'circle'
        },
        email: 'scates@example.com',
        phone: '(323) 881-4878',
        address: '162 Hillhaven Drive, Los Angeles, CA 90063',
        joined: '20/12/2016',
      },
      {
        name: 'Kathryn Love',
        avatar: {
          size: 'xl',
          img: 'team/14.jpg',
          round: 'circle'
        },
        email: 'kathryn@example.com',
        phone: '(407) 446-3482',
        address: '2551 Ocala Street, Orlando, FL 32805',
        joined: '12/01/2015',
      },      
      {
        name: 'Estell Pollich',
        avatar: {
          size: 'xl',
          name: 'Estell Pollich',
          round: 'circle'
        },
        email: 'estell@example.com',
        phone: '(201) 447-4782',
        joined: '23/04/2019',
        address: '13572 Kurt Mews South Merritt, IA 52491',
      },
      {
        name: 'Ara Mueller',
        avatar: {
          size: 'xl',
          img: 'team/2.jpg',
          round: 'circle'
        },
        email: 'ara@example.com',
        phone: '(202) 998-4702',
        joined: '23/04/2019',
        address: '91979 Kohler Place Waelchiborough, CT 41291',
      },
      {
        name: 'Lucienne Blick',
        avatar: {
          size: 'xl',
          name: 'Lucienne Blick',
          round: 'circle'
        },
        email: 'blick@example.com',
        phone: '(851) 265-4641',
        joined: '23/04/2019',
        address: '6757 Giuseppe Meadows Geraldinemouth, MO 48819-4970',
      },
      {
        name: 'Laverne Haag',
        avatar: {
          size: 'xl',
          img: 'team/5.jpg',
          round: 'circle'
        },
        email: 'haag@example.com',
        phone: '(245) 988-1927',
        joined: '22/04/2019',
        address: '2327 Kaylee Mill East Citlalli, AZ 89582-3143',
      },
      {
        name: 'Brandon Bednar',
        avatar: {
          size: 'xl',
          img: 'team/6.jpg',
          round: 'circle'
        },
        email: 'bednar@example.com',
        phone: '(953) 589-9324 ',
        joined: '22/04/2019',
        address: '25156 Isaac Crossing Apt. 810 Lonborough, CO 83774-5999',
      },
      {
        name: 'Dimitri Boehm',
        avatar: {
          size: 'xl',
          name: 'Dimitri Boehm',
          round: 'circle'
        },
        email: 'dimitri@example.com',
        phone: '(943) 409-9147',
        joined: '23/04/2019',
        address: '71603 Wolff Plains Apt. 885 Johnstonton, MI 01581',
      },      
      {
        name: 'Trace Farrell',
        avatar: {
          size: 'xl',
          name: 'Trace Farrell',
          round: 'circle'
        },
        email: 'trace@example.com',
        phone: '(442) 485-0384',
        joined: '26/04/2019',
        address: '431 Steuber Mews Apt. 252 Germanland, AK 25882',
      },
      {
        name: 'Estell Nienow',
        avatar: {
          size: 'xl',
          img: 'team/13.jpg',
          round: 'circle'
        },
        email: 'nienow@example.com',
        phone: '(505) 697-7549',
        joined: '26/04/2019',
        address: '4167 Laverna Manor Marysemouth, NV 74590',
      },
      {
        name: 'Daisha Howe',
        avatar: {
          size: 'xl',
          img: 'team/14.jpg',
          round: 'circle'
        },
        email: 'howe@example.com',
        phone: '(337) 571-3547',
        joined: '25/04/2019',
        address: '829 Lavonne Valley Apt. 074 Stehrfort, RI 77914-0379',
      },
      {
        name: 'Miles Haley',
        avatar: {
          size: 'xl',
          name: 'Miles Haley',
          round: 'circle'
        },
        email: 'haley@example.com',
        phone: '(764) 619-4683',
        joined: '24/04/2019',
        address: '53150 Thad Squares Apt. 263 Archibaldfort, MO 00837',
      },
      {
        name: 'Brenda Watsica',
        avatar: {
          size: 'xl',
          name: 'Brenda Watsica',
          round: 'circle'
        },
        email: 'watsica@example.com',
        phone: '(961) 647-6123',
        joined: '24/04/2019',
        address: '9198 O\'Kon Harbors Morarborough, IA 75409-7383',
      },
      {
        name: 'Ellie O\'Reilly',
        avatar: {
          size: 'xl',
          name: 'Ellie O\'Reilly',
          round: 'circle'
        },
        email: 'ellie@example.com',
        phone: ' (601) 688-8144',
        joined: '24/04/2019',
        address: '1478 Kaitlin Haven Apt. 061 Lake Muhammadmouth, SC 35848',
      },
      {
        name: 'Garry Brainstrow',
        avatar: {
          size: 'xl',
          name: 'Garry Brainstrow',
          round: 'circle'
        },
        email: 'garry@example.com',
        phone: '(401) 879-9970',
        joined: '23/04/2019',
        address: 'Garry Brainstrow, 13572 Kurt Mews South Merritt, IA 52491',
      },
    ]

mixin CustomerDropdown(id)
  .dropdown.font-sans-serif.position-static
    button.btn.btn-link.text-600.btn-sm.dropdown-toggle.btn-reveal&attributes(attributes)(type='button' id=id data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false")
      span.fas.fa-ellipsis-h.fs-10
    .dropdown-menu.dropdown-menu-end.border.py-0(aria-labelledby=id)
      .py-2
        a(href='#!').dropdown-item Edit
        a(href='#!').dropdown-item.text-danger Delete

mixin Customer(customer, index)
  tr.btn-reveal-trigger
    td(style="width: 28px;").align-middle.py-2
      .form-check.fs-9.mb-0.d-flex.align-items-center
        input.form-check-input(
          type='checkbox' 
          id=`customer-${index}`
          data-bulk-select-row
        ) 
    td.name.align-middle.white-space-nowrap.py-2
      a(href=`${CWD}${paths['customer-details']}`)
        .d-flex.d-flex.align-items-center
          +Avatar(customer.avatar).me-2
          .flex-1
            h5.mb-0.fs-10=customer.name

    td.email.align-middle.py-2
      a(href=`mailto:${customer.email}`)=customer.email
    td.phone.align-middle.white-space-nowrap.py-2
      a(href=`tel:${customer.phone.match(/\d/g).join('')}`)=customer.phone
    td.address.align-middle.white-space-nowrap.ps-5.py-2=customer.address
    td.joined.align-middle.py-2=customer.joined
    td.align-middle.white-space-nowrap.py-2.text-end
      +CustomerDropdown(`customer-dropdown-${index}`)

mixin Customers
  .card.mb-3#customersTable&attributes(attributes)(data-list!={
    valueNames: ["name", "email", "phone", "address", "joined"],
    page: 10,
    pagination: true,

  })
    .card-header
      .row.flex-between-center
        .col-4.col-sm-auto.d-flex.align-items-center.pe-0
          h5.fs-9.mb-0.text-nowrap.py-2.py-xl-0 Customers

        .col-8.col-sm-auto.text-end.ps-2
          #table-customers-actions.d-none
            .d-flex
              select.form-select.form-select-sm(aria-label='Bulk actions')
                option(selected='') Bulk actions
                option(value='Refund') Refund
                option(value='Delete') Delete
                option(value='Archive') Archive
              button.btn.btn-falcon-default.btn-sm.ms-2(type='button') Apply
          #table-customers-replace-element
            button(type='button').btn.btn-falcon-default.btn-sm
              span.fas.fa-plus(data-fa-transform="shrink-3 down-2")
              span.d-none.d-sm-inline-block.ms-1 New
            button(type='button').btn.btn-falcon-default.btn-sm.mx-2
              span.fas.fa-filter(data-fa-transform="shrink-3 down-2")
              span.d-none.d-sm-inline-block.ms-1 Filter
            button(type='button').btn.btn-falcon-default.btn-sm
              span.fas.fa-external-link-alt(data-fa-transform="shrink-3 down-2")
              span.d-none.d-sm-inline-block.ms-1 Export
    .card-body.p-0
      .table-responsive.scrollbar
        table.table.table-sm.table-striped.fs-10.mb-0.overflow-hidden
          thead.bg-200
            tr
              th
                .form-check.fs-9.mb-0.d-flex.align-items-center
                  input.form-check-input#checkbox-bulk-customers-select(
                    type='checkbox'
                    data-bulk-select!={
                      body: "table-customers-body",
                      actions: "table-customers-actions",
                      replacedElement: "table-customers-replace-element"
                    }
                  )
              th.text-900.sort.pe-1.align-middle.white-space-nowrap(data-sort="name") Name
              th.text-900.sort.pe-1.align-middle.white-space-nowrap(data-sort="email") Email
              th.text-900.sort.pe-1.align-middle.white-space-nowrap(data-sort="phone") Phone
              th.text-900.sort.pe-1.align-middle.white-space-nowrap.ps-5(data-sort="address" style="min-width: 200px;") Billing Address
              th.text-900.sort.pe-1.align-middle.white-space-nowrap(data-sort="joined") Joined
              th.align-middle.no-sort
          tbody.list#table-customers-body
            each customer, index in customers
              +Customer(customer, index)

    .card-footer.d-flex.align-items-center.justify-content-center
      button(type='button' title="Previous" data-list-pagination='prev').btn.btn-sm.btn-falcon-default.me-1
        span.fas.fa-chevron-left
      ul.pagination.mb-0
      button(type='button' title="Next" data-list-pagination='next').btn.btn-sm.btn-falcon-default.ms-1
        span.fas.fa-chevron-right