{# Cost indicators partial #}
<div class="card bg-base-100 shadow-sm border border-base-300">
  <div class="card-body p-4">
    <h3 class="font-semibold text-lg">External API Costs</h3>
    <p class="text-xs opacity-60 mb-3">Last {{ hours }} hours</p>

    {# Summary stats #}
    <div class="grid grid-cols-2 gap-3 mb-4">
      <div class="stat bg-base-200 rounded-box p-3">
        <div class="stat-title text-xs">Total Calls</div>
        <div class="stat-value text-lg">{{ cost_data.total_calls }}</div>
      </div>
      <div class="stat bg-base-200 rounded-box p-3">
        <div class="stat-title text-xs">Est. Cost</div>
        <div class="stat-value text-lg">${{ "%.2f" | format(cost_data.total_cents / 100) }}</div>
      </div>
    </div>

    {# By service breakdown #}
    {% if cost_data.by_service %}
    <div class="space-y-2">
      {% for service, data in cost_data.by_service.items() %}
      <div class="flex items-center justify-between p-2 bg-base-200 rounded">
        <div>
          <span class="text-sm font-medium">{{ service }}</span>
          <span class="text-xs opacity-60 ml-2">{{ data.calls }} calls</span>
        </div>
        <span class="font-mono text-sm">${{ "%.2f" | format(data.cost_cents / 100) }}</span>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-4 opacity-60 text-sm">No external API calls in this period.</div>
    {% endif %}
  </div>
</div>