---
import CardActions from '@ui/CardActions.astro'
import Icon from '@ui/Icon.astro'
import ListGroup from '@ui/ListGroup.astro'
import ListGroupItem from '@ui/ListGroupItem.astro'
import crmDashboard from '@data/crm-dashboard.json'
import CardTitle from '@ui/CardTitle.astro'

const tasks = crmDashboard.tasks_due
---

<div class="card h-100">
  <div class="card-header">
    <div class="d-flex align-items-center gap-2">
      <CardTitle class="mb-0">{tasks.title}</CardTitle>
      <span class="badge bg-red text-white">{tasks.badge}</span>
    </div>
    <CardActions>
      <button type="button" class="btn btn-primary btn-sm">
        <Icon name="plus" class="me-1" />
        {tasks.button_text}
      </button>
    </CardActions>
  </div>

  <ListGroup flush hoverable>
    {
      tasks.items.map((item, index) => (
        <ListGroupItem>
          <div class="row align-items-center g-2">
            <div class="col-auto">
              <input type="checkbox" class="form-check-input m-0" id={`task-due-${index}`} />
            </div>
            <div class="col">
              <label for={`task-due-${index}`}>{item.text}</label>
            </div>
            <div class="col-auto d-flex align-items-center gap-2">
              <span class={`legend-dot bg-${item.color}`} />
              <span class="small text-secondary">{item.due}</span>
            </div>
          </div>
        </ListGroupItem>
      ))
    }
  </ListGroup>
</div>