mixin CardGreetingsManagement
  .card&attributes(attributes)
    +Background({image: `${CWD}assets/img/icons/spot-illustrations/corner-3.png`, className: 'bg-card'})
    .card-header.z-1
      h5.text-primary Welcome to Falcon! 
      h6.text-600 Here are some quick links for you to start  
    .card-body.z-1
      .row.g-2.h-100.align-items-end
        -
          var greetingsItems = [
            {
              title: 'General',
              text: 'Customize with a few clicks',
              icon: 'fas fa-chess-rook',
              color: 'primary'
            },
            {
              title: 'Upgrade to pro',
              text: 'Try Pro for 14 days free! ',
              icon: 'fas fa-crown',
              color: 'warning'
            },
            {
              title: 'Create a meeting',
              text: 'Manage and update your meetings',
              icon: 'fas fa-video',
              color: 'success'
            },
            {
              title: 'Members activity',
              text: 'Monitor activity and supervise',
              icon: 'fas fa-user',
              color: 'info'
            }
          ];
        each greetingsItem in greetingsItems
          .col-sm-6.col-md-5
            +GreetingsItem(greetingsItem)

mixin GreetingsItem(item)
  .d-flex.position-relative
    .icon-item.icon-item-sm.border.rounded-3.shadow-none.me-2
      span(class=`${item.icon} text-${item.color}`)
    .flex-1
      a(href="#!").stretched-link.text-800
        h6.mb-0 #{item.title}
      p.mb-0.fs-11.text-500 #{item.text}
      
mixin CardTeamProgress 
  .card&attributes(attributes)
    .card-header.d-flex.flex-between-center
      h5.mb-0 Team Progress
      a.btn.btn-link.btn-sm.px-0(href=`#!`) Report
        span.fas.fa-chevron-right.ms-1.fs-11  
    .card-body
      p.fs-10.text-600 See team members' time worked, <br /> activity levels, and progress
      .progress.mb-3.rounded-pill(style="height: 6px;" role='progressbar' aria-valuenow='43.72' aria-valuemin='0' aria-valuemax='100')
        .progress-bar.bg-progress-gradient.rounded-pill(style='width: 75%')
      p.mb-0.text-primary 75% completed
      p.mb-0.fs-11.text-500 Jan 1st to 30th

mixin CardFalconRoadMapDiscussion
  .card&attributes(attributes)
    .card-header.pb-0
      .row 
        .col
          p.mb-1.fs-11.text-500 Upcoming schedule
          h5.text-primary.fs-9 Falcon discussion
        .col-auto
          .bg-primary-subtle.px-3.py-3.rounded-circle.text-center(style={width: '60px', height: '60px'})
            h5.text-primary.mb-0.d-flex.flex-column.mt-n1
              span 09
              small.text-primary.fs-11.lh-1 MAR
    .card-body.d-flex.align-items-end
      .row.g-3.justify-content-between
        .col-10.mt-0
          p.fs-10.text-600.mb-0 The very first general meeting for planning Falcon’s design and development roadmap
        .col-auto
          button.btn.btn-success.w-100.fs-10(type='button')
            span.fas.fa-video.me-2
            | Join meeting
        .col-auto.ps-0
          .avatar-group.avatar-group-dense
            -
              var roadMapUsers = [
                {
                  img:'team/1-thumb.png',
                  size: 'xl'
                },
                {
                  img:'team/2-thumb.png',
                  size: 'xl'
                },
                {
                  img:'team/3-thumb.png',
                  size: 'xl'
                },
                {
                  more:'+50',
                  size: 'xl'
                },
              ];
            each user in roadMapUsers
              +Avatar(user).border.border-3.border-200.rounded-circle