<style include="cr-shared-style settings-shared iron-flex">
#is-done-section > iron-icon {
--iron-icon-fill-color: var(--cr-checked-color);
}
</style>
<div hidden$="[[!isDone_]]" id="is-done-section" class="cr-row first">
<iron-icon icon="settings:check-circle"></iron-icon>
<div class="flex no-min-width">
$i18n{incompatibleApplicationsDone}
</div>
</div>
<template is="dom-if" if="[[!isDone_]]">
<div class="cr-row first">
<iron-icon icon="cr:security"></iron-icon>
<div class="flex no-min-width">
<div hidden$="[[!hasAdminRights_]]">
[[subtitleText_]] $i18nRaw{incompatibleApplicationsSubpageLearnHow}
</div>
<div hidden$="[[hasAdminRights_]]">
[[subtitleNoAdminRightsText_]]
</div>
</div>
</div>
<div class="cr-row continuation">
<h2 class="secondary">[[listTitleText_]]</h2>
</div>
<div id="incompatible-applications-list" class="list-frame vertical-list">
<template is="dom-repeat" items="[[applications_]]" as="application">
<incompatible-application-item
hidden$="[[!hasAdminRights_]]"
class="incompatible-application"
application-name="[[application.name]]"
action-type="[[application.type]]"
action-url="[[application.url]]">
</incompatible-application-item>
<div hidden$="[[hasAdminRights_]]"
class="list-item incompatible-application">
[[application.name]]
</div>
</template>
</div>
</template>