<style include="cr-shared-style settings-shared"></style>
<style>
/* An H2 is the first element on the page and the top padding is excessive
in that context. */
h2:first-of-type {
padding-top: 0;
}
</style>
<div class="cr-row first">
<div class="flex cr-padded-text">
<h2>$i18n{securityKeysPhonesYourDevices}</h2>
<div class="secondary">$i18n{securityKeysPhonesSyncedDesc}</div>
</div>
</div>
<security-keys-phones-list id="syncedPhonesList" immutable
phones="[[syncedPhones_]]">
</security-keys-phones-list>
<div class="cr-row first">
<div class="flex cr-padded-text">
<h2>$i18n{securityKeysPhonesLinkedDevices}</h2>
<div class="secondary">$i18n{securityKeysPhonesLinkedDesc}</div>
</div>
</div>
<security-keys-phones-list id="linkedPhonesList" phones="[[linkedPhones_]]">
</security-keys-phones-list>
<template is="dom-if" if="[[showDialog_]]" restamp>
<security-keys-phones-dialog name="[[dialogName_]]"
public-key="[[dialogPublicKey_]]"
on-close="onDialogClose_">
</security-keys-phones-dialog>
</template>