{% load cabinet_tags %}

<div class="card border-0 shadow-sm h-100"
     x-data='chartWidget({{ data|jsonify }})'>
  <div class="card-header bg-white border-0 pt-3 pb-0 d-flex align-items-center justify-content-between">
    <h6 class="fw-semibold mb-0"
        style="font-size:.8rem;
               text-transform:uppercase;
               letter-spacing:.06em;
               color:#64748b">
      <template x-if="config.icon">
        <span class="bi me-2"
              :class="config.icon"
              style="color:var(--cab-primary)"></span>
      </template>
      <span x-text="config.title"></span>
    </h6>
    <template x-if="config.subtitle">
      <span class="text-muted" style="font-size:.75rem;" x-text="config.subtitle"></span>
    </template>
  </div>
  <div class="card-body d-flex flex-column">
    <template x-if="config.kpi_value">
      <div class="d-flex align-items-end gap-3 mb-3">
        <div class="fw-bold"
             style="font-size:2rem;
                    line-height:1"
             x-text="config.kpi_value"></div>
        <template x-if="config.kpi_trend">
          <div class="mb-1" style="font-size:.8rem;">
            <span :style="{ color: config.kpi_trend.startsWith('+') ? '#16a34a' : '#dc2626' }"
                  x-text="(config.kpi_trend.startsWith('+') ? '↑ ' : '↓ ') + config.kpi_trend"></span>
            <span class="text-muted ms-1" x-text="config.kpi_trend_label"></span>
          </div>
        </template>
      </div>
    </template>
    <div :style="`flex:1;min-height:${config.height || '180px'};position:relative;`">
      <canvas x-ref="canvas"></canvas>
    </div>
  </div>
</div>