Multi-level params not displaying correctly

[duclet]

It seems like multi-level params (further than 2 level), is not being displayed correctly. There are probably better and cleaner way to get this working but I'm put together a quick hack to get it to display correctly. Not ideal and probably needs some work but I want to post something before I forget about it.

<?js
    var self = this;
    var subprops = prop.subparams || prop.subprops;
    var propNameParts = prop.name.split('.');
    var propDepth = depth + propNameParts.length - 1;
    var propName = propNameParts[propNameParts.length - 1];
?>
<tr class="prop">
    <?js if (hasName) { ?>
        <td class="name" style="white-space: nowrap">
            <?js if (propDepth) { ?>
                <span class="prefix"><?js= new Array(propDepth).join('  ') + '&#8627;' ?></span>
            <?js } ?>
            <code><?js= propName ?></code>
        </td>
    <?js } ?>

    <td class="type">
        <?js if (prop.type && prop.type.names) { ?>
            <?js= self.partial('type.tmpl', prop.type.names) ?>
        <?js } ?>
    </td>

    <?js if (hasAttributes) { ?>
        <td class="attributes">
            <?js if (prop.optional) { ?>
                <div class="attribute optional">optional</div>
            <?js } ?>

            <?js if (prop.nullable) { ?>
                <div class="attribute nullable">nullable</div>
            <?js } ?>

            <?js if (prop.variable) { ?>
                <div class="attribute repeatable">repeatable</div>
            <?js } ?>
        </td>
    <?js } ?>

    <?js if (hasDefault) { ?>
        <td class="default">
            <?js if (typeof prop.defaultvalue !== 'undefined') { ?>
                <code><?js= self.htmlsafe(prop.defaultvalue) ?></code>
            <?js } ?>
        </td>
    <?js } ?>

    <td class="description last"><?js= prop.description ?></td>

</tr>

<?js subprops && subprops.forEach(function(prop) { ?>
    <?js if (!prop) { return; } ?>
    <?js=
        self.partial('prop.tmpl', {
            hasName: hasName,
            hasAttributes: hasAttributes,
            hasDefault: hasDefault,
            depth: depth + 1, // used for nested properties
            prop: prop
        })
    ?>
<?js }); ?>