{# Shared per-rule toggle form. Used by issues / suggestions / storage-billing
   pages. Caller sets:
     - heading        : page heading
     - subheading     : page subheading
     - empty_message  : message when ``rules`` is empty
     - form_action    : POST URL the form submits to
     - rules          : list of {rule_type, display_name, description, is_enabled}
     - saved          : flash bool
     - errors         : dict
#}
<div>
  {# Flash messages live above the card so they're not visually
     scoped to any one rule. #}
  {% if errors and errors.get('_general') %}
    <div class="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 text-sm">
      {{ errors['_general'] }}
    </div>
  {% endif %}
  {% if saved %}
    <div class="p-3 bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-300 text-sm">
      Saved.
    </div>
  {% endif %}

  {% if not rules %}
    {# Empty state - heading still rendered, just no card. #}
    <h2 class="ui-section-title">{{ heading }}</h2>
    <p class="ui-section-subtitle">{{ subheading }}</p>
    <p class="mt-6 text-sm text-slate-500 dark:text-slate-400">{{ empty_message }}</p>
  {% else %}
    <form method="post" action="{{ form_action }}" class="ui-form-scope">
      {# Single visible card with an UNBROKEN border. The page heading,
         subheading, and rule count are the first children inside, so
         the user reads them as the card's title block rather than a
         floating page header. We drop the ``<fieldset>`` + ``<legend>``
         pattern here - legend visually punches a hole through the
         card's top border, which made the heading look like it was
         outside the card on every settings sub-page. The checkboxes
         remain grouped semantically inside the surrounding ``<form>``. #}
      <section class="border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-5">
        <h2 class="ui-section-title m-0">{{ heading }}</h2>
        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ subheading }}</p>
        <p class="mt-1 text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">
          {{ rules | length }} rule{{ '' if rules|length == 1 else 's' }} on this page
        </p>

        <div class="mt-4 space-y-3">
          {% for rule in rules %}
            <label class="flex items-start gap-3 border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/40 p-4 cursor-pointer hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
              <input
                type="checkbox"
                name="rule_{{ rule.rule_type }}"
                {% if rule.is_enabled %}checked{% endif %}
                class="mt-0.5 text-brand-500 focus:ring-brand-500"
              />
              <div class="min-w-0 flex-1">
                <div class="flex flex-wrap items-center gap-2">
                  <span class="text-sm font-medium text-slate-900 dark:text-slate-100">{{ rule.display_name }}</span>
                  <span class="ui-pill {% if rule.is_enabled %}ui-pill-success{% else %}ui-pill-neutral{% endif %}">
                    {{ 'enabled' if rule.is_enabled else 'disabled' }}
                  </span>
                </div>
                {% if rule.description %}
                  <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ rule.description }}</p>
                {% endif %}
              </div>
            </label>
          {% endfor %}
        </div>
      </section>

      <div class="mt-6 flex items-center gap-3">
        <button type="submit" class="ui-btn-primary transition-colors">Save</button>
        <p class="text-sm text-slate-500 dark:text-slate-400">Changes apply on the next scan.</p>
      </div>
    </form>
  {% endif %}
</div>