<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <%# Total Income Card %>
  <div class="bg-container rounded-xl shadow-border-xs p-6">
    <div class="flex items-start justify-between mb-3">
      <div class="flex items-center gap-2">
        <%= icon("trending-up", size: "sm") %>
        <h3 class="text-sm font-medium text-secondary">
          <%= t("reports.summary.total_income") %>
        </h3>
      </div>
    </div>

    <div class="space-y-2">
      <p class="text-2xl font-semibold text-primary privacy-sensitive">
        <%= metrics[:current_income].format %>
      </p>

      <% if metrics[:income_change] %>
        <div class="flex items-center gap-1.5 privacy-sensitive">
          <% if metrics[:income_change] >= 0 %>
            <%= icon("arrow-up", size: "sm") %>
            <span class="text-sm font-medium text-success">
              +<%= metrics[:income_change] %>%
            </span>
          <% else %>
            <%= icon("arrow-down", size: "sm") %>
            <span class="text-sm font-medium text-destructive">
              <%= metrics[:income_change] %>%
            </span>
          <% end %>
          <span class="text-sm text-subdued">
            <%= t("reports.summary.vs_previous") %>
          </span>
        </div>
      <% end %>
    </div>
  </div>

  <%# Total Expenses Card %>
  <div class="bg-container rounded-xl shadow-border-xs p-6">
    <div class="flex items-start justify-between mb-3">
      <div class="flex items-center gap-2">
        <%= icon("trending-down", class: "w-5 h-5") %>
        <h3 class="text-sm font-medium text-secondary">
          <%= t("reports.summary.total_expenses") %>
        </h3>
      </div>
    </div>

    <div class="space-y-2">
      <p class="text-2xl font-semibold text-primary privacy-sensitive">
        <%= metrics[:current_expenses].format %>
      </p>

      <% if metrics[:expense_change] %>
        <div class="flex items-center gap-1.5 privacy-sensitive">
          <% if metrics[:expense_change] >= 0 %>
            <%= icon("arrow-up", class: "w-4 h-4 text-destructive") %>
            <span class="text-sm font-medium text-destructive">
              +<%= metrics[:expense_change] %>%
            </span>
          <% else %>
            <%= icon("arrow-down", class: "w-4 h-4 text-success") %>
            <span class="text-sm font-medium text-success">
              <%= metrics[:expense_change] %>%
            </span>
          <% end %>
          <span class="text-sm text-subdued">
            <%= t("reports.summary.vs_previous") %>
          </span>
        </div>
      <% end %>
    </div>
  </div>

  <%# Net Savings Card %>
  <div class="bg-container rounded-xl shadow-border-xs p-6">
    <div class="flex items-start justify-between mb-3">
      <div class="flex items-center gap-2">
        <%= icon("piggy-bank", class: "w-5 h-5") %>
        <h3 class="text-sm font-medium text-secondary">
          <%= t("reports.summary.net_savings") %>
        </h3>
      </div>
    </div>

    <div class="space-y-2">
      <p class="text-2xl font-semibold privacy-sensitive <%= metrics[:net_savings] >= 0 ? "text-success" : "text-destructive" %>">
        <%= metrics[:net_savings].format %>
      </p>

      <p class="text-sm text-subdued">
        <%= t("reports.summary.income_minus_expenses") %>
      </p>
    </div>
  </div>

  <%# Budget Performance Card %>
  <div class="bg-container rounded-xl shadow-border-xs p-6">
    <div class="flex items-start justify-between mb-3">
      <div class="flex items-center gap-2">
        <%= icon("gauge", class: "w-5 h-5") %>
        <h3 class="text-sm font-medium text-secondary">
          <%= t("reports.summary.budget_performance") %>
        </h3>
      </div>
    </div>

    <div class="space-y-2">
      <% if metrics[:budget_percent] %>
        <p class="text-2xl font-semibold text-primary privacy-sensitive">
          <%= metrics[:budget_percent] %>%
        </p>

        <div class="space-y-1.5">
          <div class="h-2 bg-surface-inset rounded-full overflow-hidden">
            <div class="h-full <%= metrics[:budget_percent] >= 100 ? "bg-destructive" : metrics[:budget_percent] >= 80 ? "bg-warning" : "bg-success" %> rounded-full transition-all"
                 style="width: <%= [metrics[:budget_percent], 100].min %>%"></div>
          </div>

          <p class="text-sm text-subdued">
            <%= t("reports.summary.of_budget_used") %>
          </p>
        </div>
      <% else %>
        <p class="text-base text-subdued">
          <%= t("reports.summary.no_budget_data") %>
        </p>
      <% end %>
    </div>
  </div>
</div>
