ferro-json-ui 0.3.4

//! Data-display renderers: `Table` and `DataTable`.
//!
//! Each function reads typed props, escapes and substitutes cell values, and
//! emits HTML. Per-row actions resolve URL placeholders against the row's
//! data at render time. Data resolution is routed through
//! [`crate::data::resolve_path`].
//!
//! Behaviors worth flagging for spec authors:
//! - **DataTable `row_key` / `id` URL templating** — row-action URLs have
//!   the placeholders `{row_key}` and `{id}` substituted against the row's
//!   data before emission. When the `row_key` prop is unset, the fallback
//!   is the row index.
//! - **Table empty-state** — when `data_path` resolves to an array but it
//!   is empty, `props.empty_message` is emitted as a single spanning
//!   `<td>`.

use serde_json::Value;

use crate::component::{
    Column, ColumnAlign, ColumnFormat, DataTableProps, DropdownMenuAction, MediaCardGridProps,
    TableProps, Tone,
};
use crate::data::resolve_path;
use crate::spec::{Element, Spec};

use super::atoms::{badge_inline_html, render_menu_item};
use super::classes::INTERACTIVE_BASE;
use super::html_escape;

/// Renders a simple `Table` element. Reads `TableProps.columns` and
/// resolves rows from `TableProps.data_path`. When `row_actions` is set,
/// an `Azioni` header column is appended and each row receives one
/// `<a href="...">` per action.
pub(crate) fn render_table(el: &Element, _spec: &Spec, data: &Value, _depth: usize) -> String {
    let props: TableProps = match serde_json::from_value(el.props.clone()) {
        Ok(p) => p,
        Err(e) => {
            return format!(
                "<!-- ferro-json-ui: failed to decode Table props: {} -->",
                html_escape(&e.to_string())
            );
        }
    };

    let mut html = String::from(
        "<div class=\"overflow-x-auto\"><table class=\"min-w-full divide-y divide-border\">",
    );

    // Header.
    html.push_str("<thead class=\"bg-surface\"><tr>");
    for col in &props.columns {
        html.push_str(&format!(
            "<th class=\"px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-text-muted\">{}</th>",
            html_escape(&col.label)
        ));
    }
    if props.row_actions.is_some() {
        html.push_str(
            "<th class=\"px-4 py-2 text-right text-xs font-medium uppercase tracking-wider text-text-muted\">Azioni</th>"
        );
    }
    html.push_str("</tr></thead>");

    // Body.
    html.push_str("<tbody class=\"divide-y divide-border bg-background\">");

    let rows = resolve_path(data, &props.data_path);
    let row_array = rows.and_then(|v| v.as_array());

    if let Some(items) = row_array {
        if items.is_empty() {
            if let Some(ref msg) = props.empty_message {
                let col_count =
                    props.columns.len() + if props.row_actions.is_some() { 1 } else { 0 };
                html.push_str(&format!(
                    "<tr><td colspan=\"{}\" class=\"px-4 py-4 text-center text-sm text-text-muted\">{}</td></tr>",
                    col_count,
                    html_escape(msg)
                ));
            }
        } else {
            for row in items {
                html.push_str("<tr class=\"hover:bg-surface\">");
                for col in &props.columns {
                    let cell_text = cell_string(row.get(&col.key));
                    html.push_str(&format!(
                        "<td class=\"px-4 py-2 text-sm text-text whitespace-nowrap\">{}</td>",
                        html_escape(&cell_text)
                    ));
                }
                if let Some(ref actions) = props.row_actions {
                    html.push_str("<td class=\"px-4 py-2 text-right text-sm space-x-2\">");
                    for action in actions {
                        let url = action.url.as_deref().unwrap_or("#");
                        let handler_str = action.handler.as_str();
                        let label = handler_str.split('.').next_back().unwrap_or(handler_str);
                        html.push_str(&format!(
                            "<a href=\"{}\" class=\"text-primary hover:text-primary/80 {INTERACTIVE_BASE}\">{}</a>",
                            html_escape(url),
                            html_escape(label)
                        ));
                    }
                    html.push_str("</td>");
                }
                html.push_str("</tr>");
            }
        }
    } else if let Some(ref msg) = props.empty_message {
        let col_count = props.columns.len() + if props.row_actions.is_some() { 1 } else { 0 };
        html.push_str(&format!(
            "<tr><td colspan=\"{}\" class=\"px-4 py-4 text-center text-sm text-text-muted\">{}</td></tr>",
            col_count,
            html_escape(msg)
        ));
    }

    html.push_str("</tbody></table></div>");
    html
}

/// Renders a `DataTable`. Supports declarative columns with formatters,
/// per-row actions wrapped in a portal-mode dropdown (positioned with
/// `position: fixed` so it escapes the table wrapper's overflow), optional search
/// bar, and per-row visibility filters. Emits a stripe-style desktop table
/// with alternating rows plus a mobile card fallback.
///
/// URL templating: row-action URLs containing `{row_key}` or `{id}` are
/// substituted against the row's value for `props.row_key` (default: row
/// index) and the row's `id` field respectively. Any other `{column_key}`
/// placeholder is substituted against the matching column value on each
/// row before emission.
/// Tailwind text-alignment class for a column. Defaults to left.
fn col_align_class(align: Option<ColumnAlign>) -> &'static str {
    match align {
        Some(ColumnAlign::Right) => "text-right",
        Some(ColumnAlign::Center) => "text-center",
        _ => "text-left",
    }
}

pub(crate) fn render_data_table(el: &Element, _spec: &Spec, data: &Value, _depth: usize) -> String {
    let props: DataTableProps = match serde_json::from_value(el.props.clone()) {
        Ok(p) => p,
        Err(e) => {
            return format!(
                "<!-- ferro-json-ui: failed to decode DataTable props: {} -->",
                html_escape(&e.to_string())
            );
        }
    };

    let rows = resolve_path(data, &props.data_path);
    let items: Vec<Value> = rows.and_then(|v| v.as_array().cloned()).unwrap_or_default();
    let has_actions = props.row_actions.is_some();
    let col_count = props.columns.len() + if has_actions { 1 } else { 0 };
    let empty_msg = props
        .empty_message
        .as_deref()
        .unwrap_or("Nessun elemento trovato");

    let mut html = String::new();

    // Empty short-circuit: emit a single centered card with the description
    // text. Replaces the prior empty-table-row + mobile-empty-div split with
    // one shared, table-less visual so the empty state reads as a deliberate
    // placeholder rather than a degenerate table.
    if items.is_empty() {
        let _ = col_count; // silence unused — column count irrelevant when empty
        return format!(
            "<div class=\"fjui-empty-state\">\
             <p class=\"fjui-empty-state__title\">{}</p>\
             </div>",
            html_escape(empty_msg)
        );
    }

    // Desktop table (hidden on mobile).
    // D-08 migration Plan 07: TABLE SHELL uses fjui-table, fjui-table__header,
    // fjui-table__header-cell. Row/cell classes are Plan 08 scope (data.rs body).
    // The outer wrapper is a flat container (fjui-card border-only, LANG-04).
    html.push_str("<div class=\"hidden md:block fjui-card overflow-hidden\">");

    {
        if props.bulk_select.unwrap_or(false) {
            html.push_str("<table class=\"fjui-table\" data-bulk-select-table>");
        } else {
            html.push_str("<table class=\"fjui-table\">");
        }

        // Header shell — Plan 07 scope.
        html.push_str("<thead class=\"fjui-table__header\"><tr>");
        if props.bulk_select.unwrap_or(false) {
            html.push_str(
                "<th class=\"fjui-table__header-cell fjui-table__bulk-select-checkbox\">\
                 <input type=\"checkbox\" aria-label=\"Seleziona tutti\" class=\"cursor-pointer\" />\
                 </th>",
            );
        }
        for col in &props.columns {
            html.push_str(&format!(
                "<th class=\"fjui-table__header-cell {}\">{}",
                col_align_class(col.align),
                html_escape(&col.label)
            ));
            html.push_str("</th>");
        }
        if has_actions {
            html.push_str("<th class=\"fjui-table__header-cell text-right\">Azioni</th>");
        }
        html.push_str("</tr></thead>");

        // Body rows — Plan 08: fjui-table__body + fjui-table__row + fjui-table__cell (D-08).
        // Zebra striping removed (RSK-01); hairline separator + hover surface in skin layer.
        html.push_str("<tbody class=\"fjui-table__body\">");
        for (index, row) in items.iter().enumerate() {
            let row_key_value = resolve_row_key(row, props.row_key.as_deref(), index);
            let row_href = props
                .row_href
                .as_deref()
                .map(|tmpl| template_url(tmpl, row, &row_key_value));
            let (extra_class, click_attrs) = if let Some(ref href) = row_href {
                let onclick = format!(
                    " onclick=\"if(!event.target.closest('button,a,input,label,[popovertarget],[popover]'))window.location.assign(this.dataset.rowHref)\" data-row-href=\"{}\"",
                    html_escape(href)
                );
                (" cursor-pointer", onclick)
            } else if props.row_actions.is_some() {
                let onclick = format!(
                    " onclick=\"if(!event.target.closest('button,a,input,label,[popovertarget],[popover]'))document.getElementById('dt-{}').showPopover()\"",
                    html_escape(&row_key_value)
                );
                (" cursor-pointer", onclick)
            } else {
                ("", String::new())
            };
            // fjui-table__row: skin owns hover surface + hairline separator + transition.
            // Layout-only utilities (cursor-pointer) remain inline per D-02 allowlist.
            html.push_str(&format!(
                "<tr class=\"fjui-table__row{extra_class}\"{click_attrs}>"
            ));
            if props.bulk_select.unwrap_or(false) {
                html.push_str(&format!(
                    "<td class=\"fjui-table__cell fjui-table__bulk-select-checkbox\">\
                     <input type=\"checkbox\" data-row-key=\"{}\" class=\"cursor-pointer\" />\
                     </td>",
                    html_escape(&row_key_value)
                ));
            }
            // Resolve the row id for peek-card data-peek-id attribute (when any column
            // opts into peek via peek_entity). Falls back to row_key_value when no id field.
            let row_id_str = row
                .get("id")
                .and_then(|v| match v {
                    Value::String(s) => Some(s.clone()),
                    Value::Number(n) => Some(n.to_string()),
                    _ => None,
                })
                .unwrap_or_else(|| row_key_value.clone());
            for col in &props.columns {
                // Numeric columns (currency, date, datetime) get the --numeric modifier for
                // font-variant-numeric: tabular-nums + right-align (LANG-03).
                // Boolean columns get the --boolean modifier and render a status dot.
                let cell_class = match col.format {
                    Some(ColumnFormat::Currency | ColumnFormat::Date | ColumnFormat::DateTime) => {
                        "fjui-table__cell fjui-table__cell--numeric"
                    }
                    Some(ColumnFormat::Boolean) => "fjui-table__cell fjui-table__cell--boolean",
                    _ => "fjui-table__cell",
                };
                // When peek_entity is set AND the row has a href, wrap the cell content in
                // an <a> with data-peek-entity + data-peek-id so the peek overlay fires.
                // Full-literal class name per D-01 (246 lock).
                let cell_content =
                    if let (Some(ref entity), Some(ref href)) = (&col.peek_entity, &row_href) {
                        format!(
                            "<a href=\"{}\" class=\"fjui-table__link\" \
                         data-peek-entity=\"{}\" data-peek-id=\"{}\">{}</a>",
                            html_escape(href),
                            html_escape(entity),
                            html_escape(&row_id_str),
                            render_cell(col, row.get(&col.key))
                        )
                    } else {
                        render_cell(col, row.get(&col.key))
                    };
                html.push_str(&format!(
                    "<td class=\"{} {}\">{}</td>",
                    cell_class,
                    col_align_class(col.align),
                    cell_content
                ));
            }
            if let Some(ref actions) = props.row_actions {
                let templated = template_actions(actions, row, &row_key_value);
                html.push_str("<td class=\"fjui-table__cell text-right\">");
                html.push_str(&render_inline_dropdown(
                    &format!("dt-{row_key_value}"),
                    &templated,
                ));
                html.push_str("</td>");
            }
            html.push_str("</tr>");
        }
        html.push_str("</tbody></table>");
    }
    html.push_str("</div>");

    // Mobile cards (visible on mobile). Empty is handled by the early
    // short-circuit above; reaching here implies at least one row.
    // Mobile card rows use fjui-card (flat surface, border-only, LANG-04).
    html.push_str("<div class=\"block md:hidden space-y-3\">");
    {
        for (index, row) in items.iter().enumerate() {
            let row_key_value = resolve_row_key(row, props.row_key.as_deref(), index);
            let row_href = props
                .row_href
                .as_deref()
                .map(|tmpl| template_url(tmpl, row, &row_key_value));
            let (open_tag, close_tag) = if let Some(ref href) = row_href {
                // Navigate via a div + onclick (mirrors the desktop <tr>), NOT an
                // <a> wrapper: the row-actions dropdown emits a <button>, and a
                // <button> nested inside an <a> is invalid HTML. The browser's
                // parser splits the anchor and re-applies the card classes to each
                // fragment, shattering the mobile card (empty box + title-in-a-box
                // + kebab-in-a-box). A div carries the same click-navigation and
                // legally contains the button.
                (
                    format!(
                        "<div class=\"fjui-card p-4 space-y-2 hover:bg-surface/60 cursor-pointer {INTERACTIVE_BASE}\" onclick=\"if(!event.target.closest('button,a,input,label,[popovertarget],[popover]'))window.location.assign(this.dataset.rowHref)\" data-row-href=\"{}\">",
                        html_escape(href)
                    ),
                    "</div>".to_string(),
                )
            } else if props.row_actions.is_some() {
                (
                    format!(
                        "<div class=\"fjui-card p-4 space-y-2 cursor-pointer\" onclick=\"if(!event.target.closest('button,a,input,label,[popovertarget],[popover]'))document.getElementById('dt-m-{}').showPopover()\">",
                        html_escape(&row_key_value)
                    ),
                    "</div>".to_string(),
                )
            } else {
                (
                    "<div class=\"fjui-card p-4 space-y-2\">".to_string(),
                    "</div>".to_string(),
                )
            };
            html.push_str(&open_tag);
            // Mobile list-item: the first column is the prominent title (with
            // the row action on the same line); the remaining columns form a
            // compact muted meta block beneath it. This replaces the prior
            // fully-transposed label/value stack, which gave the entity name no
            // more weight than its metadata and produced tall, low-scannability
            // cards.
            html.push_str("<div class=\"flex items-start justify-between gap-3\">");
            if let Some(first) = props.columns.first() {
                html.push_str(&format!(
                    "<div class=\"min-w-0 flex-1 fjui-text--body font-semibold truncate\">{}</div>",
                    render_cell(first, row.get(&first.key))
                ));
            }
            if let Some(ref actions) = props.row_actions {
                let templated = template_actions(actions, row, &row_key_value);
                html.push_str("<div class=\"shrink-0 -mt-1 -mr-1\">");
                html.push_str(&render_inline_dropdown(
                    &format!("dt-m-{row_key_value}"),
                    &templated,
                ));
                html.push_str("</div>");
            }
            html.push_str("</div>");
            if props.columns.len() > 1 {
                html.push_str("<div class=\"mt-2 space-y-1\">");
                for col in props.columns.iter().skip(1) {
                    html.push_str(&format!(
                        "<div class=\"flex justify-between gap-3 fjui-text--micro\"><span class=\"fjui-text--meta\">{}</span><span class=\"text-right\">{}</span></div>",
                        html_escape(&col.label),
                        render_cell(col, row.get(&col.key))
                    ));
                }
                html.push_str("</div>");
            }
            html.push_str(&close_tag);
        }
    }
    html.push_str("</div>");

    html
}

/// Renders a single cell's value as a plain string. Handles strings,
/// numbers, booleans, and nulls directly; arrays and objects round-trip
/// through `serde_json::to_string`.
fn cell_string(v: Option<&Value>) -> String {
    match v {
        Some(Value::String(s)) => s.clone(),
        Some(Value::Number(n)) => n.to_string(),
        Some(Value::Bool(b)) => b.to_string(),
        Some(Value::Null) | None => String::new(),
        Some(v @ Value::Array(_)) | Some(v @ Value::Object(_)) => {
            serde_json::to_string(v).unwrap_or_default()
        }
    }
}

/// Render a single DataTable cell. Dispatches on `col.format`:
///
/// - `Some(ColumnFormat::Badge)` reads the cell as `{tone, label}` and
///   emits a Badge `<span>` (shared shape with the standalone `Badge`
///   component via [`badge_inline_html`]). Invalid values emit an HTML
///   comment diagnostic instead of falling back to text — a typed column
///   that silently rendered raw JSON would hide real spec bugs.
/// - All other formats (including absent) emit the existing
///   `html_escape(cell_string(...))` text.
///
/// The Badge cell intentionally bypasses `html_escape` on the wrapper markup
/// because the markup is server-controlled (no caller input flows through
/// the class names or `<span>` chrome). The `label` itself IS html-escaped
/// inside `badge_inline_html`.
fn render_cell(col: &Column, value: Option<&Value>) -> String {
    if let Some(ColumnFormat::Badge) = col.format {
        // Cell must be an object `{tone, label}` (or absent — empty cell).
        match value {
            None | Some(Value::Null) => return String::new(),
            Some(v @ Value::Object(_)) => {
                #[derive(serde::Deserialize)]
                struct BadgeCell {
                    tone: Tone,
                    label: String,
                }
                match serde_json::from_value::<BadgeCell>(v.clone()) {
                    Ok(cell) => return badge_inline_html(cell.tone, &cell.label),
                    Err(e) => {
                        return format!(
                            "<!-- ferro-json-ui: invalid Badge cell value: {} -->",
                            html_escape(&e.to_string())
                        );
                    }
                }
            }
            Some(_) => {
                return format!(
                    "<!-- ferro-json-ui: invalid Badge cell value: expected object {{tone, label}}, got {} -->",
                    html_escape(&cell_string(value))
                );
            }
        }
    }
    if let Some(ColumnFormat::Image) = col.format {
        // Cell value is an image URL string. Null or empty → empty cell (no broken img).
        // The URL is html-escaped before interpolation to prevent src attribute injection
        // (T-213-09).
        match value {
            None | Some(Value::Null) => return String::new(),
            Some(_) => {
                let url = cell_string(value);
                if url.is_empty() {
                    return String::new();
                }
                return format!(
                    "<img src=\"{}\" alt=\"\" class=\"w-8 h-8 rounded-full object-cover\" />",
                    html_escape(&url)
                );
            }
        }
    }
    if let Some(ColumnFormat::Icon) = col.format {
        // Cell value is a built-in icon name; rendered as an inline outline SVG
        // that inherits currentColor. Unknown/empty names render nothing (no
        // raw HTML from the cell value — the name only selects a fixed SVG, so
        // there is no injection surface).
        let name = cell_string(value);
        return match builtin_icon_svg(&name) {
            Some(svg) => format!(
                "<span class=\"inline-flex items-center text-text-muted\" aria-hidden=\"true\">{svg}</span>"
            ),
            None => String::new(),
        };
    }
    if let Some(ColumnFormat::Boolean) = col.format {
        // true → success dot + label_true; false/null → muted dot + label_false.
        // Full-literal class strings per D-01 (no dynamic class assembly).
        // label_true/label_false are html-escaped (T-247-02-01).
        let label_true = col.label_true.as_deref().unwrap_or("Sì");
        let label_false = col.label_false.as_deref().unwrap_or("No");
        let is_true = match value {
            Some(Value::Bool(b)) => *b,
            Some(Value::Number(n)) => n.as_i64() == Some(1),
            _ => false,
        };
        return if is_true {
            format!(
                "<span class=\"fjui-status-dot fjui-status-dot--true\">{}</span>",
                html_escape(label_true)
            )
        } else {
            format!(
                "<span class=\"fjui-status-dot fjui-status-dot--false\">{}</span>",
                html_escape(label_false)
            )
        };
    }
    html_escape(&cell_string(value))
}

/// Built-in outline icons for `ColumnFormat::Icon`. Lucide-derived, 20×20,
/// `currentColor` stroke so they match the surrounding text color. Returns
/// `None` for unknown names (renders an empty cell). The cell value selects an
/// entry by name — it is never interpolated as markup, so this is injection-safe.
fn builtin_icon_svg(name: &str) -> Option<&'static str> {
    match name {
        "folder" => Some(
            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"/></svg>",
        ),
        "file" => Some(
            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/></svg>",
        ),
        "image" => Some(
            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/></svg>",
        ),
        _ => None,
    }
}

/// Substitute placeholders in a URL template against a row.
///
/// Mirrors the placeholder resolution of `template_actions` so the row-level
/// `props.row_href` URL is computed with the same rules as
/// `row_actions[].action.url`:
///
/// 1. `{col_key}` — every key in the row object substitutes its value.
/// 2. `{row_key}` — resolved against `row_key_value`.
/// 3. `{id}` — resolved against `row["id"]` when present.
///
/// Missing placeholders are left unsubstituted.
fn template_url(template: &str, row: &Value, row_key_value: &str) -> String {
    let mut url = template.to_string();
    if let Some(obj) = row.as_object() {
        for (col_key, col_val) in obj {
            let val_str = match col_val {
                Value::String(s) => s.clone(),
                Value::Number(n) => n.to_string(),
                _ => continue,
            };
            url = url.replace(&format!("{{{col_key}}}"), &val_str);
            url = url.replace(&format!("{{row.{col_key}}}"), &val_str);
        }
    }
    url = url.replace("{row_key}", row_key_value);
    if let Some(id) = row.get("id").and_then(|v| match v {
        Value::String(s) => Some(s.clone()),
        Value::Number(n) => Some(n.to_string()),
        _ => None,
    }) {
        url = url.replace("{id}", &id);
    }
    url
}

/// Resolves the row key for a single row. Reads the value at
/// `props.row_key` from the row when present and stringifiable, otherwise
/// falls back to the row index.
pub(crate) fn resolve_row_key(row: &Value, row_key_prop: Option<&str>, index: usize) -> String {
    if let Some(rk) = row_key_prop {
        if let Some(v) = row.get(rk) {
            match v {
                Value::String(s) => return s.clone(),
                Value::Number(n) => return n.to_string(),
                _ => {}
            }
        }
    }
    index.to_string()
}

/// Templates row-action URLs for a single row.
///
/// Substitution order:
/// 1. All column keys present in the row object (`{label}`, `{slug_path}`,
///    …). Only `String` and `Number` values are substituted; booleans,
///    nulls, arrays, and objects are skipped.
/// 2. `{row_key}` — resolved against `row_key_value`.
/// 3. `{id}` — resolved against `row["id"]` when present.
///
/// Missing placeholders (no matching column, and not `{row_key}` / `{id}`)
/// are left unsubstituted — no panic, no silent removal.
/// Returns `true` iff a row-action item should appear for this row.
///
/// - No `visible_if` declared → always visible (backwards compat).
/// - `visible_if = Some(field)` and `row[field]` is truthy → visible.
///   Truthy = `true` / non-zero number / non-empty string / non-empty array
///   or object.
/// - `visible_if = Some(field)` and `row[field]` is missing, null, false,
///   `0`, or empty → hidden. **Fail-closed** so a typo in the field name
///   cannot leak an action onto every row.
fn action_visible_for_row(action: &DropdownMenuAction, row: &Value) -> bool {
    let Some(field) = action.visible_if.as_deref() else {
        return true;
    };
    match row.get(field) {
        None | Some(Value::Null) => false,
        Some(Value::Bool(b)) => *b,
        Some(Value::Number(n)) => {
            if let Some(i) = n.as_i64() {
                i != 0
            } else if let Some(f) = n.as_f64() {
                f != 0.0
            } else {
                false
            }
        }
        Some(Value::String(s)) => !s.is_empty(),
        Some(Value::Array(a)) => !a.is_empty(),
        Some(Value::Object(o)) => !o.is_empty(),
    }
}

pub(crate) fn template_actions(
    actions: &[DropdownMenuAction],
    row: &Value,
    row_key_value: &str,
) -> Vec<DropdownMenuAction> {
    let id_value: Option<String> = row.get("id").and_then(|v| match v {
        Value::String(s) => Some(s.clone()),
        Value::Number(n) => Some(n.to_string()),
        _ => None,
    });

    actions
        .iter()
        .filter(|a| action_visible_for_row(a, row))
        .map(|a| {
            let mut cloned = a.clone();
            // URL fallback: when the action has no explicit `url`, use the
            // handler name as the base.
            let base_url = cloned
                .action
                .url
                .clone()
                .or_else(|| Some(cloned.action.handler.as_str().to_string()));
            if let Some(mut url) = base_url {
                // Substitute all row column keys first.
                if let Some(obj) = row.as_object() {
                    for (col_key, col_val) in obj {
                        let val_str = match col_val {
                            Value::String(s) => s.clone(),
                            Value::Number(n) => n.to_string(),
                            _ => continue,
                        };
                        url = url.replace(&format!("{{{col_key}}}"), &val_str);
                        url = url.replace(&format!("{{row.{col_key}}}"), &val_str);
                    }
                }
                // `{row_key}` substitutes against the value at `props.row_key`.
                url = url.replace("{row_key}", row_key_value);
                if let Some(ref id) = id_value {
                    url = url.replace("{id}", id);
                }
                cloned.action.url = Some(url);
            }
            cloned
        })
        .collect()
}

/// Minimal self-contained dropdown used for row actions. Emits HTML popover
/// markup (`popovertarget` + `popover`); `runtime/dropdowns.rs` anchors the
/// panel under its trigger on open. The browser handles dismiss and lifts
/// the panel into the top layer, so the surrounding DataTable overflow
/// context cannot clip it.
pub(crate) fn render_inline_dropdown(menu_id: &str, items: &[DropdownMenuAction]) -> String {
    let id = html_escape(menu_id);
    let mut html = String::new();
    html.push_str(&format!(
        "<button type=\"button\" popovertarget=\"{id}\" aria-haspopup=\"menu\" aria-label=\"Azioni\" class=\"cursor-pointer select-none inline-flex h-5 items-center justify-center px-2 rounded-md text-text-muted hover:text-text {INTERACTIVE_BASE}\">\u{22EE}</button>"
    ));
    html.push_str(&format!(
        "<div popover id=\"{id}\" data-popover-menu class=\"min-w-[10rem] rounded-md border border-border bg-card shadow-md text-left p-0\" role=\"menu\">"
    ));
    for item in items {
        // D-01: fjui-menu-item full literals. Appearance moved to skin layer.
        html.push_str(&render_menu_item(
            item,
            "fjui-menu-item",
            "fjui-menu-item fjui-menu-item--destructive",
            " role=\"menuitem\"",
        ));
    }
    html.push_str("</div>");
    html
}

/// Renders a `MediaCardGrid`. Each item in `data_path` becomes a card with
/// an optional screenshot image, title, description, status badge, and
/// per-row dropdown actions. URL placeholders follow the same `{row_key}`
/// / `{id}` interpolation rules as `DataTable`.
pub(crate) fn render_media_card_grid(
    el: &Element,
    _spec: &Spec,
    data: &Value,
    _depth: usize,
) -> String {
    let props: MediaCardGridProps = match serde_json::from_value(el.props.clone()) {
        Ok(p) => p,
        Err(e) => {
            return format!(
                "<!-- ferro-json-ui: failed to decode MediaCardGrid props: {} -->",
                html_escape(&e.to_string())
            );
        }
    };

    let rows = resolve_path(data, &props.data_path);
    let items: Vec<Value> = rows.and_then(|v| v.as_array().cloned()).unwrap_or_default();
    let empty_msg = props
        .empty_message
        .as_deref()
        .unwrap_or("Nessun elemento trovato");

    if items.is_empty() {
        return format!(
            "<div class=\"fjui-empty-state\">\
             <p class=\"fjui-empty-state__title\">{}</p>\
             </div>",
            html_escape(empty_msg)
        );
    }

    let col_class = match props.columns.unwrap_or(3) {
        2 => "grid-cols-1 md:grid-cols-2",
        4 => "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
        _ => "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
    };

    let mut html = format!("<div class=\"grid {col_class} gap-4\">");

    let aspect_ratio = props.image_aspect_ratio.as_deref().unwrap_or("4/5");
    let image_position = props.image_position.as_deref().unwrap_or("center");

    for (index, row) in items.iter().enumerate() {
        let row_key_value = resolve_row_key(row, props.row_key.as_deref(), index);

        let title = row
            .get(props.title_key.as_str())
            .and_then(|v| v.as_str())
            .unwrap_or("");

        let description = props
            .description_key
            .as_deref()
            .and_then(|k| row.get(k))
            .and_then(|v| v.as_str());

        let image_url = props
            .image_key
            .as_deref()
            .and_then(|k| row.get(k))
            .and_then(|v| v.as_str())
            .filter(|s| !s.is_empty());

        let image_href = props
            .image_href_key
            .as_deref()
            .and_then(|k| row.get(k))
            .and_then(|v| v.as_str())
            .filter(|s| !s.is_empty());

        let badge_label = props
            .badge_key
            .as_deref()
            .and_then(|k| row.get(k))
            .and_then(|v| v.as_str());

        // Parse the row value through the typed `Tone` enum so MediaCardGrid
        // and `badge_inline_html` cannot drift (T-251-01: the raw row value
        // never reaches a class attribute — invalid tones fall back to
        // `neutral`, and classes come from the shared exhaustive match).
        let badge_tone = props
            .badge_tone_key
            .as_deref()
            .and_then(|k| row.get(k))
            .and_then(|v| serde_json::from_value::<Tone>(v.clone()).ok())
            .unwrap_or_default();

        html.push_str("<div class=\"fjui-card overflow-hidden flex flex-col\">");

        // Image section. If image_key resolves to null/empty, render a blank
        // placeholder slot with the same aspect ratio so card heights stay
        // consistent across the grid.
        if props.image_key.is_some() {
            if let Some(img_src) = image_url {
                let img_tag = format!(
                    "<img src=\"{}\" alt=\"{}\" class=\"w-full object-cover\" style=\"aspect-ratio: {}; object-position: {};\" loading=\"lazy\">",
                    html_escape(img_src),
                    html_escape(title),
                    html_escape(aspect_ratio),
                    html_escape(image_position),
                );
                if let Some(href) = image_href {
                    html.push_str(&format!(
                        "<a href=\"{}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block overflow-hidden bg-surface shrink-0\">{}</a>",
                        html_escape(href),
                        img_tag
                    ));
                } else {
                    html.push_str(&format!(
                        "<div class=\"overflow-hidden bg-surface shrink-0\">{img_tag}</div>"
                    ));
                }
            } else {
                html.push_str(&format!(
                    "<div class=\"w-full bg-surface shrink-0\" style=\"aspect-ratio: {};\" aria-hidden=\"true\"></div>",
                    html_escape(aspect_ratio),
                ));
            }
        }

        // Body
        html.push_str("<div class=\"p-4 flex flex-col gap-1 flex-1\">");
        html.push_str(&format!(
            "<div class=\"text-sm font-semibold text-text\">{}</div>",
            html_escape(title)
        ));
        if let Some(desc) = description {
            html.push_str(&format!(
                "<div class=\"text-xs text-text-muted truncate\">{}</div>",
                html_escape(desc)
            ));
        }
        html.push_str("</div>");

        // Footer: badge + dropdown
        let has_badge = badge_label.is_some();
        let has_actions = props.row_actions.is_some();
        if has_badge || has_actions {
            html.push_str("<div class=\"px-4 pb-4 flex items-center justify-between gap-2\">");

            if let Some(label) = badge_label {
                html.push_str(&badge_inline_html(badge_tone, label));
            } else if has_actions {
                html.push_str("<span></span>");
            }

            if let Some(ref actions) = props.row_actions {
                let templated = template_actions(actions, row, &row_key_value);
                html.push_str(&render_inline_dropdown(
                    &format!("mcg-{row_key_value}"),
                    &templated,
                ));
            }

            html.push_str("</div>");
        }

        html.push_str("</div>"); // card
    }

    html.push_str("</div>"); // grid
    html
}

#[cfg(test)]
mod tests {
    use super::*;
    use serde_json::json;

    fn mk_element(type_name: &str, props: Value) -> Element {
        Element {
            type_name: type_name.to_string(),
            props,
            children: Vec::new(),
            action: None,
            visible: None,
            each: None,
            if_: None,
        }
    }

    fn mk_spec(root: &str, el: Element) -> Spec {
        let mut spec = Spec::builder()
            .element("__tmp__", Element::new("Text"))
            .build()
            .expect("builder accepts trivial spec");
        spec.root = root.to_string();
        spec.elements.clear();
        spec.elements.insert(root.to_string(), el);
        spec
    }

    // ── Table ────────────────────────────────────────────────────────────

    #[test]
    fn table_renders_rows_from_data_path() {
        let el = mk_element(
            "Table",
            json!({
                "data_path": "/users",
                "columns": [{"key": "name", "label": "Name"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"users": [{"name": "Alice"}, {"name": "Bob"}]});
        let html = render_table(&el, &spec, &data, 1);
        assert!(html.contains("Alice"), "got: {html}");
        assert!(html.contains("Bob"), "got: {html}");
        assert!(html.contains("<thead"), "got: {html}");
    }

    #[test]
    fn table_empty_rows_emits_empty_message() {
        let el = mk_element(
            "Table",
            json!({
                "data_path": "/users",
                "columns": [{"key": "name", "label": "Name"}],
                "empty_message": "No users found",
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"users": []});
        let html = render_table(&el, &spec, &data, 1);
        assert!(html.contains("No users found"), "got: {html}");
    }

    #[test]
    fn table_missing_path_emits_empty_message_when_provided() {
        let el = mk_element(
            "Table",
            json!({
                "data_path": "/absent",
                "columns": [{"key": "name", "label": "Name"}],
                "empty_message": "Nothing here",
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({});
        let html = render_table(&el, &spec, &data, 1);
        assert!(html.contains("Nothing here"), "got: {html}");
    }

    #[test]
    fn table_cell_value_is_html_escaped() {
        let el = mk_element(
            "Table",
            json!({
                "data_path": "/users",
                "columns": [{"key": "name", "label": "Name"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"users": [{"name": "<script>x</script>"}]});
        let html = render_table(&el, &spec, &data, 1);
        assert!(!html.contains("<script>x</script>"), "got: {html}");
        assert!(
            html.contains("&lt;script&gt;x&lt;/script&gt;"),
            "got: {html}"
        );
    }

    #[test]
    fn table_props_decode_failure_emits_diagnostic() {
        let el = mk_element("Table", json!(42));
        let spec = mk_spec("root", el.clone());
        let html = render_table(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("<!-- ferro-json-ui: failed to decode Table props"),
            "got: {html}"
        );
    }

    // ── DataTable ────────────────────────────────────────────────────────

    #[test]
    fn data_table_url_template_replaces_id() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/users",
                "columns": [{"key": "name", "label": "Name"}],
                "row_actions": [
                    {"label": "Edit", "action": {"handler": "edit", "url": "/users/{id}/edit", "method": "GET"}}
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"users": [
            {"id": "1", "name": "Alice"},
            {"id": "2", "name": "Bob"},
        ]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("/users/1/edit"),
            "row 1 URL missing; got: {html}"
        );
        assert!(
            html.contains("/users/2/edit"),
            "row 2 URL missing; got: {html}"
        );
        assert!(
            !html.contains("/users/{id}/edit"),
            "{{id}} placeholder must be replaced; got: {html}"
        );
    }

    #[test]
    fn data_table_url_template_replaces_row_key() {
        // `{row_key}` substitutes against the value at `props.row_key` on
        // each row (falls back to the row index).
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/users",
                "row_key": "slug",
                "columns": [{"key": "slug", "label": "Slug"}],
                "row_actions": [
                    {"label": "Open", "action": {"handler": "show", "url": "/u/{row_key}", "method": "GET"}}
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"users": [
            {"slug": "alice"},
            {"slug": "bob"},
        ]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(html.contains("/u/alice"), "got: {html}");
        assert!(html.contains("/u/bob"), "got: {html}");
    }

    #[test]
    fn data_table_empty_renders_empty_message() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/users",
                "columns": [{"key": "name", "label": "Name"}],
                "empty_message": "No rows",
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"users": []});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(html.contains("No rows"), "got: {html}");
    }

    #[test]
    fn data_table_default_empty_message_used_when_absent() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/users",
                "columns": [{"key": "name", "label": "Name"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"users": []});
        let html = render_data_table(&el, &spec, &data, 1);
        // The default empty message is "Nessun elemento trovato".
        assert!(html.contains("Nessun elemento trovato"), "got: {html}");
    }

    #[test]
    fn data_table_url_template_substitution_is_escaped() {
        // Attribute-breakout via a row's id field — the templated URL must
        // pass through html_escape before emission.
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/users",
                "columns": [{"key": "name", "label": "Name"}],
                "row_actions": [
                    {"label": "Edit", "action": {"handler": "edit", "url": "/u/{id}", "method": "GET"}}
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"users": [{"id": "\"><script>", "name": "x"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            !html.contains("><script>"),
            "attribute breakout; got: {html}"
        );
        assert!(html.contains("&quot;"), "got: {html}");
    }

    #[test]
    fn data_table_renders_desktop_and_mobile_markup() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/users",
                "columns": [{"key": "name", "label": "Name"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"users": [{"name": "Alice"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("hidden md:block"),
            "desktop wrapper; got: {html}"
        );
        assert!(
            html.contains("block md:hidden"),
            "mobile wrapper; got: {html}"
        );
    }

    #[test]
    fn data_table_props_decode_failure_emits_diagnostic() {
        let el = mk_element("DataTable", json!(42));
        let spec = mk_spec("root", el.clone());
        let html = render_data_table(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("<!-- ferro-json-ui: failed to decode DataTable props"),
            "got: {html}"
        );
    }

    // Extended placeholder interpolation tests.

    #[test]
    fn data_table_url_template_replaces_column_key() {
        // Any column key bound at render time is substituted in action URLs.
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/pages",
                "columns": [{"key": "label", "label": "Label"}],
                "row_actions": [
                    {"label": "Edit", "action": {"handler": "edit", "url": "/p/{slug_path}/edit", "method": "GET"}}
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"pages": [
            {"id": "7", "label": "Home", "slug_path": "/home"},
        ]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("/p//home/edit"),
            "expected /p//home/edit in output; got: {html}"
        );
        assert!(
            !html.contains("{slug_path}"),
            "{{slug_path}} placeholder must be replaced; got: {html}"
        );
    }

    #[test]
    fn data_table_url_template_replaces_multiple_keys() {
        // Multiple column keys in a single URL are all substituted.
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/pages",
                "columns": [{"key": "label", "label": "Label"}],
                "row_actions": [
                    {"label": "View", "action": {"handler": "view", "url": "/p/{slug_path}/{status}", "method": "GET"}}
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"pages": [
            {"id": "1", "label": "Home", "slug_path": "/home", "status": "draft"},
        ]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("/p//home/draft"),
            "expected /p//home/draft in output; got: {html}"
        );
    }

    #[test]
    fn data_table_post_row_action_emits_form_not_anchor() {
        // A row_action declaring `method: POST` must render as a real
        // `<form method="post">` with a submit `<button>`, not as an
        // `<a href>` that issues a GET request. Regression for the
        // dropped-method bug in `render_inline_dropdown`.
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/items",
                "columns": [{"key": "name", "label": "Name"}],
                "row_actions": [{
                    "label": "Delete",
                    "action": {"handler": "destroy", "url": "/items/{id}", "method": "POST"},
                    "destructive": true,
                }],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"items": [{"id": "9", "name": "x"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("<form action=\"/items/9\" method=\"post\">"),
            "POST row_action must render a form; got: {html}"
        );
        assert!(
            html.contains("<button type=\"submit\""),
            "POST row_action must include a submit button; got: {html}"
        );
        assert!(
            !html.contains("<a href=\"/items/9\""),
            "POST row_action must not render an anchor (which would GET); got: {html}"
        );
    }

    #[test]
    fn data_table_delete_row_action_spoofs_method() {
        // PUT/PATCH/DELETE row_actions use POST + a `_method` hidden input
        // for HTTP method spoofing through the form submission.
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/items",
                "columns": [{"key": "name", "label": "Name"}],
                "row_actions": [{
                    "label": "Delete",
                    "action": {"handler": "destroy", "url": "/items/{id}", "method": "DELETE"},
                }],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"items": [{"id": "9", "name": "x"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("<form action=\"/items/9\" method=\"post\">"),
            "DELETE row_action must render a POST form; got: {html}"
        );
        assert!(
            html.contains("name=\"_method\" value=\"DELETE\""),
            "DELETE row_action must spoof method via hidden input; got: {html}"
        );
    }

    #[test]
    fn data_table_get_row_action_still_emits_anchor() {
        // GET row_actions (the most common case — edit links) continue
        // to render as plain `<a href>` for navigation.
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/items",
                "columns": [{"key": "name", "label": "Name"}],
                "row_actions": [{
                    "label": "Edit",
                    "action": {"handler": "edit", "url": "/items/{id}/edit", "method": "GET"},
                }],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"items": [{"id": "9", "name": "x"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("<a href=\"/items/9/edit\""),
            "GET row_action must render an anchor; got: {html}"
        );
        assert!(
            !html.contains("<form action=\"/items/9/edit\""),
            "GET row_action must not render a form; got: {html}"
        );
    }

    #[test]
    fn data_table_url_template_missing_key_leaves_placeholder() {
        // A placeholder with no matching column key is left as-is (no panic, no silent removal).
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/pages",
                "columns": [{"key": "label", "label": "Label"}],
                "row_actions": [
                    {"label": "Edit", "action": {"handler": "edit", "url": "/p/{nonexistent}/edit", "method": "GET"}}
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"pages": [
            {"id": "1", "label": "Home"},
        ]});
        let html = render_data_table(&el, &spec, &data, 1);
        // {nonexistent} has no matching column — must remain literal in the URL.
        assert!(
            html.contains("{nonexistent}"),
            "missing-key placeholder must be left unsubstituted; got: {html}"
        );
    }

    // F6 — {row.X} prefix alias tests.

    #[test]
    fn data_table_row_prefix_placeholder_resolved() {
        // {row.delete_url} must resolve to the row's `delete_url` field value.
        // No literal curly braces or URL-encoded form must survive into the
        // rendered HTML.
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/items",
                "columns": [{"key": "name", "label": "Name"}],
                "row_actions": [{
                    "label": "Delete",
                    "action": {
                        "handler": "destroy",
                        "url": "{row.delete_url}",
                        "method": "POST"
                    },
                    "destructive": true,
                }],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"items": [
            {"name": "Absence", "delete_url": "/dashboard/staff/1/assenze/3/elimina"},
        ]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("/dashboard/staff/1/assenze/3/elimina"),
            "resolved URL must appear in rendered HTML; got: {html}"
        );
        assert!(
            !html.contains("{row.delete_url}"),
            "literal {{row.delete_url}} must not appear in rendered HTML; got: {html}"
        );
        assert!(
            !html.contains("%7Brow.delete_url%7D"),
            "URL-encoded form must not appear in rendered HTML; got: {html}"
        );
    }

    #[test]
    fn data_table_bare_placeholder_resolved() {
        // Back-compat regression guard: the bare {delete_url} form (no row.
        // prefix) must continue to resolve after the F6 alias is added.
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/items",
                "columns": [{"key": "name", "label": "Name"}],
                "row_actions": [{
                    "label": "Delete",
                    "action": {
                        "handler": "destroy",
                        "url": "{delete_url}",
                        "method": "POST"
                    },
                    "destructive": true,
                }],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"items": [
            {"name": "Absence", "delete_url": "/dashboard/staff/1/assenze/3/elimina"},
        ]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("/dashboard/staff/1/assenze/3/elimina"),
            "bare {{delete_url}} must still resolve; got: {html}"
        );
        assert!(
            !html.contains("{delete_url}"),
            "literal {{delete_url}} must not appear in rendered HTML; got: {html}"
        );
    }

    #[test]
    fn data_table_row_prefix_missing_key_leaves_placeholder() {
        // Pitfall 4 guard: when the row has no `nonexistent` field,
        // {row.nonexistent} must be left literal — not silently stripped.
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/items",
                "columns": [{"key": "name", "label": "Name"}],
                "row_actions": [{
                    "label": "Action",
                    "action": {
                        "handler": "act",
                        "url": "/items/{row.nonexistent}",
                        "method": "GET"
                    },
                }],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"items": [
            {"name": "Item", "delete_url": "/items/1/delete"},
        ]});
        let html = render_data_table(&el, &spec, &data, 1);
        // The {row.nonexistent} placeholder has no matching key in the row;
        // it must survive unsubstituted (or HTML-escaped, which is also acceptable).
        assert!(
            html.contains("{row.nonexistent}") || html.contains("&#123;row.nonexistent&#125;"),
            "missing-key {{row.nonexistent}} must be left unsubstituted; got: {html}"
        );
    }

    #[test]
    fn data_table_row_href_legacy_placeholders() {
        // Regression guard: `{row_key}` and `{id}` still resolve alongside
        // the general column-key substitution.
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/pages",
                "row_key": "slug",
                "columns": [{"key": "slug", "label": "Slug"}],
                "row_actions": [
                    {"label": "View", "action": {"handler": "view", "url": "/p/{row_key}/{id}", "method": "GET"}}
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"pages": [
            {"id": "7", "slug": "row-3"},
        ]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("/p/row-3/7"),
            "legacy {{row_key}} and {{id}} must still be substituted; got: {html}"
        );
    }

    #[test]
    fn data_table_mobile_card_with_row_href_wraps_in_div_not_anchor() {
        // A clickable row (row_href) that also carries a row-actions dropdown
        // must render the mobile card as <div onclick> holding data-row-href,
        // NOT an <a> wrapper. The kebab emits a <button>, and <button> inside
        // <a> is invalid HTML the browser splits — re-applying the card
        // classes to each fragment and shattering the card. Regression guard.
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/items",
                "row_href": "/items/{id}/detail",
                "columns": [{"key": "name", "label": "Name"}],
                "row_actions": [
                    {"label": "Edit", "action": {"handler": "edit", "url": "/items/{id}/edit", "method": "GET"}}
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"items": [{"id": "9", "name": "x"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        // Row navigation is carried by data-row-href; the card is never an
        // anchor wrapping the kebab button.
        assert!(
            !html.contains("<a href=\"/items/9/detail\""),
            "mobile card must not wrap the row in an <a>; got: {html}"
        );
        assert!(
            html.contains("data-row-href=\"/items/9/detail\""),
            "row navigation must be carried by data-row-href; got: {html}"
        );
        // The kebab dropdown button renders — the reason an <a> wrapper would
        // be invalid in the first place.
        assert!(
            html.contains("<button"),
            "row-actions kebab button must render; got: {html}"
        );
    }

    // ── MediaCardGrid ────────────────────────────────────────────────────

    #[test]
    fn media_card_grid_empty_state() {
        let el = mk_element(
            "MediaCardGrid",
            json!({
                "data_path": "/items",
                "title_key": "name"
            }),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_media_card_grid(&el, &spec, &json!({"items": []}), 1);
        assert!(html.contains("Nessun elemento trovato"), "got: {html}");
        assert!(
            !html.contains("<img"),
            "should not render image in empty state"
        );
    }

    #[test]
    fn media_card_grid_renders_title() {
        let el = mk_element(
            "MediaCardGrid",
            json!({
                "data_path": "/items",
                "title_key": "name"
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"items": [{"name": "Hair Factory", "id": 1}]});
        let html = render_media_card_grid(&el, &spec, &data, 1);
        assert!(html.contains("Hair Factory"), "got: {html}");
    }

    #[test]
    fn media_card_grid_renders_image_with_link() {
        let el = mk_element(
            "MediaCardGrid",
            json!({
                "data_path": "/items",
                "title_key": "name",
                "image_key": "screenshot_url",
                "image_href_key": "preview_url"
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"items": [{"name": "HF3", "id": 1, "screenshot_url": "/dashboard/pagine/1/screenshot.png", "preview_url": "/s/amaris-experience/hf3/"}]});
        let html = render_media_card_grid(&el, &spec, &data, 1);
        assert!(html.contains("<img"), "expected img tag, got: {html}");
        assert!(
            html.contains("/dashboard/pagine/1/screenshot.png"),
            "got: {html}"
        );
        assert!(
            html.contains("target=\"_blank\""),
            "expected new-tab link, got: {html}"
        );
        assert!(html.contains("/s/amaris-experience/hf3/"), "got: {html}");
    }

    #[test]
    fn media_card_grid_no_image_when_key_absent() {
        let el = mk_element(
            "MediaCardGrid",
            json!({
                "data_path": "/items",
                "title_key": "name"
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"items": [{"name": "HF3", "id": 1}]});
        let html = render_media_card_grid(&el, &spec, &data, 1);
        assert!(!html.contains("<img"), "got: {html}");
    }

    #[test]
    fn media_card_grid_badge_destructive() {
        let el = mk_element(
            "MediaCardGrid",
            json!({
                "data_path": "/items",
                "title_key": "name",
                "badge_key": "status",
                "badge_tone_key": "tone"
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data =
            json!({"items": [{"name": "HF", "status": "Non visibile", "tone": "destructive"}]});
        let html = render_media_card_grid(&el, &spec, &data, 1);
        assert!(html.contains("Non visibile"), "got: {html}");
        // Plan 05 migration: Badge now emits fjui-badge--destructive (skin owns appearance).
        assert!(html.contains("fjui-badge--destructive"), "got: {html}");
    }

    #[test]
    fn media_card_grid_invalid_tone_falls_back_to_neutral() {
        // T-251-01: an invalid row tone never reaches a class attribute — it
        // falls back to the neutral treatment from the shared badge renderer.
        let el = mk_element(
            "MediaCardGrid",
            json!({
                "data_path": "/items",
                "title_key": "name",
                "badge_key": "status",
                "badge_tone_key": "tone"
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"items": [{"name": "HF", "status": "Attivo", "tone": "not-a-tone"}]});
        let html = render_media_card_grid(&el, &spec, &data, 1);
        assert!(html.contains("Attivo"), "got: {html}");
        // Plan 05 migration: Badge now emits fjui-badge--neutral (skin owns appearance).
        assert!(
            html.contains("fjui-badge--neutral"),
            "expected neutral badge treatment; got: {html}"
        );
        assert!(!html.contains("not-a-tone"), "got: {html}");
    }

    #[test]
    fn media_card_grid_row_actions_interpolated() {
        let el = mk_element(
            "MediaCardGrid",
            json!({
                "data_path": "/items",
                "title_key": "name",
                "row_key": "id",
                "row_actions": [{"label": "Elimina", "action": {"handler": "/dashboard/pagine/{row_key}/delete", "method": "POST"}, "destructive": true}]
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"items": [{"name": "HF", "id": 42}]});
        let html = render_media_card_grid(&el, &spec, &data, 1);
        assert!(html.contains("/dashboard/pagine/42/delete"), "got: {html}");
    }

    // ── ColumnFormat::Badge ──────────────────────────────────────────────

    #[test]
    fn data_table_badge_column_format_renders_pill() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [{"key": "status", "label": "Status", "format": "badge"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"status": {"tone": "destructive", "label": "Mancante"}}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(html.contains("Mancante"), "label missing; got: {html}");
        // Plan 05 migration: Badge now emits fjui-badge--destructive (skin owns appearance).
        assert!(
            html.contains("fjui-badge--destructive"),
            "missing fjui destructive class; got: {html}"
        );
        assert!(
            html.contains("fjui-badge"),
            "missing fjui-badge base class; got: {html}"
        );
        assert!(
            !html.contains("{&quot;tone&quot;"),
            "raw json leaked into cell; got: {html}"
        );
    }

    #[test]
    fn data_table_badge_column_format_invalid_value_emits_diagnostic() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [{"key": "status", "label": "Status", "format": "badge"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        // String instead of {variant, label}
        let data = json!({"rows": [{"status": "Mancante"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("<!-- ferro-json-ui: invalid Badge cell value"),
            "expected diagnostic; got: {html}"
        );
        // The bad value itself should NOT be rendered as live UI.
        assert!(!html.contains(">Mancante<"), "got: {html}");
    }

    #[test]
    fn data_table_badge_column_format_null_value_renders_empty_cell() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [{"key": "status", "label": "Status", "format": "badge"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"status": null}]});
        let html = render_data_table(&el, &spec, &data, 1);
        // No diagnostic, no badge — just an empty cell. Confirms null is a
        // first-class "this row has no status" rather than an error.
        assert!(
            !html.contains("<!-- ferro-json-ui: invalid"),
            "null should be valid; got: {html}"
        );
        assert!(!html.contains("rounded-full"), "got: {html}");
    }

    // ── DropdownMenuAction::visible_if ────────────────────────────────────

    #[test]
    fn data_table_visible_if_keeps_action_when_truthy() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [{"key": "id", "label": "Id"}],
                "row_actions": [
                    {"label": "Scarica", "action": {"handler": "download", "url": "/d/{id}", "method": "GET"}, "visible_if": "can_download"}
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"id": "1", "can_download": true}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(html.contains("Scarica"), "got: {html}");
    }

    #[test]
    fn data_table_visible_if_drops_action_when_falsy() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [{"key": "id", "label": "Id"}],
                "row_actions": [
                    {"label": "Scarica", "action": {"handler": "download", "url": "/d/{id}", "method": "GET"}, "visible_if": "can_download"}
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"id": "1", "can_download": false}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            !html.contains("Scarica"),
            "action should be hidden; got: {html}"
        );
    }

    #[test]
    fn data_table_visible_if_drops_action_when_field_missing() {
        // Fail-closed: missing field = hide. A typo in the spec must NOT show
        // the action everywhere (would expose privileged actions on every row).
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [{"key": "id", "label": "Id"}],
                "row_actions": [
                    {"label": "Scarica", "action": {"handler": "download", "url": "/d/{id}", "method": "GET"}, "visible_if": "can_download_typo"}
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"id": "1", "can_download": true}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            !html.contains("Scarica"),
            "missing field must hide action; got: {html}"
        );
    }

    #[test]
    fn data_table_visible_if_absent_keeps_action() {
        // Backwards-compat: actions with no visible_if always show.
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [{"key": "id", "label": "Id"}],
                "row_actions": [
                    {"label": "Open", "action": {"handler": "open", "url": "/o/{id}", "method": "GET"}}
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"id": "1"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("Open"),
            "action without visible_if should always show; got: {html}"
        );
    }

    #[test]
    fn data_table_visible_if_filters_per_row_independently() {
        // Two rows, one declared action with visible_if — the action shows on
        // the row whose gate is true and hides on the row whose gate is false.
        // This is the load-bearing scenario for heterogeneous-row tables.
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [{"key": "id", "label": "Id"}],
                "row_actions": [
                    {"label": "Send link", "action": {"handler": "send", "url": "/s/{id}", "method": "POST"}, "visible_if": "can_send"},
                    {"label": "Download", "action": {"handler": "dl", "url": "/d/{id}", "method": "GET"}, "visible_if": "can_dl"}
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [
            {"id": "1", "can_send": true,  "can_dl": false},
            {"id": "2", "can_send": false, "can_dl": true},
        ]});
        let html = render_data_table(&el, &spec, &data, 1);
        // Both labels present in the full HTML (one per row).
        assert!(
            html.contains("Send link"),
            "row 1 action missing; got: {html}"
        );
        assert!(
            html.contains("Download"),
            "row 2 action missing; got: {html}"
        );
        // Each row's dropdown menu has its own popover id, so this asserts the
        // filter ran per-row by checking action urls land on the right rows.
        // Row 1's dropdown should contain /s/1 (send) but not /d/1 (download).
        // Row 2's dropdown should contain /d/2 (download) but not /s/2 (send).
        assert!(html.contains("/s/1"), "row 1 send url missing; got: {html}");
        assert!(
            !html.contains("/d/1"),
            "row 1 should not show download; got: {html}"
        );
        assert!(
            html.contains("/d/2"),
            "row 2 download url missing; got: {html}"
        );
        assert!(
            !html.contains("/s/2"),
            "row 2 should not show send; got: {html}"
        );
    }

    // ── ColumnFormat::Image ──────────────────────────────────────────────

    #[test]
    fn data_table_image_column_format_renders_img_tag() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [{"key": "avatar_url", "label": "Avatar", "format": "image"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"avatar_url": "https://cdn.example/a.png"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(html.contains("<img"), "expected <img tag; got: {html}");
        assert!(
            html.contains("https://cdn.example/a.png"),
            "expected URL in src; got: {html}"
        );
    }

    #[test]
    fn data_table_image_column_format_xss_escaped() {
        // T-213-09: a URL containing `"` must not break out of the src attribute.
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [{"key": "avatar_url", "label": "Avatar", "format": "image"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"avatar_url": "https://x.com/a.png\" onload=\"alert(1)"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            !html.contains("\" onload=\""),
            "unescaped quote must not break src attribute; got: {html}"
        );
        assert!(
            html.contains("&quot;"),
            "quote must be html-escaped; got: {html}"
        );
    }

    #[test]
    fn data_table_image_column_format_null_renders_empty_cell() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [{"key": "avatar_url", "label": "Avatar", "format": "image"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"avatar_url": null}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            !html.contains("<img"),
            "null must render empty cell, no <img; got: {html}"
        );
    }

    // ── Plan 08: fjui-table__ row/cell/numeric/boolean classes ───────────

    /// D-08 migration: body wrapper emits fjui-table__body; rows emit fjui-table__row.
    #[test]
    fn data_table_row_emits_fjui_table_row_class() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [{"key": "name", "label": "Name"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"name": "Alice"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("fjui-table__row"),
            "desktop row must emit fjui-table__row; got: {html}"
        );
        assert!(
            html.contains("fjui-table__body"),
            "tbody must emit fjui-table__body; got: {html}"
        );
    }

    /// D-08 migration: default cells emit fjui-table__cell.
    #[test]
    fn data_table_cell_emits_fjui_table_cell_class() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [{"key": "name", "label": "Name"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"name": "Alice"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("fjui-table__cell"),
            "desktop cell must emit fjui-table__cell; got: {html}"
        );
    }

    /// D-08 migration: numeric columns (currency, date) emit fjui-table__cell--numeric (LANG-03).
    #[test]
    fn data_table_numeric_column_emits_fjui_cell_numeric_modifier() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [
                    {"key": "name", "label": "Name"},
                    {"key": "total", "label": "Total", "format": "currency"},
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"name": "Alice", "total": "€10.00"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("fjui-table__cell--numeric"),
            "currency column must emit fjui-table__cell--numeric; got: {html}"
        );
        // The base cell class must still be present alongside the modifier.
        assert!(
            html.contains("fjui-table__cell"),
            "cell must carry base fjui-table__cell; got: {html}"
        );
    }

    /// D-08 migration: boolean columns emit fjui-table__cell--boolean.
    #[test]
    fn data_table_boolean_column_emits_fjui_cell_boolean_modifier() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [
                    {"key": "name", "label": "Name"},
                    {"key": "active", "label": "Active", "format": "boolean"},
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"name": "Alice", "active": true}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("fjui-table__cell--boolean"),
            "boolean column must emit fjui-table__cell--boolean; got: {html}"
        );
    }

    // ── Plan 247-02: boolean status-dot + bulk-select ────────────────────

    /// Boolean column renders fjui-status-dot with configurable labels (RSK-01).
    #[test]
    fn boolean_column_renders_status_dot() {
        use crate::component::{Column, ColumnFormat};
        let col = Column {
            key: "active".to_string(),
            label: "Stato".to_string(),
            format: Some(ColumnFormat::Boolean),
            align: None,
            label_true: Some("Attivo".to_string()),
            label_false: Some("Non attivo".to_string()),
            peek_entity: None,
        };
        let true_html = render_cell(&col, Some(&Value::Bool(true)));
        assert!(
            true_html.contains("fjui-status-dot--true"),
            "true → success dot; got: {true_html}"
        );
        assert!(true_html.contains("Attivo"), "true label; got: {true_html}");
        let false_html = render_cell(&col, Some(&Value::Bool(false)));
        assert!(
            false_html.contains("fjui-status-dot--false"),
            "false → muted dot; got: {false_html}"
        );
        assert!(
            false_html.contains("Non attivo"),
            "false label; got: {false_html}"
        );
        // integer boolean
        let int_true = render_cell(&col, Some(&Value::Number(serde_json::Number::from(1))));
        assert!(
            int_true.contains("fjui-status-dot--true"),
            "Number(1) → true; got: {int_true}"
        );
    }

    /// Bulk-select column emits checkbox th+td when bulk_select=Some(true).
    #[test]
    fn bulk_select_column_present_when_enabled() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "bulk_select": true,
                "columns": [{"key": "name", "label": "Name"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"name": "Alice"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("fjui-table__bulk-select-checkbox"),
            "bulk_select=true must emit fjui-table__bulk-select-checkbox; got: {html}"
        );
        assert!(
            html.contains("type=\"checkbox\""),
            "bulk-select must include checkbox input; got: {html}"
        );
    }

    /// T-249-04-01: bulk-select td must emit html-escaped data-row-key (no attribute break-out).
    #[test]
    fn bulk_select_emits_html_escaped_data_row_key() {
        // row_key value contains a double-quote — must be escaped to &#34; or &quot;
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "bulk_select": true,
                "row_key": "id",
                "columns": [{"key": "name", "label": "Name"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        // The id value contains a double-quote which would break an HTML attribute if unescaped.
        let data = json!({"rows": [{"id": "42\"xss", "name": "Alice"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("data-row-key="),
            "bulk_select=true must emit data-row-key; got: {html}"
        );
        // The raw quote must NOT appear inside an attribute context.
        assert!(
            !html.contains("data-row-key=\"42\""),
            "double-quote in row key must be html-escaped in attribute; got: {html}"
        );
        // The escaped form must be present.
        assert!(
            html.contains("42&quot;xss") || html.contains("42&#"),
            "escaped quote must appear in html; got: {html}"
        );
    }

    /// data-bulk-select-table attribute must be present on the table root when bulk_select enabled.
    #[test]
    fn bulk_select_table_root_has_data_bulk_select_table() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "bulk_select": true,
                "columns": [{"key": "name", "label": "Name"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"name": "Alice"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            html.contains("data-bulk-select-table"),
            "bulk_select=true must emit data-bulk-select-table on the table wrapper; got: {html}"
        );
    }

    /// D-08 migration: zebra-striping utilities must NOT be present (RSK-01).
    #[test]
    fn data_table_no_zebra_striping_in_rows() {
        let el = mk_element(
            "DataTable",
            json!({
                "data_path": "/rows",
                "columns": [{"key": "name", "label": "Name"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"rows": [{"name": "Alice"}, {"name": "Bob"}]});
        let html = render_data_table(&el, &spec, &data, 1);
        assert!(
            !html.contains("even:bg-"),
            "no even: zebra utility; got: {html}"
        );
        assert!(
            !html.contains("odd:bg-"),
            "no odd: zebra utility; got: {html}"
        );
    }
}