{#
  Maintenance card (Stage E). The global destructive sweeps, gathered into one
  card at the bottom of the dashboard. Marked as a danger zone by the red left
  rule (.card--danger); the destructive ops are stacked as separated rows --
  description on the left, controls on the right, divided by a hairline like
  the tables above. Per-row destructive actions (VM remove, artifact delete)
  stay contextual in their own tables. Both sweeps go through the same modal
  confirm gate as before.
#}
<section class="card card--wide card--danger" id="maintenance-card">
  <h2><svg class="icon" aria-hidden="true"><use href="#i-alert"></use></svg>Maintenance</h2>
  <p class="field-hint">Destructive operations — each asks for confirmation before it runs.</p>
  <div class="maintenance-grid">

    <div class="maintenance-op">
      <div class="maintenance-op-info">
        <h3>Cleanup orphaned VMs</h3>
        <p class="field-hint">Delete orphaned clone directories older than the given age.</p>
      </div>
      <form method="post" action="/vms/cleanup" id="vms-cleanup-form" aria-label="Cleanup orphaned VMs"
            hx-post="/vms/cleanup" hx-target="#action-slot" hx-swap="innerHTML">
        <input type="hidden" name="csrf" value="{{ csrf_token }}">
        <div class="op-field">
          <label for="vms-cleanup-max-age">Max age (h)</label>
          <input type="number" id="vms-cleanup-max-age" name="max_age_hours" value="4" min="0" hx-preserve="true">
        </div>
        <div class="btn-row">
          <button type="submit" class="btn btn-danger" aria-label="Cleanup orphaned VMs older than the given age">
            <svg class="icon" aria-hidden="true"><use href="#i-trash"></use></svg>Cleanup orphans
          </button>
        </div>
      </form>
    </div>

    <div class="maintenance-op">
      <div class="maintenance-op-info">
        <h3>Purge cargo cache</h3>
        <p class="field-hint">
          <strong>Purge (max age)</strong> removes only entries older than the
          retention window. <strong>Empty all</strong> clears the whole cache now,
          regardless of age.
        </p>
      </div>
      <form method="post" action="/cache/purge" id="cache-purge-form" aria-label="Purge cargo cache"
            hx-post="/cache/purge" hx-target="#action-slot" hx-swap="innerHTML">
        <input type="hidden" name="csrf" value="{{ csrf_token }}">
        <div class="op-field">
          <label for="cache-max-age">Max age (days)</label>
          <input type="number" id="cache-max-age" name="max_age_days"
                 value="{{ cache.retention_days if cache else 30 }}" min="0" hx-preserve="true">
        </div>
        <div class="btn-row">
          <button type="submit" class="btn btn-danger" aria-label="Purge cargo cache entries older than the max age">
            <svg class="icon" aria-hidden="true"><use href="#i-trash"></use></svg>Purge (max age)
          </button>
          <button type="submit" name="mode" value="all" class="btn btn-danger"
                  aria-label="Empty the entire cargo cache regardless of age">
            <svg class="icon" aria-hidden="true"><use href="#i-trash"></use></svg>Empty all
          </button>
        </div>
      </form>
    </div>

  </div>
</section>