DocumentationHeader

/**
 * MindTouch Community Portal
 * Documentation Header
 * @param str $version
 * @param str $maxversion
 * @param bool $commercial
 * @param bool $certified
 * @param bool $deprecated
 */
var version = $version;
var maxVersion = $maxversion;
var commercialOnly = $commercial ?? false;
var mindtouchCertified = $certified ?? false;
var deprecated = $depracted ?? false;

// get the page tags
var pageTags = page.tags;

<table class="mdc-documentation-header">
<tr>
    <th>"Applies to"</th>
    <td>
        "MindTouch " .. version .. " " .. (maxVersion ? "to " .. maxVersion : "or later");
    </td>
    <th>"License"</th>
    <td>
        if (commercialOnly) {
            "All versions";
        } else {
            "All versions";
        }
    </td>
</tr>
<tr>
    <th>"Operating System"</th>
    <td>
    if(#pageTags) {
        foreach (var t in page.tags where string.startswith(t.value, "os:", true)) {
            if (__count > 0) ", ";
            web.link("http://developer.mindtouch.com/index.php?title=Special:Tags" & { tag: t.value }, string.tocamelcase(string.substr(t.value,3)));
        }
    } else {
        "All";
    }
    </td>
    <th>
        "Documentation Types"
    </th>
    <td>
        if (#pageTags) {
            foreach (var t in page.tags where string.startswith(t.value, "topic:", true)) {
                if(__count > 0) ", ";
                web.link("http://developer.mindtouch.com/index.php?title=Special:Tags" & { tag: t.value }, string.tocamelcase(string.substr(t.value,6)));
            }
        } else {
            <i>"Unclassified"</i>;
        }
    </td>
</tr>
<tr>
    // Certified documentation check
    var typeText = "Community Documentation";
    var typeClass = "community";
    if (mindtouchCertified) {
        // Verify that the author can certify
        let typeText = "Community";
        let typeClass = "certified";
    }
    <td colspan="4" class=("certification " .. typeClass)>
        typeText;
        if (deprecated) {
            <p>"Deprecated documentation"</p>;
        }
    </td>
</tr>
</table>

table.mdc-documentation-header {
    width: 100%;
}
table.mdc-documentation-header th {
    background: #999;
    color: #fff;
}
table.mdc-documentation-header td.certification {
    text-align: center;
}
table.mdc-documentation-header td.community {
    background-color: #efefef;
}
table.mdc-documentation-header td.certified {
    background-color: #ffefef;
}