{# Settings comparison component.
   Expects: current_setting (str), recommended_setting (str),
            affected_resource (str, optional)
#}
{% if affected_resource %}
<p class="text-sm text-slate-600 dark:text-slate-400 mb-2">
  Resource: <code class="text-xs font-mono text-slate-800 dark:text-slate-200">{{ affected_resource }}</code>
</p>
{% endif %}
<div class="grid grid-cols-2 gap-3">
  <div class="border border-slate-200 dark:border-slate-800 rounded-sm p-3">
    <p class="text-xs font-medium text-slate-500 dark:text-slate-400 mb-2 uppercase tracking-wide">Current Setting</p>
    <pre class="text-sm font-mono text-slate-800 dark:text-slate-200 whitespace-pre-wrap wrap-break-word">{{ current_setting }}</pre>
  </div>
  <div class="border border-brand-100 dark:border-brand-700 rounded-sm p-3 bg-brand-50/50 dark:bg-brand-700/20">
    <p class="text-xs font-medium text-brand-500 dark:text-brand-300 mb-2 uppercase tracking-wide">Recommended Setting</p>
    <pre class="text-sm font-mono text-brand-700 dark:text-brand-100 whitespace-pre-wrap wrap-break-word">{{ recommended_setting }}</pre>
  </div>
</div>