(function () {
    const OrgPortal = (window.OrgPortal = window.OrgPortal || {});
    const { h } = OrgPortal.runtime;
    const { portalData } = OrgPortal.data;
    const actions = OrgPortal.actions;

    OrgPortal.componentFns = OrgPortal.componentFns || {};

    OrgPortal.componentFns.FleetCard = function FleetCard() {
        const SimpleStat = OrgPortal.componentFns.SimpleStat;

        return h(
            "section",
            { className: "card org-panel org-scroll-panel org-span-7" },
            h(
                "div",
                { className: "org-panel-head" },
                h(
                    "div",
                    null,
                    h("h2", { className: "org-panel-title" }, "Fleet"),
                    h(
                        "p",
                        { className: "org-panel-subtitle" },
                        "Individual vehicles with type, status, and overall damage.",
                    ),
                ),
            ),
            h(
                "div",
                { className: "org-simple-list" },
                ...portalData.fleet.map((unit) =>
                    h(
                        "article",
                        { className: "org-simple-row" },
                        h(
                            "strong",
                            { className: "org-simple-name" },
                            unit.name,
                        ),
                        h(
                            "div",
                            { className: "org-simple-meta" },
                            SimpleStat(
                                "Type",
                                actions.formatVehicleType(unit.type),
                            ),
                            SimpleStat("Status", unit.status),
                            SimpleStat("Damage", unit.damage),
                        ),
                    ),
                ),
            ),
        );
    };
})();