{% macro starred_files(starred_count, file_count) %}
<div class="masonry-card">
  <div class="card shadow-sm">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="card-title mb-0"><i class="fas fa-star me-2"></i>Starred Files</h5>
        <a href="{{ url_for('main.starred') }}" class="btn btn-primary btn-sm">View All</a>
      </div>
      <div class="chart-container">
        <canvas id="starredChart"></canvas>
      </div>
      <div class="d-flex justify-content-center gap-4 mt-3">
        <div class="text-center">
          <div class="fw-bold icon-warning" style="font-size:1.5rem;">{{ starred_count }}</div>
          <div class="text-muted small">Starred</div>
        </div>
        <div class="text-center">
          <div class="fw-bold text-primary" style="font-size:1.5rem;">{{ file_count - starred_count }}</div>
          <div class="text-muted small">Unstarred</div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endmacro %}