{% from 'common/macros.html' import format_size %}

{% macro trash(trash_count, pending_deletion, oldest_trash_date, trash_size) %}
<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-trash me-2"></i>Trash Storage</h5>
        <a href="{{ url_for('main.trash') }}" class="btn btn-primary btn-sm">View All</a>
      </div>
      <div class="d-flex flex-column">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <div class="d-flex align-items-center">
            <i class="fas fa-file me-2 icon-primary"></i>
            <span class="text-muted">Files in trash:</span>
          </div>
          <div class="fw-bold text-primary">{{ trash_count }}</div>
        </div>
        <div class="d-flex justify-content-between align-items-center mb-3">
          <div class="d-flex align-items-center">
            <i class="fas fa-exclamation-triangle me-2 icon-danger"></i>
            <span class="text-muted">Deleting in 7 days:</span>
          </div>
          <div class="fw-bold text-danger">{{ pending_deletion }}</div>
        </div>
        <div class="d-flex justify-content-between align-items-center mb-3">
          <div class="d-flex align-items-center">
            <i class="fas fa-clock me-2 icon-primary"></i>
            <span class="text-muted">Oldest deletion:</span>
          </div>
          <div class="fw-bold text-primary">{{ oldest_trash_date|default('N/A') }}</div>
        </div>
        <div class="d-flex justify-content-between align-items-center mb-3">
          <div class="d-flex align-items-center">
            <i class="fas fa-hdd me-2 icon-primary"></i>
            <span class="text-muted">Storage used:</span>
          </div>
          <div class="fw-bold text-primary">{{ format_size(trash_size) }}</div>
        </div>
        <div class="alert alert-info mb-0">
          <div class="d-flex align-items-center">
            <i class="fas fa-info-circle me-2"></i>
            <div>
              <div class="fw-bold mb-1">Files will be permanently deleted after 30 days</div>
              <div class="small">You can restore files before they are permanently deleted</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endmacro %}