<div class="border-t pt-4 mt-2" style="border-color: var(--border-default);">
  <h3 class="text-sm font-semibold mb-3" style="color: var(--text-primary);">Health Drilldown</h3>

  {# Postmark Rates #}
  <div class="grid grid-cols-3 gap-4 mb-4">
    <div>
      <p class="text-xs uppercase" style="color: var(--text-muted);">Delivery Rate</p>
      <p class="text-lg font-semibold {% if health.postmark_delivery_rate is not none and health.postmark_delivery_rate < 95 %}text-red-600{% endif %}">
        {% if health.postmark_delivery_rate is not none %}{{ health.postmark_delivery_rate }}%{% else %}&mdash;{% endif %}
      </p>
    </div>
    <div>
      <p class="text-xs uppercase" style="color: var(--text-muted);">Bounce Rate</p>
      <p class="text-lg font-semibold {% if health.postmark_bounce_rate is not none and health.postmark_bounce_rate > 2 %}text-red-600{% elif health.postmark_bounce_rate is not none and health.postmark_bounce_rate > 1 %}text-yellow-600{% endif %}">
        {% if health.postmark_bounce_rate is not none %}{{ health.postmark_bounce_rate }}%{% else %}&mdash;{% endif %}
      </p>
    </div>
    <div>
      <p class="text-xs uppercase" style="color: var(--text-muted);">Spam Rate</p>
      <p class="text-lg font-semibold {% if health.postmark_spam_rate is not none and health.postmark_spam_rate > 0.1 %}text-red-600{% endif %}">
        {% if health.postmark_spam_rate is not none %}{{ health.postmark_spam_rate }}%{% else %}&mdash;{% endif %}
      </p>
    </div>
  </div>

  {# Activation At-Risk #}
  <div class="mb-4">
    <p class="text-xs uppercase mb-1" style="color: var(--text-muted);">Activation At-Risk</p>
    <p class="text-lg font-semibold {% if health.activation_at_risk_count > 0 %}text-yellow-600{% endif %}">
      {{ health.activation_at_risk_count }} customer{{ "s" if health.activation_at_risk_count != 1 else "" }}
    </p>
  </div>

  {# Issues by Tier #}
  {% if health.issues_by_tier %}
  <div class="mb-4">
    <p class="text-xs uppercase mb-2" style="color: var(--text-muted);">Issues by Tier</p>
    <div class="flex gap-3">
      {% for tier, count in health.issues_by_tier.items() %}
      <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium"
            style="background: var(--bg-surface-hover); color: var(--text-primary);">
        {{ tier }}: {{ count }}
      </span>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {# Oldest Unresolved #}
  {% if health.oldest_unresolved %}
  <div class="mb-2">
    <p class="text-xs uppercase mb-1" style="color: var(--text-muted);">Oldest Unresolved Issue</p>
    <p class="text-sm" style="color: var(--text-primary);">
      #{{ health.oldest_unresolved.get("number", "?") }}:
      {{ health.oldest_unresolved.get("title", "Unknown") }}
      <span class="text-xs" style="color: var(--text-muted);">
        ({{ health.oldest_unresolved.get("created_at", "?") }})
      </span>
    </p>
  </div>
  {% endif %}
</div>
