<style>
table {
border-collapse: collapse;
margin-top: 12px;
}
thead {
background-color: rgb(240, 240, 240);
border-bottom: 1px solid rgba(0, 0, 0, .06);
}
th:first-child,
td:first-child {
border-inline-end: 1px solid rgba(0, 0, 0, .06);
}
th,
td {
padding: 12px;
text-align: start;
}
th:nth-child(2) {
min-width: 100px;
}
th:nth-child(3) {
min-width: 500px;
}
tbody tr:hover {
background-color: rgb(250, 250, 250);
}
td.pass {
color: green;
}
td.fail {
color: red;
}
</style>
<div>
<h1 id="title">[[title_]]</h1>
<template is="dom-if" if="[[showContentsPage_]]">
<ul>
<li><a href="/parallels">[[getTitle("pluginVmAppName")]]</a></li>
</ul>
</template>
<template is="dom-if" if="[[!showContentsPage_]]">
<template is="dom-if" if="[[diagnostics_.topError]]">
<div id="top-error">
[[formatTopErrorMessage(diagnostics_.topError.message)]]
<a href$="[[diagnostics_.topError.learnMoreLink.url]]"
hidden$="[[!diagnostics_.topError.learnMoreLink]]">
$i18n{learnMoreLabel}
</a>
</div>
</template>
<table>
<thead>
<tr>
<th>$i18n{requirementLabel}</th>
<th>$i18n{statusLabel}</th>
<th>$i18n{explanationLabel}</th>
</tr>
</thead>
<tbody>
<template is="dom-repeat" items="[[diagnostics_.entries]]">
<tr>
<td>[[item.requirement]]</td>
<td class$="[[statusToClass(item.status)]]">
[[statusToString(item.status)]]
</td>
<td>
<template is="dom-if" if="[[item.explanation]]">
[[item.explanation.message]]
<a href$="[[item.explanation.learnMoreLink.url]]"
hidden$="[[!item.explanation.learnMoreLink]]">
$i18n{learnMoreLabel}
</a>
</template>
</td>
</tr>
</dom-repeat>
</tbody>
</table>
</template>
</div>