extends ../layouts/main
block content

  include ../job-queue/components/job-list

  .uk-margin
    h1 Job Queue: #{queueName}
    div(uk-grid).uk-flex-between
      - var pendingJobCount = jobCounts.waiting + jobCounts.delayed + jobCounts.paused + jobCounts.active
      .uk-width-auto Total#[br]#{numeral(pendingJobCount).format('0,0')}
      .uk-width-auto Waiting#[br]#{numeral(jobCounts.waiting).format('0,0')}
      .uk-width-auto Delayed#[br]#{numeral(jobCounts.delayed).format('0,0')}
      .uk-width-auto Paused#[br]#{numeral(jobCounts.paused).format('0,0')}
      .uk-width-auto Active#[br]#{numeral(jobCounts.active).format('0,0')}
      .uk-width-auto Completed#[br]#{numeral(jobCounts.completed).format('0,0')}
      .uk-width-auto Failed#[br]#{numeral(jobCounts.failed).format('0,0')}

  div(uk-grid)
    div(class="uk-width-1-1 uk-width-1-2@l")
      .uk-card.uk-card-default.uk-card-small
        .uk-card-header
          h3.uk-card-title Active
        .uk-card-body
          +renderJobQueueJobList(newsletterQueue, jobs.active)

    div(class="uk-width-1-1 uk-width-1-2@l")
      .uk-card.uk-card-default.uk-card-small
        .uk-card-header
          h3.uk-card-title Waiting
        .uk-card-body
          +renderJobQueueJobList(newsletterQueue, jobs.waiting)

    div(class="uk-width-1-1 uk-width-1-2@l")
      .uk-card.uk-card-default.uk-card-small
        .uk-card-header
          h3.uk-card-title Delayed
        .uk-card-body
          +renderJobQueueJobList(newsletterQueue, jobs.delayed)

    div(class="uk-width-1-1 uk-width-1-2@l")
      .uk-card.uk-card-default.uk-card-small
        .uk-card-header
          h3.uk-card-title Failed
        .uk-card-body
          +renderJobQueueJobList(newsletterQueue, jobs.failed)