{# 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>
  <h2 class="ui-section-title">{{ heading }}</h2>
  <p class="ui-section-subtitle">{{ subheading }}</p>

  {% if errors and errors.get('_general') %}
    <div class="mt-4 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 rounded-lg">
      {{ errors['_general'] }}
    </div>
  {% endif %}
  {% if saved %}
    <div class="mt-4 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 rounded-lg">
      Saved.
    </div>
  {% endif %}

  {% if not rules %}
    <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 mt-6">
      <fieldset class="border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-5">
        <legend class="px-2 text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300">Active rules</legend>
        <p class="mt-1 text-sm 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>
      </fieldset>

      <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>