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

const deals = crmDashboard.top_deals
---

<div class="card">
  <div class="card-header">
    <CardTitle>Top deals</CardTitle>
    <CardActions class="d-flex gap-2">
      <button type="button" class="btn btn-sm">
        <Icon name="filter" class="me-1" />
        Filter
      </button>
      <button type="button" class="btn btn-primary btn-sm">
        <Icon name="plus" class="me-1" />
        Add deal
      </button>
    </CardActions>
  </div>

  <div class="table-responsive">
    <table class="table table-vcenter card-table text-nowrap">
      <thead>
        <tr>
          {deals.columns.map((column) => <th>{column}</th>)}
          <th class="w-1"></th>
        </tr>
      </thead>
      <tbody>
        {
          deals.items.map((item) => (
            <tr>
              <td>
                <div class="fw-medium">{item.company}</div>
                <div class="small text-secondary">{item.contact}</div>
              </td>
              <td>
                <span class={`badge bg-${item.stage_color}-lt text-${item.stage_color}`}>{item.stage}</span>
              </td>
              <td class="fw-semibold">{item.value}</td>
              <td>
                <div class="d-flex align-items-center gap-2">
                  <div class="w-100">
                    <Progress size="sm" value={item.probability} color={item.probability_color} />
                  </div>
                  <span class="small text-secondary">{item.probability}%</span>
                </div>
              </td>
              <td>
                <Avatar placeholder={item.owner_initials} color={item.owner_color} size="sm" />
              </td>
              <td>
                <button type="button" class="btn btn-icon btn-sm" aria-label="Deal actions">
                  <Icon name="dots" />
                </button>
              </td>
            </tr>
          ))
        }
      </tbody>
    </table>
  </div>
</div>